当前位置:站长啦网站目录 » 站长资讯 » 站长新闻 » 技术文档 » 文章详细 订阅RssFeed

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

来源:手机导航滑动代码 浏览:577次 时间:2018-08-21
简介:【代码】手机移动端可滚动的导航代码--css解决方案 手机上的导航如果很长的话,怎么样才能用滑动的方式查看呢,而不是换行,单行滑动的效果如何 请看代码​

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

手机上的导航如果很长的话,怎么样才能用滑动的方式查看呢,而不是换行,单行滑动的效果如何

请看代码

可以直接在这里调试

http://top.cnzzla.com/gongjuxiang/run/


<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>



分享一下更健康,本文地址: https://top.cnzzla.com/artinfo/45064.html

推荐站点

  • 口腔溃疡口腔溃疡

    口腔溃疡发病原因如何根治快速治疗方法,什么药散贴怎么治最管用才好,吃什么水果,最简单的治疗偏方,口腔溃疡白色的是什么,宝宝孕妇儿童婴儿怎么引起的,吃维生素几含片、长期经常复发性严重怎么办最快愈合、医院挂什么科室、会传染吗缺乏什么维生素c怎么好的快、快速治疗方法、怎么快速好、一般多久自愈一分钟见效、三分钟止疼法、5个小妙招巧治口腔溃疡、小儿牙龈牙疼舌头嘴巴嘴唇溃疡症状、口腔粘膜脱落、艾滋病、口腔癌早期症状图片,西瓜霜、蜂蜜、中药治疗口腔溃疡。

    www.kqm8.com
  • 软件天堂软件天堂

    软件天堂,各种绿色软件、破解软件、去广告软件的搬运工,你的吾爱破解下载基地。以各种杀毒软件,浏览器,应用软件,单机游戏,手机软件为主,为广大软件爱好者打造软件下载和学习的乐园!

    soft.cnzzla.com
  • 男人帮-好男人休闲娱乐第一站男人帮-好男人休闲娱乐第一站

    男人帮(966383.com)-中国好男人休闲娱乐第一站!为您提供男性时尚,娱乐八卦,美女写真,两性健康,奇闻异事等男性爱看的内容,还有“青娱乐”特色栏目,打造专业的男人网站,成为你网上的男人天堂!

    966383.com
  • 51资讯网51资讯网

    51资讯网提供全面及时的资讯、房产、汽车、旅游、家装、金融、体育、医疗、物流、教育、餐饮等行业实时资讯,24小时不间断播报,让您获得最新行业信息,最新产业新闻报道。

    www.gwdh5.com
  • 今天天气今天天气

    今天天气网可以查询全国3259个城区一周天气预报、未来十五天天气预报,及时准确发布中央气象台天气信息,末来十五天天气预报、天气预报查询一周15天的查询气象报告,并且为用户提供生活指数、健康指数、交通指数、旅游指数,及各类天气预报资讯。

    www.jintiantianqi.com