这篇文章主要为大家展示了“html5如何实现横向滑动导航栏”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“html5如何实现横向滑动导航栏”这篇文章吧。

1、首先引入scroll.js

2、html部分：

<!--科目导航--><divid="navBox"class="navMain"><ulclass="nav"><li><aclass="active"href="javascript:;">全部</a></li><li><ahref="javascript:;">数学</a></li><li><ahref="javascript:;">英语</a></li><li><ahref="javascript:;">语文</a></li><li><ahref="javascript:;">物理</a></li><li><ahref="javascript:;">思想品德</a></li></ul></div>

3、css部分

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

4、js部分

$(".navlia").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";varcarousel=newiScroll("carousel",{hScrollbar:false,vScrollbar:false,vScroll:false});});

以上是“html5如何实现横向滑动导航栏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！