jQuery简易左侧固定菜单

     最近做一个电商的站，有一个页面需要显示一个三级菜单，根据客户需求，最好是把菜单固定在顶部导航栏左侧，当鼠标悬浮上面时，才显示一级菜单，当鼠标悬浮一级菜单时，显示二级菜单。大概的需求跟京东的左侧菜单类似。

     网上有很多的例子，而且做的很精美。但是很多例子往往引用了很多插件，我只要一个菜单，可不想引用N多的文件。

   大概要的效果如下图所示：

    


     为了方便而且不引用那么多的文件，觉得自己写一个简单的菜单。

      html代码：

      

<div class="menu">
<div style="text-align:center;" id="goodsMenu">商品目录</div>
<div class="menuList">
一级
<div class="subMenu">
<dl class="secondMenu">
<dt>a二级sss|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
<dl class="secondMenu">
<dt>a二级|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
<dl class="secondMenu">
<dt>a二级三三四四|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span>&l
4000
t;span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
<dl class="secondMenu">
<dt>a二级嗖嗖嗖|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
</div>
</div>
<div class="menuList">一级
<div class="subMenu">
<dl class="secondMenu">
<dt>b二级sss|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
<dl class="secondMenu">
<dt>b二级|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
<dl class="secondMenu">
<dt>b二级三三四四|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
<dl class="secondMenu">
<dt>b二级嗖嗖嗖|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
</div>
</div>
<div class="menuList">一级
<div class="subMenu">
<dl class="secondMenu">
<dt>b二级sss|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
<dl class="secondMenu">
<dt>b二级|</dt>
<dd><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span><span>三级</span></dd>
</dl>
</div>
</div>
<div class="menuList">一级</div>
<div class="menuList">一级 </div>
<div class="menuList">一级</div>
<div class="menuList">一级 </div>
</div>
</body>

      

    CSS代码：

.menu{
width:200px;
border:1px solid red;
margin:50px 200px;
}
.menu .menuList{
border:1px solid red;
text-align:center;
position:relative;
height:30px;
line-height:30px;
display:none;
}
.subMenu{
position:absolute;
border:1px solid black;
left:198px;
width:500px;
display:none;
}
.secondMenu{
border:1px solid blue;
position:relative;
margin:0;
}
.secondMenu dt{
float:left;
margin-right:10px;
}
.secondMenu dd{
text-align:left;
}
.secondMenu dd span{
margin-left:10px;
display:inline-block;
}

     jQuery代码：

$(document).ready(function(){

//固定二层菜单显示的位置,计算top的值
$(".menuList").each(function(index){
var firstMenuH = $(".menuList").eq(0).outerHeight();
$(this).find(".subMenu").
css({"top":-(index*firstMenuH+index*2+1)});

$("#goodsMenu").bind("mouseover",function(){
$(".menuList").show();
});

$("#goodsMenu").bind("mouseout a",function(){
$(".menuList").hide();
});

$(".menuList").each(function(index){
$(this).bind("mouseover",function(){
$(".menuList").show();
$("#goodsMenu").unbind("a");

$(this).find(".subMenu").show();

});

$(this).bind("mouseout",function(){
$(".menuList").hide();
$(this).find(".subMenu").hide();
});

});
});
});

     

       效果如下：（比较简陋，但是基本的原型出来了，后期可以进行美化）

 


      我引用的是jquery1.7,这个效果可以兼容到IE7，而且代码量很少，基本满足使用的需要。

      本文纯属作为笔记。