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

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

需要效果

1、首先引入scroll.js

2、html部分

            
              
                  
全部
                  
数学
                  
英语
                  
语文
                  
物理
                  
思想品德
              
          

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横向滑动导航栏内容请搜索<编程笔记>以前的文章或继续浏览下面的相关文章，希望大家以后多多支持<编程笔记>！