一、手风琴菜单效果图及代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴效果制作</title> <link href="https://www.jb51.net/css/reset.css"> <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: ''; } .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 src="https://www.jb51.net/js/jquery-1.12.4.min.js"></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> </head> <body> <div> <ul> <li> <span>风景图01</span> <img src="https://www.jb51.net/images/li01.png" alt="风景图01"> </li> <li> <span>风景图02</span> <img src="https://www.jb51.net/images/li02.png" alt="风景图02"> </li> <li> <span>风景图03</span> <img src="https://www.jb51.net/images/li03.png" alt="风景图03"> </li> <li> <span>风景图04</span> <img src="https://www.jb51.net/images/li04.png" alt="风景图04"> </li> <li> <span>风景图05</span> <img src="https://www.jb51.net/images/li05.png" alt="风景图05"> </li> </ul> </div> </body> </html>
二、上卷下拉式（层级）菜单效果图和代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用jQuery中的slideToggle制作菜单</title> <link href="https://www.jb51.net/css/reset.css"> <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 src="https://www.jb51.net/js/jquery-1.12.4.min.js"></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> </head> <body> <ul> <li> <span>水果系列</span> <ul> <li>苹果</li> <li>梨子</li> <li>葡萄</li> <li>火龙果</li> </ul> </li> <li> <span>海鲜系列</span> <ul> <li>鱼</li> <li>大虾</li> <li>螃蟹</li> <li>海带</li> </ul> </li> <li> <span>果蔬系列</span> <ul> <li>茄子</li> <li>黄瓜</li> <li>豆角</li> <li>西红柿</li> </ul> </li> <li> <span>速冻食品</span> <ul> <li>水饺</li> <li>冰淇淋</li> </ul> </li> <li> <span>肉质系列</span> <ul> <li>猪肉</li> <li>羊肉</li> <li>牛肉</li> </ul> </li> </ul> </body> </html>
三、置顶菜单（当一个菜单到达页面顶部时，停在那）
