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


Posted in HTML / CSS onMay 08, 2020

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

需要效果

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});
  });

到此这篇关于html5 横向滑动导航栏的方法示例的文章就介绍到这了,更多相关html5横向滑动导航栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
HTML基本元素标签介绍
Feb 28 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 #HTML / CSS
HTML5 body设置自适应全屏
May 07 #HTML / CSS
iframe与window.onload如何使用详解
May 07 #HTML / CSS
HTML5录音实践总结(Preact)
May 07 #HTML / CSS
详解HTML5.2版本带来的修改
May 06 #HTML / CSS
canvas绘制太极图的实现示例
Apr 29 #HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 #HTML / CSS
You might like
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php四种基础算法代码实例
2013/10/29 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP微商城开源代码实例
2019/03/27 PHP
纯js写的分页表格数据为json串
2014/02/18 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
python斐波那契数列的计算方法
2018/09/27 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
详解python运行三种方式
2019/05/13 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
如何利用python进行时间序列分析
2020/08/04 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
教师职称自我鉴定
2014/02/12 职场文书
收款委托书
2014/10/14 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书