html5 横向滑动导航栏
需要效果
1、首先引入scroll.js
2、html部分
1 <!-- 科目导航 --> 2 <div id="navBox" class="navMain"> 3 <ul class="nav" style="position:relative!important;"> 4 <li><a class="active" href="javascript:;">全部</a></li> 5 <li><a href="javascript:;">数学</a></li> 6 <li><a href="javascript:;">英语</a></li> 7 <li><a href="javascript:;">语文</a></li> 8 <li><a href="javascript:;">物理</a></li> 9 <li><a href="javascript:;">思想品德</a></li> 10 </ul> 11 </div>
3、css部分
1 /* 滑动导航 */ 2 .nav li { 3 float: left; 4 min-width: 60px; 5 padding: 5px 0; 6 margin-right: 9px; 7 } 8 .nav a{ 9 font-size: 14px; 10 color: #999; 11 } 12 .navMain{ 13 background-color: #fff; 14 position: relative; 15 margin: 0 13px; 16 } 17 .nav{ 18 background-color: #fff; 19 overflow: hidden; 20 } 21 .nav li>a.active{ 22 color: #3a95f5; 23 border-bottom: 1px solid #3a95f5; 24 padding-bottom: 2px; 25 }
4、js部分
1 $(".nav li a").click(function(){ 2 $(this).addClass("active").parents("li").siblings().find("a").removeClass("active"); 3 }); 4 window.addEventListener('load',function(){ 5 var $navBox = document.getElementById('navBox'), 6 $ul = $navBox.querySelector('ul'), 7 liArray = $navBox.querySelectorAll('li'), 8 liLength = $navBox.querySelectorAll('li').length;10 $ul.style.width = (liArray[0].clientWidth + 10)*liLength +"px"; 11 var carousel=new iScroll("carousel",{hScrollbar:false, vScrollbar:false, vScroll: false}); 12 });
