JS下拉菜单

web前端 4376 11年前 (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>


分享给朋友: