html5导航栏怎么设计(html5 横向滑动导航栏的方法示例)
类别:Web前端 浏览量:1609
时间:2021-10-13 00:52:01 html5导航栏怎么设计
html5 横向滑动导航栏的方法示例最近在学习html5,今天看到了一个效果感觉不错,就分享给大家,也给自己留个笔记,具体如下
需要效果
1、首先引入scroll.js
2、html部分
<!-- 科目导航 --> <li 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> </li>
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隐藏功能(使用Html5多媒体实现微信语音功能)
- html5游戏新手引导开发(使用数据结构给女朋友写个Html5走迷宫游戏)
- html5video怎么用(html5视频媒体标签video的使用方法及完整参数说明详解)
- html5app开发用什么平台(Html5与App的通讯方式详解)
- html5+css样式代码(详解HTML5中CSS外观属性)
- html5的语法变化(详解HTML5.2版本带来的修改)
- html5自定义结构指令(浅析HTML5 meta viewport参数)
- html5标签图片(HTML5图片层叠的实现示例)
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- html5课程入门(萌新的HTML5 入门指南)
- html5的新特性
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- html5基本代码文字颜色(html5默认气泡修改的代码详解)
- html5加入图片(HTML5 图片预加载的示例代码)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- html5带放大镜的搜索代码(html5借用repeating-linear-gradient实现一把刻度尺ruler)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
- 省 市书法家协会 送万福进万家 活动走进禹州美丽乡村(省市书法家协会)
- 点赞 禹州苌庄正式撤乡建镇 未来发展不可估量(禹州苌庄正式撤乡建镇)
热门推荐
- css怎么设置图片横着(一行css代码解决图片统一大小后的拉伸问题object-fit)
- mysql查询慢有哪些原因(MySQL 查询速度慢的原因)
- 设置404错误页面的几个建议
- easyui combogrid分页
- VS中打开.ashx文件
- fileoutstream使用方法(Filestream使用简单步骤总结)
- rabbitmq docker配置(Docker部署Rabbitmq容器实现过程解析)
- nginx启动报错连接失败(宝塔面板Nginx环境中出现404 Not Found的解决方法)
- dubbo和项目搭建(使用docker部署dubbo项目的方法步骤)
- docker中国加速镜像怎么设置(Docker 安装及配置镜像加速的实现)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9