自已写的动态二层web菜单

一、数据库为:menu(menuId<pk>、menuName、parentMenuId、pageUrl、remark);
二、左侧菜单:
    1、leftmenu.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="LeftMenu.ascx.cs"     Inherits="LeftMenu" %>
<link href="css/leftmenu.css" type="text/css" rel="stylesheet" />
<script src="js/leftmenu.js" type="text/javascript"></script>
<div id="divContain" runat="server" style="width:100px; vertical-align:top; display:block;">
</div>
    2、leftmenu.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Common;
using BL;
using System.Text;

public partial class LeftMenu : System.Web.UI.UserControl
{
    private string _target="_top";//导航栏的目标
    public string Target
    {
        get { return _target; }
        set { _target = value; }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder menuString = new StringBuilder();
        MenuBL menuBl = new MenuBL();
        //获取根结点，即父结点为0的结点
        List<MenuEntity> menus = menuBl.QueryMenu(0);
        //动态加载父菜单
        foreach (MenuEntity menu in menus)
        {
            menuString.Append("<div id='menu");
            menuString.Append(menu.MenuId);
            menuString.Append("' class='parentMenu' οnmοuseοver='parentMenuOver(menu");
            menuString.Append(menu.MenuId);
            menuString.Append(")' οnmοuseοut='parentMenuOut(menu");
            menuString.Append(menu.MenuId);
            menuString.Append(")' onClick='parentMenuClick(menu");
            menuString.Append(menu.MenuId);
            menuString.Append(")'>");
            menuString.Append(menu.MenuName);
            menuString.Append("</div>");

           
            //加载子菜单
            List<MenuEntity> sonMenus = menuBl.QueryMenu(menu.MenuId);
            if (sonMenus.Count > 0)
            {
                menuString.Append("<div id='sonmenu" + menu.MenuId + "' class='sonMenu'>");
                menuString.Append("<ul>");
                foreach (MenuEntity sonMenu in sonMenus)
                {
                    menuString.Append("<li id='li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append("' οnmοuseοver='liOver(li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append(")' οnmοuseοut='liOut(li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append(")' οnclick=\"liClick('");
                    menuString.Append(sonMenu.PageUrl);
                    menuString.Append("','");
                    menuString.Append(Target);
                    menuString.Append("')\">");                   
                    //menuString.Append("<a href='");
                    //menuString.Append(sonMenu.PageUrl);
                    //menuString.Append("' id='");
                    //menuString.Append(sonMenu.MenuId);
                    //menuString.Append("' target='");
                    //menuString.Append(Target);
                    //menuString.Append("'>");
                    menuString.Append(sonMenu.MenuName);
                    //menuString.Append("</a>");
                    menuString.Append("</li>");

                }
                menuString.Append("</ul></div>");
            }
        }

        this.divContain.InnerHtml = menuString.ToString();
    }
}
    3、leftmenu.css
    

.parentMenu
{
  background-color:#CCCCCC;
  cursor:hand;
  width:100px;
}
.parentMenuOver
{
    background-color:#999999;
    cursor:hand;
}
.parentMenuOut
{
 background-color:#CCCCCC;
 cursor:hand;
}
.sonMenu
{
 background-color:#CCCCCC;
 display:none;
}
.sonMenuSel
{ 
 background-color:#999999;
}
.view
{
 display:block;
}
.hidden
{
 display:none;
}
ul
{
 margin:0px 0px 0px 0px;
}
li
{
 list-style-type:none;
 width:100px;
 cursor:hand;
}
div
{
 margin:0px 0px 0px 0px;
 padding:0px 0px  0px 0px;
}
.liOver
{
 background-color:#E8E8E8;
}
.liOut
{
 background-color:#F7F7F7;
}
a
{
 width:100px;
}

    4、leftmenu.js
    

//当点击父菜单时调用的函数
function parentMenuClick(menuId)
{  
    if(document.getElementById("son"+menuId.id).className=="view")
    {
     document.getElementById("son"+menuId.id).className="hidden";
 }
 else
 {
     document.getElementById("son"+menuId.id).className="view";
 }
}
//移动到父菜单时调用
function parentMenuOver(menuId)
{
    document.getElementById(menuId.id).className="parentMenuOver";
}
//移出父菜单时调用
function parentMenuOut(menuId)
{
    document.getElementById(menuId.id).className="parentMenuOut";
}
移动到子菜单时调用
//function sonMenuOver(sonMenuId)
//{
//    document.getElementById(sonMenuId.id).className="view";
//}
移出子菜单时调用
//function sonMenuOut(sonMenuId)
//{
//    document.getElementById(sonMenuId.id).className="hidden";
//}

//移动到子菜单项时调用
function liOver(liId)
{
    document.getElementById(liId.id).className="liOver";
}
//移出子菜单项时调用
function liOut(liId)
{
    document.getElementById(liId.id).className="liOut";
}
//点击子菜单时调用
function liClick(pageUrl,target)
{
    target.location.href=pageUrl;
}

三、顶部菜单
    1、topmenu.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TopMenu.ascx.cs" Inherits="TopMenu" %>
<link href="css/topmenu.css" type="text/css" rel="stylesheet" />
<script src="js/topmenu.js" type="text/javascript"></script>
<div id="divContain_top" runat="server" style="width:100px; vertical-align:top; display:block;">
</div>
    2、topmenu.ascx.cs
    

using System;
using System.Data;
using System.Configuration;
using System.Collections.Generic;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Common;
using BL;
using System.Text;

public partial class TopMenu : System.Web.UI.UserControl
{
    private string _target = "_top";//导航栏的目标
    public string Target
    {
        get { return _target; }
        set { _target = value; }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        StringBuilder menuString = new StringBuilder();
        StringBuilder jsArray = new StringBuilder();
        jsArray.Append("<script type='text/javascript'>");
        jsArray.Append("var parentArray=new Array();");
        MenuBL menuBl = new MenuBL();
        //获取根结点，即父结点为0的结点
        List<MenuEntity> menus = menuBl.QueryMenu(0);
        menuString.Append("<table id='menu'><tr>");
        //动态加载父菜单
        int count = 0;
        foreach (MenuEntity menu in menus)
        {
           
            menuString.Append("<td id='menu");
            menuString.Append(menu.MenuId);
            menuString.Append("_top' class='parentMenu_top' οnmοuseοver='parentMenuOver_top(menu");
            menuString.Append(menu.MenuId);
            menuString.Append("_top)' οnmοuseοut='parentMenuOut_top(menu");
            menuString.Append(menu.MenuId);
            menuString.Append("_top)'>");
            menuString.Append(menu.MenuName);
            menuString.Append("</td>");
           
            jsArray.Append("parentArray[");
            jsArray.Append(count);
            jsArray.Append("]='sonmenu");
            jsArray.Append(menu.MenuId);
            jsArray.Append("_top';");
          
            count++;
        }
        menuString.Append("</tr></table>");

        //加载子菜单
        foreach (MenuEntity menu in menus)
        {
            List<MenuEntity> sonMenus = menuBl.QueryMenu(menu.MenuId);
            if (sonMenus.Count > 0)
            {
                menuString.Append("<div id='sonmenu" + menu.MenuId + "_top' class='sonMenu_top'");
                menuString.Append("style=' z-index:1;position:absolute;'");
                menuString.Append(">");
                menuString.Append("<ul>");
                foreach (MenuEntity sonMenu in sonMenus)
                {
                    menuString.Append("<li  id='li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append("_top'  class='li_top' οnmοuseοver='liOver_top(li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append("_top)' οnmοuseοut='liOut_top(li");
                    menuString.Append(sonMenu.MenuId);
                    menuString.Append("_top)' οnclick=\"liClick_top('");
                    menuString.Append(sonMenu.PageUrl);
                    menuString.Append("','");
                    menuString.Append(Target);
                    menuString.Append("')\">");
                    menuString.Append(sonMenu.MenuName);
                    menuString.Append("</li>");

                }
                menuString.Append("</ul></div>");
            }
        }
        jsArray.Append("</script>");

        menuString.Append(jsArray.ToString());
        this.divContain_top.InnerHtml = menuString.ToString();
    }
}

    3、css
    .parentMenu_top
{
  background-color:#CCCCCC;
  cursor:hand;
  width:100px;
}
.parentMenuOver_top
{
    background-color:#999999;
    cursor:hand;
}
.parentMenuOut_top
{
 background-color:#CCCCCC;
}
.sonMenu_top
{
 display:none;
}
.li_top
{
 background-color:#E8E8E8;
}
.sonMenuSel_top
{ 
 background-color:#999999;
}
.view_top
{
   display:inline-block;
}
.hidden_top
{
  display:none;
}
.liOver_top
{
 background-color:#E8E8E8;
}
.liOut_top
{
 background-color:#F7F7F7;
}
li
{
 height:20px;
 width:100px;
}
    4、topmenu.js
    

//当点击父菜单时调用的函数
function parentMenuClick_top(menuId)
{
     var len=parentArray.length;   
    for( i=0;i<len;i++)
    {
        document.getElementById(parentArray[i]).className="hidden_top";
    }
    document.getElementById("son"+menuId.id).className="view_top";
}
//移动到父菜单时调用
function parentMenuOver_top(menuId)
{
    document.getElementById(menuId.id).className="parentMenuOver";
    parentMenuClick_top(menuId);
}
//移出父菜单时调用
function parentMenuOut_top(menuId)
{
    document.getElementById(menuId.id).className="parentMenuOut";
}

//移动到子菜单项时调用
function liOver_top(liId)
{
    document.getElementById(liId.id).className="liOver";
   
}
//移出子菜单项时调用
function liOut_top(liId)
{
    document.getElementById(liId.id).className="liOut";
}
//点击子菜单时调用
function liClick_top(pageUrl,target)
{
    if(target!="_top"&&target!="_self"&&target!="_parent"&&target!="_blank")
    {
        eval(target).location.href=pageUrl;
    }
}
//控件的加载事件,用于子菜单的位置
function load()
{
    var len=parentArray.length;   
    for( i=0;i<len;i++)
    {
        var left=0;
        var top=0;
        //获取父菜单的位置
        var obj=document.getElementById(parentArray[i].substring(3,parentArray[i].length));
        left+=obj.offsetLeft;
        top+=obj.offsetTop;
        while(obj = obj.offsetParent){
             left += obj.offsetLeft;
             top +=obj.offsetTop;
        }
        document.getElementById(parentArray[i]).style.left=left;
        document.getElementById(parentArray[i]).style.top=top+20;
    }
}
//自动加载
window.οnlοad=load;

 

转载于:https://www.cnblogs.com/sangrei/archive/2007/12/10/988783.html