Detailed examples of how jQuery implements accordion menu, hierarchical menu, top menu, and seamless scrolling effect

This article mainly introduces the graphic description of the accordion menu, hierarchical menu, top menu, and seamless scrolling menu based on jQuery. The effect display and code implementation of this article are introduced in very detail. Friends who need it can refer to it. I hope it can Help everyone.

1. The accordion menu renderings and code are as follows:

nbsp;html>


 <meta>
 <title>手风琴效果制作</title>
 <link>
 <style>
  .con{
   width:908px;
   height:300px;
   margin:50px auto;
   overflow: hidden;
   position:relative;
  }
  .con .list_ul{
  }
  .con .list_ul li{
   width:805px;
   height:300px;
   position:absolute;
   background:#fff;
  }
  .con .list_ul li span{
   width:26px;
   height:296px;
   text-align: center;
   color:#fff;
   padding-top:4px;
   float:left;
   cursor: pointer;
  }
  .con .list_ul li img{
   width:777px;
   height:300px;
   float:right;
  }
  .con .list_ul li:after{
   display: table;
   clear:both;
   zoom:1;
   content: &#39;&#39;;
  }
  .con .list_ul li:nth-child(1){
   left:0;
  }
  .con .list_ul li:nth-child(2){
   left:801px;
  }
  .con .list_ul li:nth-child(3){
   left:828px;
  }
  .con .list_ul li:nth-child(4){
   left:855px;
  }
  .con .list_ul li:nth-child(5){
   left:882px;
  }
  .con .list_ul li:nth-child(1) span{
   background: rgba(8, 201, 160, 0.49);
  }
  .con .list_ul li:nth-child(2) span{
   background: rgba(120, 201, 66, 0.97);
  }
  .con .list_ul li:nth-child(3) span{
   background: rgb(77, 114, 201);
  }
  .con .list_ul li:nth-child(4) span{
   background: rgb(255, 179, 18);
  }
  .con .list_ul li:nth-child(5) span{
   background: rgb(201, 5, 166);
  }
 </style>
 <script></script>
 <script>
  $(function(){
   $(".list_li").click(function(){
    //左边
    $(this).animate({left:26*$(this).index()});
    //获取该li元素前面的兄弟元素，实现点击中间的部分，它前面的兄弟元素也跟着一起向左移动
    $(this).prevAll().each(function(){
     $(this).animate({left:26*$(this).index()});
    });
    //右边：获取该li元素后面的兄弟元素，实现点击中间的部分，它后面的兄弟元素也跟着一起向右移动
    $(this).nextAll().each(function(){
     $(this).animate({left:778+26*$(this).index()});
    });
   })
  })
 </script>


 <p>
  </p>

   
•     风景图01         
   
•     风景图02         
   
•     风景图03         
   
•     风景图04         
   
•     风景图05         
  

 

2. The scroll-down (level) menu renderings and code are as follows:

nbsp;html>


 <meta>
 <title>用jQuery中的slideToggle制作菜单</title>
 <link>
 <style>
  .menu{
   width:200px;
   margin:10px auto;
  }
  .menu>li{
   background: #8731dd;
   color:#fff;
   text-indent: 16px;
   margin-top:-1px;
   cursor: pointer;
  }
  .menu>li>span{
   padding:10px 0;
   display:block;
   border-bottom: 1px solid #f3f3f3;
  }
  .menuactive,.menu>li>span:hover{
   background:#c7254e;
  }
  .menu > li ul{
   display: none;
  }
  .menu > li ul li{
   text-indent:20px;
   background: #9a9add;
   border:1px solid #f3f3f3;
   margin-top:-1px;
   padding:6px 0;
  }
  .menu >li .active{
   display: block;

  }
  .menu > li ul li:hover{
   background:#67C962;
  }
  .menu_li ul{
   margin-bottom:1px;
  }
 </style>
 <script></script>
 <script>
  $(function () {
   $(".menu_li>span").click(function(){
    $(this).addClass("menuactive").parent().siblings().children("span").removeClass("menuactive");
    $(this).next("ul").slideToggle();
    $(this).parent().siblings().children("ul").slideUp();
   })
  })
 </script>

 
•   水果系列   
     
  • 苹果
     
  • 梨子
     
  • 葡萄
     
  • 火龙果
    
   
 
•   海鲜系列   
     
  • 鱼
     
  • 大虾
     
  • 螃蟹
     
  • 海带
    
   
 
•   果蔬系列   
     
  • 茄子
     
  • 黄瓜
     
  • 豆角
     
  • 西红柿
    
   
 
•   速冻食品   
     
  • 水饺
     
  • 冰淇淋
    
   
 
•   肉质系列   
     
  • 猪肉
     
  • 羊肉
     
  • 牛肉
    
   

