简单的二级菜单

当前位置 : 首页 > 网页制作 > CSS > 简单的二级菜单

简单的二级菜单

来源: 作者: 时间:2016-01-29 09:12
[html]%@ Page Language=C# AutoEventWireup=true CodeBehind=daohang.aspx.cs Inherits=_0A_ANXIN.daohang %!DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlhead runat=serv...
[html]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="daohang.aspx.cs" Inherits="_0A_ANXIN.daohang" %> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title></title> 
    <script src="js/Jquery1.7.js"></script> 
    <script type="text/javascript"> 
        $(function () { 
            //*******************一级菜单点击****************** 
            var yijicaidan;//上一次点击的元素 
            $('.div_ul_li').click(function () { 
                $(this).css({ 'background-color': '#555' }); 
                $(this).unbind('mouseover').unbind('mouseout');//给点击的元素解绑,不再随着鼠标的变化而变化 
                $(this).parent().children('div:last').css('display', $(this).parent().children('div:last').css('display') == 'none' ? 'initial' : 'none'); 
                if (yijicaidan != null && yijicaidan.text() != $(this).text()) {//判断是不是同一个元素 
                    yijicaidan.css({ 'background-color': '#eee' });//初始化上一次点击的div的背景颜色 
                    yijicaidan.parent().children('div:last').css('display', 'none');//隐藏上一次点击的元素的二级菜单 
                    yijicaidan.bind('mouseover', function () { 
                        $(this).css({ 'background-color': '#aaa' }); 
                    })//给上一次点击的元素帮顶mouseover事件 
                    yijicaidan.bind('mouseout', function () { 
                        $(this).css({ 'background-color': '#eee' }); 
                    })//给上一次点击的元素帮顶mouseout事件 
                    yijicaidan = null; 
                } 
                yijicaidan = $(this); 
            }) 
            //*******************一级效果*********************** 
            $('.div_ul_li').bind('mouseover', function () { 
                $(this).css({'background-color':'#aaa'}); 
            }) 
            $('.div_ul_li').bind('mouseout', function () { 
                $(this).css({ 'background-color': '#eee' }); 
            }) 
 
 
            var erjicaidan;////上一次点击的元素 
            //********************二级菜单点击********************* 
            $('.div_ul_li_div ul li').click(function () { 
                if (erjicaidan!=null) { 
                    erjicaidan.css({ 'background-color': '#def' });//初始化所有的二级菜单背景 
                } 
                window.open($(this).children('input').val(), "content"); 
                $(this).css({ 'background-color': '#789' }).unbind('mouseover').unbind('mouseout'); 
                if (erjicaidan != null && erjicaidan.text() != $(this).text()) {//判断是不是同一个元素 
                    erjicaidan.css({ 'background-color': '#def' });//初始化上一次点击的div的背景颜色 
                    erjicaidan.bind('mouseover', function () { 
                        $(this).css({ 'background-color': '#abc' }); 
                    })//给上一次点击的元素帮顶mouseover事件 
                    erjicaidan.bind('mouseout', function () { 
                        $(this).css({ 'background-color': '#def' }); 
                    })//给上一次点击的元素帮顶mouseout事件 
                    erjicaidan = null; 
                } 
                erjicaidan = $(this); 
            }) 
            //*******************二级效果*********************** 
            $('.div_ul_li_div ul li').bind('mouseover', function () { 
                $(this).css({ 'background-color': '#abc' }); 
            }) 
            $('.div_ul_li_div ul li').bind('mouseout', function () { 
                $(this).css({ 'background-color': '#def' }); 
            }) 
        }) 
    </script> 
    <style type="text/css"> 
        /***********第一级菜单***********/ 
        #div_ul { 
            list-style-type: none; 
        } 
        .div_ul_li { 
            cursor: pointer; 
            background-color: #eee; 
            padding: 5px 0 5px 5px; 
            margin-left: -40px; 
            font-size:15px; 
        } 
        /***********第二级菜单***********/ 
        .div_ul_li_div ul { 
            list-style-type: none; 
        } 
            .div_ul_li_div ul li { 
                cursor: pointer; 
                margin-left:-80px; 
                padding:5px 0 5px 15px; 
                background-color:#def; 
                font-size:12px; 
            } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <ul id="div_ul" runat="server"> 
        <li> 
            <div class="div_ul_li"> 
                我的工作 
            </div> 
            <div class="div_ul_li_div" style="display:none;"> 
                <ul> 
                    <li> 
                        我的消息<input type="hidden" value="http://www.baidu.com"> 
                    </li> 
                    <li> 
                        我的邮件<input type="hidden" value="http://www.baidu.com"> 
                    </li> 
                    <li> 
                        我的短信<input type="hidden" value="http://www.baidu.com"> 
                    </li> 
                </ul> 
            </div> 
        </li> 
        <li> 
            <div class="div_ul_li"> 
                计划/考勤 
            </div> 
            <div class="div_ul_li_div" style="display:none;"> 
                <ul> 
                    <li> 
                        aaa<input type="hidden" value="http://www.baidu.com"> 
                    </li> 
 
                </ul> 
            </div> 
        </li> 
        <li> 
            <div class="div_ul_li"> 
                公文处理 
            </div> 
            <div class="div_ul_li_div" style="display:none;"> 
                <ul> 
                    <li> 
                        aaa<input type="hidden" value="http://www.baidu.com"> 
                    </li> 
                </ul> 
            </div> 
        </li> 
        <li> 
            <div class="div_ul_li"> 
                资源/会议 
            </div> 
            <div class="div_ul_li_div" style="display:none;"> 
                <ul> 
                    <li> 
                        aaa<input type="hidden" value="http://www.baidu.com"> 
                    </li> 
                </ul> 
            </div> 
        </li> 
        <li> 
            <div class="div_ul_li"> 
                车辆/司机 
            </div> 
            <div class="div_ul_li_div" style="display:none;"> 
                <ul> 
                    <li> 
                        aaa<input type="hidden" value="http://www.baidu.com"> 
                    </li> 
                </ul> 
            </div> 
        </li> 
    </ul> 
    </div> 
    </form> 
