jQuery简易左侧固定菜单

本文介绍了一个简单的三级菜单实现方案,采用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();
	   });
	   
	});	
	});
});
     

       效果如下:(比较简陋,但是基本的原型出来了,后期可以进行美化)

 

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

      本文纯属作为笔记。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值