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

这篇文章主要介绍了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 横向滑动导航栏的方法示例的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读