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 Queries中媒体属性的使用
Feb 29 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 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
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
webpack优化之代码分割与公共代码提取详解
2019/11/22 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
python利用datetime模块计算时间差
2015/08/04 Python
python异常触发及自定义异常类解析
2019/08/06 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python实现手绘图效果实例分享
2020/07/22 Python
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
员工拾金不昧表扬信
2014/01/09 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
HttpClient实现表单提交上传文件
2022/08/14 Java/Android