html5 横向滑动导航栏的方法示例

最近在学习htML5，今天看到了一个效果感觉不错，就分享给大家，也给自己留个笔记，具体如下

需要效果

1、首先引入scroll.js

2、html部分

!-- 科目导航 -->
            div id="navbox" class="navMain">
                ul class="nav" style="posITion:relative!important;
    ">
                    li>
    a class="active" href="javascript:;
    ">
    全部/a>
    /li>
                    li>
    a href="javascript:;
    ">
    数学/a>
    /li>
                    li>
    a href="javascript:;
    ">
    英语/a>
    /li>
                    li>
    a href="javascript:;
    ">
    语文/a>
    /li>
                    li>
    a href="javascript:;
    ">
    物理/a>
    /li>
                    li>
    a href="javascript:;
    ">
    思想品德/a>
    /li>
                /ul>
            /div>
    

3、css部分

/* 滑动导航 */.nav li {
        float: left;
        min-width: 60px;
        padding: 5px 0;
        margin-right: 9px;
}
.nav a{
      font-Size: 14px;
      color: #999;
}
.navMain{
        background-color: #fff;
        position: relative;
        margin: 0 13px;
}
.nav{
        background-color: #fff;
        overflow: hidden;
}
    .nav li>
a.active{
        color: #3a95f5;
        border-bottom: 1px solid #3a95f5;
        padding-bottom: 2px;
}
    

4、js部分

$(".nav li a").click(function(){
        $(this).addClass("active").parents("li").siblings().find("a").removeClass("active");
  }
    );
  window.addEventListener('load',function(){
        VAR $navBox = document.getElementById('navBox'),        $ul = $navBox.querySelector('ul'),        liArray = $navBox.querySelectorAll('li'),        liLength = $navBox.querySelectorAll('li').length;
    10     $ul.style.width = (liArray[0].clientWidth + 10)*liLength +"px";
    var carousel=new iScroll("carousel",{
hScrollbar:false, vScrollbar:false, vScroll: false}
    );
  }
    );
    

到此这篇关于html5 横向滑动导航栏的方法示例的文章就介绍到这了,更多相关html5横向滑动导航栏内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！