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

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

来源:手机导航滑动代码 浏览:324次 时间: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

推荐站点

  • 今天天气今天天气

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

    www.jintiantianqi.com
  • 看美女-中国娱乐休闲第一站看美女-中国娱乐休闲第一站

    看美女-提供最新明星美女写真,高清性感美女图片欣赏,明星动态,娱乐八卦,美女图库,奇闻异事等综合类娱乐休闲网站!要放松就去看美女(kanmeinv.cc)!

    www.kanmeinv.cc
  • 站长啦全能搜站长啦全能搜

    站长全能搜为您提供各大搜索引擎入口,集合全世界最大的搜索引擎百度搜索,谷歌搜索,360搜索,搜狗搜索,必应搜索等搜索引擎,帮您一键实现对百度、谷歌、搜狗、必应、360等搜索引擎及视频、图片、音乐、知识、微博、微信、购物等热门网站搜索,方便您快速找到你的搜索!

    so.cnzzla.com
  • 百度超级链官网百度超级链官网

    百度超级链官网“超级链”基于区块链发展的解决方案,能解决现在能源消耗问题,还可以单链支持10万并发。百度目前正基于超级链完成自身企业的区块链转化。百度超级链 可免费领养区块链数字狗莱茨狗

    pet-chain.baidu.com
  • 度宇宙官网度宇宙官网

    度宇宙是继百度超级链、“图腾” 后,再推出的一个区块链项目。度宇宙将为用户打造一个由元素、引力、星球所构建的数字宇宙。用户可以通过多种系统行为获取度宇宙“元素”,并创造和扩建属于自己的星球,在用户星球质量逐渐增加的过程中,诸多新功能将逐步开启,度宇宙APP将于世界杯开幕式前后发布。2018年6月8日,百度推出的区块链原生应用“度宇宙”官网正式上线。 6月15日,区块链APP“度宇宙”正式上线,提供iOS版和安卓版下载。 产品玩法编辑 元素:度宇宙空间中漂浮着各种神奇的元素,需要通过引力将它们不断聚集。 星球:来到度宇宙的居民会有创世力量为其凝聚一颗独一无二星球,它是居民本身的外在实体。 引力:它是度宇宙居民脑力的外化形式,居民的引力越大,就能获得越多的元素。 探索:度宇宙中有各种神秘有趣的星球,在探索中可不断提升自身引力。 注:元素不断汇聚可成为星球,获取元素越多星球质量就越大,质量越大引力就越大,引力越大就能获得更多的元素。当星球的质量达到一定要求的时候,会开启神秘功能。

    duyuzhou.baidu.com