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中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 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
推荐文章系统(一)
2006/10/09 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php 生成短网址原理及代码
2014/01/23 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
详解python深浅拷贝区别
2019/06/24 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
国际商务系学生个人的自我评价
2013/11/26 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
小学老师对学生的评语
2014/12/29 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python