jQuery简易左侧固定菜单_jquery自定义左键菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/PigBiBiX/article/details/76184874

本文介绍了一个简单的三级菜单实现方案，采用HTML、CSS和jQuery技术，兼容IE7及以上浏览器，适用于电商平台顶部导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

网上有很多的例子，而且做的很精美。但是很多例子往往引用了很多插件，我只要一个菜单，可不想引用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><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();
	   });
	   
	});	
	});
});

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