css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏
需要达到的效果：
- 默认首页选中样式
- 设置鼠标滑过效果：颜色变化(#f60),宽度变化，字体变化
所涉及的知识点：
- 布局：float
- css: 元素状态切换(display),盒模型(margin,padding),圆角边框(border-radius),可见宽度(offsetWidth);
- JavaScript:匿名类，for循环,通过标签获得元素(getElementsByTagName),方法自动间隔运行(setInterval/clearInterval)
基本架构
无序列表:<ul>，<li>,是与导航栏语义比较贴切的标签，然后将<a>标签放到<li>内部即可实现导航栏html部分。
<ul class="nav" ><li><a href="#">首 页</a></li><li><a href="#">新闻快讯</a></li><li><a href="#">产品展示</a></li><li><a href="#">售后服务</a></li><li><a href="#">联系我们</a></li>
</ul>样式修改
取消默认样式
把浏览器默认的盒模型值，列表样式以及链接样式的默认样式取消，并且把字体颜色改成黑色。
*{margin: 0;padding: 0;font-size: 14px;}li{list-style: none;}a{text-decoration: none;color: #000;}设置骨架
- 通过将/设置成块状标签，即可达到给/设置宽高的目的；
- 通过float：left使导航栏从纵向排列变成横向排列；
- 通过将line-height属性设置的跟height一样，实现导航栏文字垂直居中；
- 通过text-aligin将导航栏文本水平居中。
li{list-style: none;float:left;}
li a{display:block;width: 100px;height: 30px;line-height: 30px;text-aligin:center; }颜色以及细节修改
- 设置导航栏默认颜色，并且通过margin属性是导航标签产生间隔。
- 将导航栏四个角通过border-radius设置成圆角。
- 通过给a标签属性设置class=on，以及伪类选择器a:hover将【首页】和【鼠标滑过】的样式颜色设置为#f60，字体颜色设置为白色。
li a{display:block;width: 100px;height: 30px;line-height: 30px;background-color: #efefef;margin-left:1px;border-radius: 5px;}
.on,.nav li a:hover{background-color: #f60;color: #fff;}设置导航栏的底边
- 通过border-bottom属性制作导航栏的“脚”;
- 要知道我们已经将<li>设置成了float，因此它已经脱离了文本档，那么其父元素的默认height值也就为0，需要自己设定；
- 通过margin,padding属性移动导航栏主体部分。
ul{height:50px;border-bottom:5px solid #f60;padding-left:20px;}
li{margin-top:20px;}鼠标划过改变行高
- 通过hover设置鼠标划过后的行高
- 此时会发现导航栏向下移动了，通过将margin设置为负值，向上移动。
.on,.nav li a:hover{height: 40px;line-height: 40px;margin-top: -10px;}鼠标划过自动伸缩
一、 鼠标划过导航栏自动延伸
- 首先要获得标签元素，可以通过getElementsByTag；
- 要给每一个标签设置，可以通过for循环遍历；
- 鼠标划过事件通过 onmouseover设置；
- 在方法里通过var变量获得当前标签元素。
- 设置自动延伸，可以通过setInterval方法，让方法以固定的时间为间隔，反复执行；
- 此时导航栏会无限延伸，通过if设置条件，设置导航栏延伸停止时机。
window.onload=function(){var aA=document.getElementsByTagName("a");for(var i=0;i<aA.length;i++){aA[i].onmouseover=function(){var This=this;clearInterval(This.time);//初始化This.time=setInterval(function(){This.style.width=This.offsetWidth+8+"px";if(This.offsetWidth>=150){clearInterval(This.time)}},30);}}}二、鼠标离开自动缩
aA[i].onmouseout=function(){var This = this;clearInterval(This.time);//初始化 This.time=setInterval(function(){This.style.width=This.offsetWidth-8+"px";if(This.offsetWidth<=100){clearInterval(This.time);}},30);}
}最终代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>导航栏</title><style type="text/css">*{margin: 0;padding: 0;font-size: 14px;}a{text-decoration: none;color: #000;}ul{list-style: none;height: 50px;border-bottom: 5px solid #f60;padding-left: 20px;}li{margin-top: 20px;float: left;}.nav li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: #efefef;margin-left: 1px;border-radius: 5px;}.nav .on,.nav li a:hover{height: 40px;line-height: 40px;margin-top: -10px;background-color: #f60;color:#fff;}</style><script type="text/javascript">window.onload=function(){var aA = document.getElementsByTagName("a");for(var i=0;i<aA.length;i++){aA[i].onmouseover=function(){// 此处this为当前a标签var This = this;// 设置方法停止的时机clearInterval(This.time);// 设置方法每30毫秒运行一次// 其中offsetWidth:对象的可见宽度,包括width+padding-border// 当offsetWidth>=120时,程序停止This.time=setInterval(function(){This.style.width=This.offsetWidth+8+"px";if(This.offsetWidth>=160){clearInterval(This.time);}},30);}aA[i].onmouseout=function(){var This = this;clearInterval(This.time);//初始清理This.time=setInterval(function(){This.style.width=This.offsetWidth-8+"px";if(This.offsetWidth<=120){clearInterval(This.time);}},30);}}}</script></head><body><ul class="nav"><li><a class="on" href="#">首页</a></li><li><a href="#">新闻快讯</a></li><li><a href="#">产品展示</a></li><li><a href="#">售后服务</a></li><li><a href="#">联系我们</a></li></ul></body>
</html>
作者：光哥很霸气
链接：https://www.jianshu.com/p/6b050a5aa9b1
来源：简书
转载于:https://www.cnblogs.com/AlexanderZhao/p/10853631.html
css+js实现自动伸缩导航栏相关推荐
- 通过uc.js实现pc firefox页面向下滚动自动隐藏导航栏，复刻firefox移动版的丝滑体验
页面向下滚动自动隐藏firefox导航栏 简述 firefox移动版有个滑动页面浏览时自动隐藏导航栏的功能,这个功能很机智,能够最大化的同时让你尽量无感.然后想在pc实现这个功能,搜了一下发现uc.j ...
- css导航滚动到顶部后保持不动,html-使用CSS滚动时，使导航栏保持顶部
html-使用CSS滚动时,使导航栏保持顶部 我正在尝试使导航栏与页面一起移动,但是如果用户向下滚动,则导航栏会停留在顶部. 谁能提供任何示例或如何提供? 非常感激. (我用其他任何语言都没有希望). ...
- html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果 简介:本文是一个前端案例的讲解,关于如何用html+css+js制作出逐渐显示出文字的效果,这个效果可以帮助大家在新人面前装一波. 效果展示 效果就是这个样子 ...
- 原生HTML+CSS+JS制作自己的导航主页（前端大作业，源码+步骤详解）
文章目录 前言 一.插入背景 二.头部 1.导航栏 2. 优化导航栏 3 时间 4. 搜索框 三.主体 四.底部 五.背景泡沫球特效 六.note小便签 七.全部代码 1. index.html 2. ...
- 原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）
效果图: 点击导航栏左右拖动 代码: CSS: <style>.navBar {width: 1200px;margin-left: 25px;margin-top: 40px;margi ...
- html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下 最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
- html怎么设置顶部导航栏,互联网常识：CSS+HTML如何实现顶部导航栏
本篇文章给大家介绍一下CSS+HTML实现顶部导航栏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 导航栏的实现.固定顶部导航栏.二级菜单实现 效果图: 最近在使用这个导航栏 ...
- css flexbox模型_Flexbox教程：了解如何使用CSS Flexbox编写响应式导航栏
css flexbox模型 In this article, I'll explain how to create a navbar which adapts to various screen si ...
- 【HTML+CSS】页内侧边导航栏 页内导航
页内侧边导航栏 页内导航 源码 HTML部分 CSS部分 效果 源码 HTML部分 <!DOCTYPE html> <html><head><meta cha ...
最新文章
- MySQL基本了解与使用
- 解决python2.x文件读写编码问题
- PCB雕刻钻孔机制作
- 饿了么超级会员数量暴增，外卖市场“去泡沫化”的先声？
- Codeigniter 获取当前的控制器名称和方法名称
- 类装载器ClassLoader
- IOS开发UI篇之──自定义加载等待框（MBProgressHUD）
- 前端学习（3306）：函数组件usermemo和usercallback二
- Docker 操作手册
- 发布npm包到GitHub Packages
- 大数据分析推动业务增长的方法有哪些
- （3）Deep Learning之神经网络和反向传播算法
- 关于Mysql5.5在关键字方面的变化
- [转载] 中华典故故事（孙刚）——19 万岁
- 建模实训报告总结_建筑实训报告总结
- matlab 计算 fdr,基因富集分析（p值，q值和FDR值）
- 自己搭建开源数据统计报表系统
- 必备的 6 大计算机网络基础知识点！会 3 个以上就很牛逼了
- 让进度条颜色渐变的shader
- 解决4K屏下VMware虚拟机中界面太小问题