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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 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数据库开发知多少
2006/10/09 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
用pickle存储Python的原生对象方法
2017/04/28 Python
详解python 注释、变量、类型
2018/08/10 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
opencv实现简单人脸识别
2021/02/19 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Python多线程正确用法实例解析
2020/05/30 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
运动会广播稿150字
2014/02/19 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
居住证明范文
2015/06/17 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Python入门学习之类的相关知识总结
2021/05/25 Python
Nebula Graph解决风控业务实践
2022/03/31 MySQL
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android