首页 > 代码库 > 【锋利的JQuery-学习笔记】菜单栏及其2级菜单
【锋利的JQuery-学习笔记】菜单栏及其2级菜单
效果图：
鼠标移动到菜单项后如下：
html：
<div id="nav" class="mainNav"> <ul class="nav"> <li><a href="#">首 页</a></li> <li><a href="#">品 牌</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt> <a href="#nogo">品牌：</a> </dt> <dd> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em ><a href="#nogo">安踏</a></em> <em ><a href="#nogo">奥康</a></em> <em ><a href="#nogo">骆驼</a></em> <em ><a href="#nogo">特步</a></em> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em class="noborder"><a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt> <a href="#nogo">品牌：</a> </dt> <dd> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em ><a href="#nogo">安踏</a></em> <em ><a href="#nogo">奥康</a></em> <em ><a href="#nogo">骆驼</a></em> <em ><a href="#nogo">特步</a></em> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em class="noborder"><a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">女 装</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt> <a href="#nogo">女 装：</a> </dt> <dd> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em ><a href="#nogo">安踏</a></em> <em ><a href="#nogo">奥康</a></em> <em ><a href="#nogo">骆驼</a></em> <em ><a href="#nogo">特步</a></em> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em class="noborder"><a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt> <a href="#nogo">女 装：</a> </dt> <dd> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em ><a href="#nogo">安踏</a></em> <em ><a href="#nogo">奥康</a></em> <em ><a href="#nogo">骆驼</a></em> <em ><a href="#nogo">特步</a></em> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em class="noborder"><a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">男 装</a> <div class="jnNav"> <div class="subitem"> <dl class="fore"> <dt> <a href="#nogo">男 装：</a> </dt> <dd> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em ><a href="#nogo">安踏</a></em> <em ><a href="#nogo">奥康</a></em> <em ><a href="#nogo">骆驼</a></em> <em ><a href="#nogo">特步</a></em> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em class="noborder"><a href="#nogo">特步</a></em> </dd> </dl> <dl> <dt> <a href="#nogo">男 装：</a> </dt> <dd> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em ><a href="#nogo">安踏</a></em> <em ><a href="#nogo">奥康</a></em> <em ><a href="#nogo">骆驼</a></em> <em ><a href="#nogo">特步</a></em> <em ><a href="#nogo">耐克</a></em> <em ><a href="#nogo">阿迪达斯</a></em> <em ><a href="#nogo">达芙妮</a></em> <em ><a href="#nogo">李宁</a></em> <em class="noborder"><a href="#nogo">特步</a></em> </dd> </dl> </div> </div> </li> <li><a href="#">鞋包配饰</a></li> </ul> </div>
css：
/*导航样式开始*/ .mainNav { position: absolute; top: 68px; left: 0; height: 37px; line-height: 37px; width: 990px; z-index:100; background-color: #4A4A4A; } .mainNav .nav { display: inline; float: left; margin-left: 25px; } .mainNav ul li { float:left; display: inline; margin-right:14px; position: relative ; z-index:100; } .mainNav ul li a { display:block; padding:0 8px; font-weight:700; color:#fff; font-size:14px; } .mainNav ul li a:hover { background:none; } /* 二级菜单 */ .jnNav { background:#FFFFFF; border: 1px solid #B1B1B1; border-top:0; left: 0; overflow: hidden; position: absolute; top: 37px; width: 474px; z-index: 1000; display:none; } .jnNav .subitem { float: left; height: auto !important; min-height: 100px; padding: 10px 12px; width: 450px; } .jnNav .subitem dl { border-top: 1px dashed #C4C4C4; overflow: hidden; padding: 8px 0; float:left; } .jnNav .subitem .fore { border-top-style: none; padding-top: 0; } .jnNav .subitem dt { float: left; font-weight: bold; line-height: 16px; padding: 4px 3px; text-align: center; width: 76px; } .jnNav .subitem dt a { color: #000; font-weight: 700; font-size:12px; padding:0; } .jnNav .subitem dd { float: left; overflow: hidden; padding: 0; width: 364px; } .jnNav .subitem em { border-right: 1px solid #CCCCCC; float: left; font-style: normal; height: 14px; line-height: 14px; margin: 5px 0; padding: 0 8px; } .jnNav .subitem em a { color: #666666; white-space: nowrap; font-size:12px; font-weight:normal; padding:0; } .jnNav .subitem em.noborder { border-right: 0 none; }
js：
//导航效果 $(function(){ $("#nav li").hover(function(){ $(this).find(".jnNav").show(); },function(){ $(this).find(".jnNav").hide(); }); })
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。