本文介绍了一种适用于手机移动端的可滚动导航栏设计方案及其实现代码。通过使用HTML、CSS和JavaScript，实现了水平滚动的导航栏效果，适用于多种屏幕尺寸。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>手机移动端可滚动的导航代码</title>
<script src="../skin/js/jquery.min.js"></script>
<style type="text/css">
/*滚动水平导航栏 start*/
.lr_nb{height:40px;line-height:40px;width:100%;position:absolute;background:#fff;padding: 0px 10px;box-sizing:border-box;z-index:1;max-width:1080px;opacity:1;top:0;
transition:.3s all;
-moz-transition:.3s all; /* Firefox 4 */
-webkit-transition:.3s all; /* Safari and Chrome */
-o-transition:.3s all; /* Opera */}
.lr_nb .slider_wrap.line{overflow:hidden;overflow-x:scroll;width:100%;-webkit-overflow-scrolling:touch;}
.lr_nb .slider_wrap.line .item_cell{display:inline-block;margin: 0px 10px;;overflow:hidden;position:relative;}
.lr_nb .slider_wrap.box{overflow:hidden;width:100%}
.lr_nb .slider_wrap::-webkit-scrollbar{display:none;}
.lr_nb .wx_items{white-space:nowrap}
.lr_nb .wx_items span{color:#666;font-size: 15px; white-space:nowrap;display:block;}
.lr_nb_after{height:40px;display:block;clear:both;}
/*滚动水平导航栏 end*/
</style>
</head>
<body>
<!--滚动水平导航栏 start-->
<div class="lr_nb">
<div class="slider_wrap line">
<div class="wx_items">
<div class="item_cell ">
<span>类型一</span>
</div>
<div class="item_cell">
<span>类型二</span>
</div>
<div class="item_cell">
<span>类型三</span>
</div>
<div class="item_cell">
<span>类型四</span>
</div>
<div class="item_cell">
<span>类型五</span>
</div>
<div class="item_cell">
<span>类型六</span>
</div>
<div class="item_cell">
<span>类型七</span>
</div>
<div class="item_cell">
<span>类型八</span>
</div>
</div>
</div>
</div>
<div class="lr_nb_after"></div>
<!--滚动水平导航栏 end-->
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>手机移动端可滚动的导航代码</title>
<script src="../skin/js/jquery.min.js"></script>
<style type="text/css">
/*滚动水平导航栏 start*/
.lr_nb{height:40px;line-height:40px;width:100%;position:absolute;background:#fff;padding: 0px 10px;box-sizing:border-box;z-index:1;max-width:1080px;opacity:1;top:0;
transition:.3s all;
-moz-transition:.3s all; /* Firefox 4 */
-webkit-transition:.3s all; /* Safari and Chrome */
-o-transition:.3s all; /* Opera */}
.lr_nb .slider_wrap.line{overflow:hidden;overflow-x:scroll;width:100%;-webkit-overflow-scrolling:touch;}
.lr_nb .slider_wrap.line .item_cell{display:inline-block;margin: 0px 10px;;overflow:hidden;position:relative;}
.lr_nb .slider_wrap.box{overflow:hidden;width:100%}
.lr_nb .slider_wrap::-webkit-scrollbar{display:none;}
.lr_nb .wx_items{white-space:nowrap}
.lr_nb .wx_items span{color:#666;font-size: 15px; white-space:nowrap;display:block;}
.lr_nb_after{height:40px;display:block;clear:both;}
/*滚动水平导航栏 end*/
</style>
</head>
<body>
<!--滚动水平导航栏 start-->
<div class="lr_nb">
<div class="slider_wrap line">
<div class="wx_items">
<div class="item_cell ">
<span>类型一</span>
</div>
<div class="item_cell">
<span>类型二</span>
</div>
<div class="item_cell">
<span>类型三</span>
</div>
<div class="item_cell">
<span>类型四</span>
</div>
<div class="item_cell">
<span>类型五</span>
</div>
<div class="item_cell">
<span>类型六</span>
</div>
<div class="item_cell">
<span>类型七</span>
</div>
<div class="item_cell">
<span>类型八</span>
</div>
</div>
</div>
</div>
<div class="lr_nb_after"></div>
<!--滚动水平导航栏 end-->
</body>
</html>
扫一扫
229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
