【js实现二级导航菜单】js实现二级导航功能

效果图：

代码如下：

 

 代码如下

 

 

 

 

  a{text-decoration: none;}

  *{margin: 0;padding: 0;box-sizing: border-box;font-family: "微软雅黑";}

  li{list-style-type: none;}

  .box{width: 220px;height: 477px;margin-top: 110px;margin-left: 100px;}

  h3{width: 100%;height: 50px;line-height: 50px;text-align: center;background: #09f;}

  h3 a{color: #FFFFFF;}

  h3 a:hover{color: deeppink;}

  ul li{width: 100%;height: 70px;line-height: 70px;border: 1px solid red;background: #09e;}

  ul li:not(:last-child){border-bottom: none;}

  ul li a{display: block;color:#FFFFFF;text-align: center;font-weight: bold;font-size: 18px;}

  ul li:hover{background: #00E8D7;}

  ul li:hover a{color: orange;}

  ul{position: relative;}

  .content{

  position: absolute;top:0;left: 220px;

  width: 800px;height: 300px;

  border: 1px solid #00FF66;

  display: none;

  }

 

 

 

 

  end():结束当前链条中最近的筛选操作，并将匹配元素还原为之前的匹配状态。

 

 

  

全部菜单

  

  

   一级导航

   

   11111111111111111111111111

   

  

  

   一级导航

   

   22222222222222222222222222

   

  

  

   一级导航

   

   33333333333333333333333333333

   

  

  

   一级导航

   

   44444444444444444444

   

  

  

   一级导航

   

   5555555555555555555555555555

   

  

  

   一级导航

   

   6666666666666666666666666666666666

   

  

  

 

 

<scriptsrc="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

<scripttype="text/javascript">

 $(function(){

 $('ul li').hover(function(){

  $(this).find('.content').show().end().siblings().find('.content').hide();

 },function(){

  $(this).find('.content').hide();

 });

 })

</script>

 

【js实现二级导航菜单】js实现二级导航功能

http://m.bbyears.com/wangyetexiao/127869.html

推荐访问: