一、手風琴菜單效果圖及代碼如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>手風琴效果製作</title> 6 <link rel="stylesheet" href="../css ...
一、手風琴菜單效果圖及代碼如下：
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 <ul> 73 <li>魚</li> 74 <li>大蝦</li> 75 <li>螃蟹</li> 76 <li>海帶</li> 77 </ul> 78 </li> 79 <li class="menu_li"> 80 <span>果蔬系列</span> 81 <ul> 82 <li>茄子</li> 83 <li>黃瓜</li> 84 <li>豆角</li> 85 <li>西紅柿</li> 86 </ul> 87 </li> 88 <li class="menu_li"> 89 <span>速凍食品</span> 90 <ul> 91 <li>水餃</li> 92 <li>冰淇淋</li> 93 </ul> 94 </li> 95 <li class="menu_li"> 96 <span>肉質系列</span> 97 <ul> 98 <li>豬肉</li> 99 <li>羊肉</li> 100 <li>牛肉</li> 101 </ul> 102 </li> 103 </ul> 104 </body> 105 </html>層級菜單
三、置頂菜單（當一個菜單到達頁面頂部時，停在那）
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 .header{ 9 width:960px; 10 height:200px; 11 margin:0 auto; 12 background: #ccc; 13 } 14 .header img{ 15 width:100%; 16 height:200px; 17 } 18 .ul_list{ 19 width:960px; 20 height:50px; 21 margin:0 auto; 22 text-align: center; 23 display: flex; 24 justify-content: space-between;/*實現子元素水平方向上平分*/ 25 align-items:
