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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 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中var_export与var_dump的区别分析
2010/08/21 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP5函数小全(分享)
2013/06/06 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
做网页的一些技巧
2007/02/01 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
使用python加密自己的密码
2015/08/04 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python url 参数修改方法
2018/12/26 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
联片教研活动总结
2014/07/01 职场文书
邀请函样本
2015/02/02 职场文书