3. Sticky menu (when a menu reaches the top of the page, stop there)

 nbsp;html>


 <meta>
 <title>置顶菜单</title>
 <link>
 <style>
  .header{
   width:960px;
   height:200px;
   margin:0 auto;
   background: #ccc;
  }
  .header img{
   width:100%;
   height:200px;
  }
  .ul_list{
   width:960px;
   height:50px;
   margin:0 auto;
   text-align: center;
   display: flex;
   justify-content: space-between;/*实现子元素水平方向上平分*/
   align-items: center;/*使子元素垂直方向上居中*/
   background: #67C962;
  }
  .ul_list li{
   width:160px;
   height:50px;
   line-height: 50px;
   border:1px solid #ccc;
   /*使边框合并*/
   margin-right:-1px;
  }
  .ul_list li a{
   color:#fff;
  }
  .ul_list li:hover{
   background: #c7254e;
  }
  .ul_fixed{
   position: fixed;
   top:0;
  }
  .menu_pos{
   width:960px;
   height:50px;
   margin:0 auto;
   line-height: 50px;
   display: none;
  }
  .con p{
   width:958px;
   height:300px;
   line-height: 300px;
   text-align: center;
   margin:-1px auto 0;
   border: 1px solid #ccc;
  }
  .footer{
   height:300px;
  }
  .top{
   width:38px;
   height:38px;
   border-radius: 35px;
   background: #000;
   color:#fff;
   font-size:13px;
   padding:8px;
   text-align: center;
   position: fixed;
   right:100px;
   bottom:20px;
   display: none;
  }
  .top:hover{
   cursor: pointer;
  }
 </style>
 <script></script>
 <script>
  $(function(){
   var oLeft = ($(document).outerWidth(true)-$(".header").outerWidth())/2;
   var oTop = $(".top");
   $(window).scroll(function(){
    if($(window).scrollTop() >= $(".header").outerHeight()){
     $(".ul_list").addClass("ul_fixed").css({left:oLeft});
     $(".menu_pos").show();
    }else{
     $(".ul_list").removeClass("ul_fixed");
     $(".menu_pos").hide();
    }
    if($(window).scrollTop() >= 150){
     oTop.fadeIn();
     oTop.click(function(){
      //第一种回到顶部的方式
      //$(window).scrollTop(0);
      //第二种回到顶部的方式(常用)
      $("html,body").animate({scrollTop:0});
     })
    }else{
     oTop.fadeOut();
    }
   });
  })
 </script>


 <p>
  <img  src="/static/imghwm/default1.png" data-src="../images/li02.png" class="lazy" alt="Detailed examples of how jQuery implements accordion menu, hierarchical menu, top menu, and seamless scrolling effect" >
 </p>
 

  
• 首页
  
• 新闻动态
  
• 产品展示
  
• 案例分析
  
• 关注我们
  
• 联系我们
 

 

 

  

网站主内容一

  

网站主内容二

  

网站主内容三一

   

 

回到顶部

4. None The seam scrolling effect diagram and code are as follows:

nbsp;html>


 <meta>
 <title>无缝滚动</title>
 <link>
 <style>
  .con{
   width:662px;
   margin:50px auto;
  }
  .con button{
   width:100px;
   height:36px;
   line-height: 36px;
   text-align: center;
   border: none;
   margin-left:20px;
  }
  .box{
   width:655px;
   height:135px;
   margin:20px auto;
   border:1px solid #ccc;
   padding-left:10px;
   padding-bottom:10px;
   position: relative;
   overflow: hidden;
  }
  .ul_list{
   display: flex;
   position: absolute;
   left:0;
   top:0;
   padding: 10px;
  }
  .ul_list li{
   width:120px;
   height:120px;
   border:1px solid #ccc;
   margin-left:-1px;
   margin-right:10px;
   /*margin-top:10px;*/
  }
  .ul_list li img{
   width:100%;
   height:100px;
   line-height: 100px;
  }
 </style>
 <script></script>
 <script>
  $(function(){
   var oUl = $(".ul_list");
   var oLeft = $(".left");
   var oRight = $(".right");
   var left = 0;
   var delay = 2;
   oUl.html(oUl.html()+oUl.html());
   function move(){
    left-=delay;
    if(left<-667){
     left = 0;
    }
    if(left>0){
     left = -667;
    }
    oUl.css({left:left});
   }
   var timer =setInterval(move,30);
   oLeft.click(function(){
    delay =2;
   });
   oRight.click(function(){
    delay = -2;
   });
   oUl.children().each(function(){
    oUl.eq($(this).index()).mouseover(function(){
     clearInterval(timer);
    });
    oUl.eq($(this).index()).mouseout(function(){
     timer= setInterval(function(){
      left-=delay;
      if(left<-667){
       left = 0;
      }
      if(left>0){
       left = -667;
      }
      oUl.css({left:left});
     },30);
    })
   })
  })
 </script>


<p>
 <button>向左</button>
 <button>向右</button>
 </p><p>
  </p>

   
• 
   
• 
   
• 
   
• 
   
• 
  

 

The knowledge points involved in the above menu are as follows:

4. jQuery

1. slideDown() shows downwards

2, slideUp() rolls up

3, slideToggle() in sequence Expand or roll up an element

5. jQuery chain call

The method of jquery object returns this jquery object after execution. All jQuery The methods of the object can be written together:

$("#p1").chlidren("ul").slideDown("fast").parent().siblings().chlidren("ul").slideUp("fase")

$("#p1").//The element with id bit p1

.chlidren("ul") //The ul under this element Child element

.slideDown("fast") //The height is from zero to the actual height to display the ul element

.parent() //Jump to the parent element of ul, which is the id For the element of p1

.siblings() //Jump to all sibling elements at the same level of the p1 element

.chlidren("ul") //Find the ul sub-elements in these sibling elements

.slideUp("fase") //Convert from the actual height to zero to hide the ul element

Related recommendations:

jquery implementation of drop-down menu Accordion effect sharing

Example sharing jquery to achieve multi-level menu effect

jQuery menu select all, invert selection, cancel example analysis

The above is the detailed content of Detailed examples of how jQuery implements accordion menu, hierarchical menu, top menu, and seamless scrolling effect. For more information, please follow other related articles on the PHP Chinese website!