svip

html手机端下拉菜单代码,jQuery手机移动端下拉列表选择代码**前面一定要加上jquery.min.js
如图所示：

html部分：

1. <div id="top">
   
2. <div><span></span></div>
   
3. </div>
   
4. <div class="burger">
   
5.         <div class="culumn">
   
6.                 <ul class="icon-btn1">
   
7.                         <li class="btnstyle"><a href="/">首页</a></li>
   
8.                         <li ><a href="/game/">游戏</a></li>
   
9.                         <li ><a href="/soft/">软件</a></li>
   
10.                         <li ><a href="/news/">文章</a></li>
    
11.                         <li ><a href="/heji/">合集</a></li>
    
12.                         <li ><a href="/top/">排行榜</a></li>
    
13.                 </ul>
    
14.         </div>
    
15. </div>

复制代码

css代码：

1. #top>div>.search{display: none;position: absolute;width:calc(100% - 25px);left: -10px;height: 35px;margin: 7px 30px 7px 22px;border: 1px #ddd solid;border-radius: 17.5px;background: #f6f6f6;overflow: hidden;}
   
2. #top>div>span{display:inline-block;flex: 0 0 34px;width: 40px;height: 34px;margin-top: 13.5px;background: url(../images/r-icon-pre.png) no-repeat left bottom;background-size: 33px auto;}
   
3. 
   
4. .burger{position: fixed;min-width: 320px;max-width: 751px;z-index:2017;width: 100%;top:70px;background: rgba(255,255,255,.95);border-top: 1px solid #f5f5f5;overflow-x: hidden;overflow-y: scroll;display: none;}
   
5. 
   
6. .culumn{overflow: hidden;}
   
7. 
   
8. .icon-btn1{display: block;padding: 0 6px;overflow: hidden;}
   
9. 
   
10. .icon-btn1 li{float: left;display: inline-block;width: 20%;text-align: center;margin: 5px 0;}
    
11. 
    
12. .icon-btn1 li a{display: inline-block;overflow: hidden;font-size: 16px;width: 80%;height: 30px;line-height: 30px !important;border: 2px solid #bbb;border-radius: 8px;}
    

复制代码

js部分：

1. $(document).ready(function(){
   
2.     //控制高度
   
3.     var h=$(window).height(); //屏幕高度
   
4.     //点击显示隐藏
   
5.     var x=true;
   
6.     $(".burger").css("display","none");
   
7.     $("#top>div>span").click(function(){
   
8.         var Htop=$("body").scrollTop();
   
9.         if(x){
   
10.             $(this).css("background-position","left top");         
    
11.             $(".burger").slideDown();
    
12.             document.body.scrollTop=Htop;
    
13.             $("#BOX").css({"height":h+"px","overflow":"hidden"});//使网页不可滚动
    
14.             $("#BOX").addClass('meunstyle')
    
15.             x= false;
    
16.             
    
17.             if($('#cambrian0').length >=1){
    
18.             }   
    
19.         }else{
    
20.             $(this).css("background-position","left bottom");
    
21.             $(".burger").slideUp();
    
22.             document.body.scrollTop=Htop;
    
23.             $("#BOX").css("overflow","initial");//使网页恢复滚动
    
24.             $("#BOX").removeClass('meunstyle')
    
25.             x= true;
    
26.             
    
27.             if($('#cambrian0').length >=1){
    
28.                 $('#top').css('top','0')
    
29.             }
    
30.             
    
31.         }
    
32.     })
    
33. })

复制代码

图标