这篇文章将为大家详细讲解有关“用HTML如何写横向滑动导航栏的效果”的知识，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

最近在学习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});
  });

“用HTML如何写横向滑动导航栏的效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS3如何实现中心点布局的效果，方法是什么

  这篇文章主要介绍了css3实现元素环绕中心点布局的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中怎样用linear-gradient方法实现渐变背景

  我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 "图像"。它是css3中的语法，最低兼容IE10。下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“{title}”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！

• CSS Grid网格布局如何创建，网格布局好在哪

  这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• CSS阻断合并怎么理解，会存在什么影响

  这篇文章主要介绍了浅谈css阻断合并及其他影响的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• 用纯CSS写文本溢出截断省略效果怎么做，优缺点是什么

  这篇文章主要介绍了纯CSS实现“文本溢出截断省略”的几种方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