简单的动态下拉菜单

效果:

 
思路:
      先动态生成n个div,隐藏不显示,然后使用javascript中的 onmouseover,onmouseout等事件显示或隐藏div
例子:
left ascx.cs  
 <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> namespace MySite.Controls
{
 using System;
 using System.Data;
 using System.Drawing;
 using System.Web;
 using System.Web.UI.WebControls;
 using System.Web.UI.HtmlControls;
 using System.Text;

 /// <summary>
 ///  left 的摘要说明。
 /// </summary>
 public class left : System.Web.UI.UserControl
 {
  protected System.Web.UI.WebControls.Repeater Repeater1;
         MySite.DAL.ITTraining ittraining;
  private void Page_Load(object sender, System.EventArgs e)
  {
   if(!Page.IsPostBack)
   {
    repeaterBind();
   }
  }
  private void repeaterBind()
  {
    ittraining=new MySite.DAL.ITTraining();
   Repeater1.DataSource=ittraining.ITCategorySelectAll();
   Repeater1.DataBind();
  }
        
  
  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  ///  设计器支持所需的方法 - 不要使用代码编辑器
  ///  修改此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {
   this.Repeater1.ItemDataBound += new System.Web.UI.WebControls.RepeaterItemEventHandler(this.Repeater1_ItemDataBound);
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

  private void Repeater1_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)
  {
     ittraining=new MySite.DAL.ITTraining();
   if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType==ListItemType.AlternatingItem)
   {
    
     
    DataRowView rowv=(DataRowView)e.Item.DataItem;

    int t_id=Convert.ToInt32(rowv["T_ID"]);

    string str;
    
    str="<div id=div"+t_id.ToString()+" style=\"position:absolute;display:none;\" onmouseover=show1(\""+"div"+t_id.ToString()+"\") onmouseout=hide(\""+"div"+t_id.ToString()+"\")>";
    str=str+"<table class=\"flyoutMenu\" width=\"180\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\" >";
                str=str+"<tr><td><table width=\"175\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
    foreach(DataRowView r in ittraining.SubCategorySelectByID(t_id).Tables[0].DefaultView)
    {
     str=str+" <tr><td class=\"flyoutLink\"><a href=#>"+r["SC_Name"].ToString()+"</a></td></tr>";
    }
    str=str+"</Table></table></div>";

                
    Response.Write(str);

     
   }
    
  }
 }
}
ascx(html):
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="MySite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<table class="flyoutMenu" border=0>
<asp:Repeater id="Repeater1" runat="server">
 <ItemTemplate>
  <tr><td class="flyoutLink" onmouseover=show("div"+<%#DataBinder.Eval(Container.DataItem,"T_ID")%>)  onmouseout=hide("div"+<%#DataBinder.Eval(Container.DataItem,"T_ID")%>)><%#DataBinder.Eval(Container.DataItem,"T_Name")%></td></tr>
  
 </ItemTemplate>
</asp:Repeater>
</table>


index.cs(html)
(用户控件拖到index.aspx)
把代码插入(<head></head>)之间
 <style>.flyoutMenu { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 0px solid; BORDER-LEFT: #999999 0px solid; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #f1f1f1 }
 .flyoutMenu TD.flyoutLink { BORDER-RIGHT: #f1f1f1 1px solid; PADDING-RIGHT: 25px; BORDER-TOP: #f1f1f1 1px solid; PADDING-LEFT: 6px; FONT-SIZE: 70%; PADDING-BOTTOM: 3px; BORDER-LEFT: #f1f1f1 1px solid; CURSOR: hand; PADDING-TOP: 1px; BORDER-BOTTOM: #f1f1f1 1px solid; FONT-FAMILY: Verdana,Arial }
 .flyoutLink A { COLOR: black; TEXT-DECORATION: none }
 .flyoutLink A:hover { COLOR: black; TEXT-DECORATION: none }
 .flyoutLink A:visited { COLOR: black; TEXT-DECORATION: none }
 .flyoutLink A:active { COLOR: black; TEXT-DECORATION: none }
  </style>
  <script>
function over(){
    if(obj=event.srcElement)
        if(obj.className=="flyoutLink"){
            obj.style.backgroundColor='#cccccc'
            obj.style.borderColor = '#999999'
        }
}
function out(){
    if(obj=event.srcElement)
        if(obj.className=="flyoutLink"){
            obj.style.backgroundColor='#f1f1f1'
            obj.style.borderColor = '#f1f1f1'
        }
}

 function getXY(Obj)
    {
        for (var sumTop=0,sumLeft=0,sumRight=0;Obj!=document.body;sumTop+=Obj.offsetTop,sumLeft+=Obj.offsetLeft,sumRight=Obj.clientWidth, Obj=Obj.offsetParent);
        return {left:sumLeft,top:sumTop,right:sumRight}
    }

function show(d){
    if(obj=document.all(d))
     var pos = getXY(event.srcElement);
     obj.style.top=pos.top;
     obj.style.left=pos.right;
     obj.style.display=""
}

function show1(d){
    if(obj=document.all(d))
     obj.style.display=""
}
function hide(d){
    if(obj=document.all(d))
      obj.style.display="none"
}
 

document.onmouseover=over
document.onmouseout=out
  </script>



  <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%> 
     <%@ Control Language="c#" AutoEventWireup="false" Codebehind="left.ascx.cs" Inherits="GoceanSite.Controls.left" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>

你可能感兴趣的:(下拉菜单)