JS下拉菜单

web前端403009年前 (2011-03-25)

Javascript实现二级菜单的方法代码如下:

<HTML><head>    <meta charset="UTF-8">    <title>导航栏二级菜单-拓源网(TOYEAN.COM)</title><style>*,body { margin:0; padding:0; }body { font-size:14px; font-family:microsoft yahei; }ul,li { list-style:none; }a { text-decoration:none; }.wrap { width:1000px; margin:0 auto; }.header { width:100%; border-bottom:1px solid #eee; }.logo { float:left; font-size:22px; line-height:50px; }.menu { float:right; }.menu li { line-height:50px; display:inline-block; vertical-align:top; position:relative; }.menu li a { padding:0 20px; font-size:18px; color:#333; }.menu li a:hover { color:#f60; }.menu li a.sub:after { content:"∨"; margin:0 0 0 5px; }.menu li dl { min-width:120px; padding:10px 20px; border:1px solid #ccc; background:#fff; position:absolute; top:51px; left:0; display:none; }.menu dl dd { line-height:30px; }.menu dl a { padding:0; font-size:14px; border-bottom:1px solid #eee; display:block; }.menu dl a.nb { border:0; }.menu dl:before { content:""; height:10px; width:10px; background:#fff; border:1px solid #ccc; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); border-left:0; border-bottom:0; position:absolute; top:-6px; left:28px; }.clear { clear:both; }</style><script src="https://code.jQuery.com/jquery-1.8.3.min.js"></script><script>$(Function(){    $(".menu li").each(function(){        if($(this).children("dl").length>0){            $(this).children("a").addClass("sub");        }    });    $(".sub").parent().hover(function(){        $(this).children("dl").toggle();    });    $(".menu dl dd:last-child a").addClass("nb");});</script></head><body><div class="header"><div class="wrap">    <div class="logo">导航二级菜单测试</div>    <div class="menu"><ul>    <li><a href="">首页</a></li>    <li><a href="">关于我们</a></li>    <li>        <a href="">新闻列表</a>        <dl>            <dd><a href="">行业新闻</a></dd>            <dd><a href="">时政新闻</a></dd>            <dd><a href="">国际新闻</a></dd>        </dl>    </li>    <li>        <a href="">产品中心</a>        <dl>            <dd><a href="">产品01</a></dd>            <dd><a href="">产品02</a></dd>            <dd><a href="">产品03</a></dd>            <dd><a href="">产品04</a></dd>            <dd><a href="">产品05</a></dd>        </dl>    </li>    <li><a href="">联系我们</a></li></ul>    </div></div><div class="clear"></div></div></body></html>


发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。