手机移动端可滚动的导航代码--css解决方案

最新推荐文章于 2022-10-26 14:21:12 发布

飞向Hadoop

最新推荐文章于 2022-10-26 14:21:12 发布

阅读量9.8k

点赞数 1

分类专栏： HTML5.CSS3

本文链接：https://blog.csdn.net/hunannanhu/article/details/51324010

版权

HTML5.CSS3 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

<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.9.1.min.js"></script>
	<style type="text/css">
		/*滚动水平导航栏 start*/
		.lr_nb{border-bottom:1px solid #E8E8E8;border-top:1px solid #E8E8E8;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;-webkit-transition:.3s all;transition:.3s all}
		.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;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align:center;cursor:pointer}
		.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;}
		.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 current">
            		<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-->
	<script>
		$(function(){
			$(".wx_items .item_cell").click(function(){
				$(this).addClass('current').siblings().removeClass('current');
			});
		});
	</script>
</body>
</html>

飞向Hadoop

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
手机移动端可滚动的导航代码--css解决方案

/*滚动水平导航栏 start*/ .lr_nb{border-bottom:1px solid #E8E8E8;border-top:1px solid #E8E8E8;height:40px;line-height:40px;width:100%;position:absolute;background:#fff;padding: 0px 10px;box-sizing:border-bo
复制链接

扫一扫