手风琴菜单、层级菜单、置顶菜单、无缝滚动的制作

时间：2017-07-20 00:56:39 阅读：209 评论：0 收藏：0 [点我收藏+]

标签：slide link dex 链式 func ann 元素变换 charset

一、手风琴菜单效果图及代码如下：

技术分享

  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: center;/*使子元素垂直方向上居中*/
 26             background: #67C962;
 27         }
 28         .ul_list li{
 29             width:160px;
 30             height:50px;
 31             line-height: 50px;
 32             border:1px solid #ccc;
 33             /*使边框合并*/
 34             margin-right:-1px;
 35         }
 36         .ul_list li a{
 37             color:#fff;
 38         }
 39         .ul_list li:hover{
 40             background: #c7254e;
 41         }
 42         .ul_fixed{
 43             position: fixed;
 44             top:0;
 45         }
 46         .menu_pos{
 47             width:960px;
 48             height:50px;
 49             margin:0 auto;
 50             line-height: 50px;
 51             display: none;
 52         }
 53         .con div{
 54             width:958px;
 55             height:300px;
 56             line-height: 300px;
 57             text-align: center;
 58             margin:-1px auto 0;
 59             border: 1px solid #ccc;
 60         }
 61         .footer{
 62             height:300px;
 63         }
 64         .top{
 65             width:38px;
 66             height:38px;
 67             border-radius: 35px;
 68             background: #000;
 69             color:#fff;
 70             font-size:13px;
 71             padding:8px;
 72             text-align: center;
 73             position: fixed;
 74             right:100px;
 75             bottom:20px;
 76             display: none;
 77         }
 78         .top:hover{
 79             cursor: pointer;
 80         }
 81     </style>
 82     <script src="../js/jquery-1.12.4.min.js"></script>
 83     <script>
 84         $(function(){
 85             var oLeft = ($(document).outerWidth(true)-$(".header").outerWidth())/2;
 86             var oTop = $(".top");
 87             $(window).scroll(function(){
 88                 if($(window).scrollTop() >= $(".header").outerHeight()){
 89                     $(".ul_list").addClass("ul_fixed").css({left:oLeft});
 90                     $(".menu_pos").show();
 91                 }else{
 92                     $(".ul_list").removeClass("ul_fixed");
 93                     $(".menu_pos").hide();
 94                 }
 95                 if($(window).scrollTop() >= 150){
 96                     oTop.fadeIn();
 97                     oTop.click(function(){
 98                         //第一种回到顶部的方式
 99                         //$(window).scrollTop(0);
100                         //第二种回到顶部的方式(常用)
101                         $("html,body").animate({scrollTop:0});
102                     })
103                 }else{
104                     oTop.fadeOut();
105                 }
106             });
107 
108         })
109     </script>
110 </head>
111 <body>
112     <div class="header">
113         <img src="../images/li02.png" alt="banner图">
114     </div>
115     <ul class="ul_list">
116         <li><a href="javascript:void(0);">首页</a></li>
117         <li><a href="javascript:void(0);">新闻动态</a></li>
118         <li><a href="javascript:void(0);">产品展示</a></li>
119         <li><a href="javascript:void(0);">案例分析</a></li>
120         <li><a href="javascript:void(0);">关注我们</a></li>
121         <li><a href="javascript:void(0);">联系我们</a></li>
122     </ul>
123     <div class="menu_pos"></div>
124     <div class="con">
125         <div class="con_header">网站主内容一</div>
126         <div class="con_center">网站主内容二</div>
127         <div class="con_footer">网站主内容三一</div>
128     </div>
129     <div class="footer"></div>
130     <div class="top">回到顶部</div>
131 </body>
132 </html>