手风琴菜单层级菜单置顶菜单无缝滚动的制作
Posted 小君君的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手风琴菜单层级菜单置顶菜单无缝滚动的制作相关的知识，希望对你有一定的参考价值。
一、手风琴菜单效果图及代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>手风琴效果制作</title> 6 <link rel="stylesheet" href="../css/reset.css"> 7 <style> 8 .con{ 9 width:908px; 10 height:300px; 11 margin:50px auto; 12 overflow: hidden; 13 position:relative; 14 } 15 .con .list_ul{ 16 } 17 .con .list_ul li{ 18 width:805px; 19 height:300px; 20 position:absolute; 21 background:#fff; 22 } 23 .con .list_ul li span{ 24 width:26px; 25 height:296px; 26 text-align: center; 27 color:#fff; 28 padding-top:4px; 29 float:left; 30 cursor: pointer; 31 } 32 .con .list_ul li img{ 33 width:777px; 34 height:300px; 35 float:right; 36 } 37 .con .list_ul li:after{ 38 display: table; 39 clear:both; 40 zoom:1; 41 content: \'\'; 42 } 43 .con .list_ul li:nth-child(1){ 44 left:0; 45 } 46 .con .list_ul li:nth-child(2){ 47 left:801px; 48 } 49 .con .list_ul li:nth-child(3){ 50 left:828px; 51 } 52 .con .list_ul li:nth-child(4){ 53 left:855px; 54 } 55 .con .list_ul li:nth-child(5){ 56 left:882px; 57 } 58 .con .list_ul li:nth-child(1) span{ 59 background: rgba(8, 201, 160, 0.49); 60 } 61 .con .list_ul li:nth-child(2) span{ 62 background: rgba(120, 201, 66, 0.97); 63 } 64 .con .list_ul li:nth-child(3) span{ 65 background: rgb(77, 114, 201); 66 } 67 .con .list_ul li:nth-child(4) span{ 68 background: rgb(255, 179, 18); 69 } 70 .con .list_ul li:nth-child(5) span{ 71 background: rgb(201, 5, 166); 72 } 73 </style> 74 <script src="../js/jquery-1.12.4.min.js"></script> 75 <script> 76 $(function(){ 77 $(".list_li").click(function(){ 78 //左边 79 $(this).animate({left:26*$(this).index()}); 80 //获取该li元素前面的兄弟元素，实现点击中间的部分，它前面的兄弟元素也跟着一起向左移动 81 $(this).prevAll().each(function(){ 82 $(this).animate({left:26*$(this).index()}); 83 }); 84 //右边：获取该li元素后面的兄弟元素，实现点击中间的部分，它后面的兄弟元素也跟着一起向右移动 85 $(this).nextAll().each(function(){ 86 $(this).animate({left:778+26*$(this).index()}); 87 }); 88 }) 89 }) 90 </script> 91 </head> 92 <body> 93 <div class="con"> 94 <ul class="list_ul"> 95 <li class="list_li"> 96 <span>风景图01</span> 97 <img src="../images/li01.png" alt="风景图01"> 98 </li> 99 <li class="list_li"> 100 <span>风景图02</span> 101 <img src="../images/li02.png" alt="风景图02"> 102 </li> 103 <li class="list_li"> 104 <span>风景图03</span> 105 <img src="../images/li03.png" alt="风景图03"> 106 </li> 107 <li class="list_li"> 108 <span>风景图04</span> 109 <img src="../images/li04.png" alt="风景图04"> 110 </li> 111 <li class="list_li"> 112 <span>风景图05</span> 113 <img src="../images/li05.png" alt="风景图05"> 114 </li> 115 </ul> 116 </div> 117 </body> 118 </html>
二、上卷下拉式（层级）菜单效果图和代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用jQuery中的slideToggle制作菜单</title> 6 <link rel="stylesheet" href="../css/reset.css"> 7 <style> 8 .menu{ 9 width:200px; 10 margin:10px auto; 11 } 12 .menu>li{ 13 background: #8731dd; 14 color:#fff; 15 text-indent: 16px; 16 margin-top:-1px; 17 cursor: pointer; 18 } 19 .menu>li>span{ 20 padding:10px 0; 21 display:block; 22 border-bottom: 1px solid #f3f3f3; 23 } 24 .menuactive,.menu>li>span:hover{ 25 background:#c7254e; 26 } 27 .menu > li ul{ 28 display: none; 29 } 30 .menu > li ul li{ 31 text-indent:20px; 32 background: #9a9add; 33 border:1px solid #f3f3f3; 34 margin-top:-1px; 35 padding:6px 0; 36 } 37 .menu >li .active{ 38 display: block; 39 40 } 41 .menu > li ul li:hover{ 42 background:#67C962; 43 } 44 .menu_li ul{ 45 margin-bottom:1px; 46 } 47 </style> 48 <script src="../js/jquery-1.12.4.min.js"></script> 49 <script> 50 $(function () { 51 $(".menu_li>span").click(function(){ 52 $(this).addClass("menuactive").parent().siblings().children("span").removeClass("menuactive"); 53 $(this).next("ul").slideToggle(); 54 $(this).parent().siblings().children("ul").slideUp(); 55 }) 56 }) 57 </script> 58 </head> 59 <body> 60 <ul class="menu" id="menu"> 61 <li class="menu_li"> 62 <span class="menuactive">水果系列</span> 63 <ul class="active"> 64 <li>苹果</li> 65 <li>梨子</li> 66 <li>葡萄</li> 67 <li>火龙果</li> 68 </ul> 69 </li> 70 <li class="menu_li"> 71 <span>海鲜系列</span> 72 <以上是关于手风琴菜单层级菜单置顶菜单无缝滚动的制作的主要内容，如果未能解决你的问题，请参考以下文章