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.0 图形构成实例练习一
Mar 19 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
纯html+css实现打字效果
Aug 02 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
php5.2时间相差8小时
2007/01/15 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
php文件上传类完整实例
2016/05/14 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JS html时钟制作代码分享
2017/03/03 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
详解Vite的新体验
2021/02/22 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
N.Peal官网:来自伦敦的高档羊绒品牌
2018/10/29 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
党支部先进事迹材料
2014/12/24 职场文书
红歌会主持词
2015/07/02 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android