手机端的可以拖动样式的菜单
程序员文章站
2024-01-29 12:24:10
...
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>手机移动端可滚动的导航代码</title>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<style type="text/css">
*{ margin: 0px; padding: 0px; }
/*整体宽和高*/
#lr_nb{ height:100px; width:100%;position:absolute;
/*bottom: 0px;*/
text-align: center;
display: block;
}
#lr_nb #slider_wrap{overflow:hidden;overflow-x:scroll;width:100%;-webkit-overflow-scrolling:touch;}
#lr_nb #slider_wrap .item_cell{display:inline-block;margin: 0px 10px;;overflow:hidden;position:relative;}
#lr_nb #slider_wrap::-webkit-scrollbar{display:none}
#lr_nb #wx_items{white-space:nowrap}
#lr_nb #wx_items .current span,
#lr_nb #wx_items .current a:visited,
#lr_nb #wx_items .current a:link,
#lr_nb #wx_items .current a:hover,
#lr_nb #wx_items .current a:focus{color:#4fbeab;}
/*图片容器*/
#span1{
width: 60px;height:60px; cursor:pointer; margin: 0 auto;
}
/*图片容器*/
/*底部菜单大学*/
#lr_nb #wx_items span{color:#666;font-size: 15px;width: 80px;height: 20px; display:block;text-align:center;cursor:pointer;}
.item_cell div img{
display: block;
width: 100%;
height: auto;
}
</style>
</head>
<body>
<!--滚动水平导航栏 start-->
<div id="lr_nb">
<div id="slider_wrap">
<div id="wx_items">
<div class="item_cell current">
<div id="span1" >
<img src="call.png">
</div>
<span>菜单一项</span>
</div>
<div class="item_cell">
<div id="span1" >
<img src="call.png">
</div>
<span>类型二</span>
</div>
<div class="item_cell">
<div id="span1" >
<img src="call.png">
</div>
<span>类型三</span>
</div>
<div class="item_cell">
<div id="span1" >
<img src="call.png">
</div>
<span>类型四</span>
</div>
<div class="item_cell">
<div id="span1" >
<img src="call.png">
</div>
<span>类型五</span>
</div>
<div class="item_cell">
<div id="span1" >
<img src="call.png">
</div>
<span>类型六</span>
</div>
<div class="item_cell">
<div id="span1" >
<img src="call.png">
</div>
<span>类型七</span>
</div>
<div class="item_cell">
<div id="span1" >
<img src="call.png">
</div>
<span>类型八</span>
</div>
</div>
</div>
</div>
<script>
$(function(){
$("#wx_items .item_cell").click(function(){
$(this).addClass('current').siblings().removeClass('current');
});
});
</script>
</body>
</html> 效果如图：