手机移动端可滚动导航代码

Posted 次瓜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机移动端可滚动导航代码相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>


<body>
</body>
</html>

 

以上是关于手机移动端可滚动导航代码的主要内容,如果未能解决你的问题,请参考以下文章

现代都市风 移动端可折叠导航菜单

第32 章项目实战-移动端流体布局5

导航抽屉活动:在按钮单击时从片段移动到片段

BootStrap有用代码片段(持续总结)

滚动时如何在不同屏幕上调整导航栏的大小

移动端可拖拽的进度条