</body> 
</html> 
 
这里前台的内容只是例子,实际要显示的内容是从后台读取的。下面有后台和数据库的截图 
 
后台: 
 
protected void Page_Load(object sender, EventArgs e) 
        { 
            GetReader(); 
        } 
        void GetReader() 
        { 
            div_ul.InnerHtml = ""; 
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["str"].ConnectionString); 
            SqlCommand cmd = new SqlCommand(); 
            cmd.Connection = con; 
            cmd.CommandText = "Pro_select_guilei"; 
            cmd.CommandType = System.Data.CommandType.StoredProcedure; 
            SqlDataAdapter adapter = new SqlDataAdapter(cmd); 
            DataTable dt = new DataTable(); 
            adapter.Fill(dt); 
            StringBuilder strs = new StringBuilder(); 
            foreach (DataRow item in dt.Rows) 
            { 
                strs.Append("<li><div class=\"div_ul_li\">"+item["name"]+"</div><div class=\"div_ul_li_div\" style=\"display:none;\"><ul>"); 
                cmd.CommandText = "Pro_select_caidan"; 
                cmd.CommandType = CommandType.StoredProcedure; 
                cmd.Parameters.Clear(); 
                cmd.Parameters.Add(new SqlParameter("@fatherid", item["contentid"])); 
                adapter.SelectCommand = cmd; 
                DataTable dtd = new DataTable(); 
                adapter.Fill(dtd); 
                foreach (DataRow item1 in dtd.Rows) 
                { 
                    strs.Append("<li>"+item1["name"]+"<input type='hidden' value='"+item1["url"]+"' /></li>"); 
                } 
                strs.Append("</ul></div></li>"); 
            } 
            adapter.Dispose(); 
            cmd.Dispose(); 
            con.Dispose(); 
            div_ul.InnerHtml = strs.ToString(); 
        } 
Tag:
网友评论

<