用css+js实现自动伸缩导航栏

需要达到的效果:

  1. 默认首页选中样式
  2. 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化

所涉及的知识点:

  1. 布局:float
  2. css: 元素状态切换(display),盒模型(margin,padding),圆角边框(border-radius),可见宽度(offsetWidth);
  3. 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;}

设置骨架

  1. 通过将/设置成块状标签,即可达到给/设置宽高的目的;
  2. 通过float:left使导航栏从纵向排列变成横向排列;
  3. 通过将line-height属性设置的跟height一样,实现导航栏文字垂直居中;
  4. 通过text-aligin将导航栏文本水平居中。
li{list-style: none;float:left;}
li a{display:block;width: 100px;
height: 30px;line-height: 30px;
text-aligin:center; }

颜色以及细节修改

  1. 设置导航栏默认颜色,并且通过margin属性是导航标签产生间隔。
  2. 将导航栏四个角通过border-radius设置成圆角。
  3. 通过给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; }

设置导航栏的底边

  1. 通过border-bottom属性制作导航栏的“脚”;
  2. 要知道我们已经将<li>设置成了float,因此它已经脱离了文本档,那么其父元素的默认height值也就为0,需要自己设定;
  3. 通过margin,padding属性移动导航栏主体部分。
ul{height:50px;
border-bottom:5px solid #f60;
padding-left:20px;}
li{margin-top:20px;}

鼠标划过改变行高

  1. 通过hover设置鼠标划过后的行高
  2. 此时会发现导航栏向下移动了,通过将margin设置为负值,向上移动。
.on,.nav li a:hover{
height: 40px;
line-height: 40px;
margin-top: -10px;}

鼠标划过自动伸缩

一、 鼠标划过导航栏自动延伸

  1. 首先要获得标签元素,可以通过getElementsByTag;
  2. 要给每一个标签设置,可以通过for循环遍历;
  3. 鼠标划过事件通过 onmouseover设置;
  4. 在方法里通过var变量获得当前标签元素。
  5. 设置自动延伸,可以通过setInterval方法,让方法以固定的时间为间隔,反复执行;
  6. 此时导航栏会无限延伸,通过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

来源:简书

css+js实现自动伸缩导航栏的更多相关文章

  1. JavaScript+CSS实现经典的树形导航栏

    在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单 项目,然后配以图片,和CSS的效果,可以说是非常常用的功能,现在做一个项目,正好用到这个功能,于 ...

  2. JS写的二级导航栏(利用冒泡原理)

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

  3. Markdown使用TOC自动生成导航栏

    经常使用markdown 的玩家一定很想要一个自动生成的导航栏吧,自己写的基本思路就是 轮询监听滚动条的位置,通过抛锚和跳锚实现,这里介绍一下今天的主角,markdown-toc插件: https:/ ...

  4. AMScrollingNavbar框架(自动隐藏导航栏)使用简介

    AMScrollingNavbar框架是一个可以上拉隐藏导航栏和下拉显示导航栏的框架,这个开源框架的调用也很简单,本章节就给大家介绍一下这个框架的用法. 一.下载及导入框架 AMScrollingNa ...

  5. 使用『jQuery』『原生js』制作一个导航栏动效 —— { }

    效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...

  6. css三级下拉的导航栏

    #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: none;}# ...

  7. css怎样使顶端悬浮导航栏不遮住下面一层页面内容

    在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...

  8. JS自适应导航栏,菜单栏

    1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href=& ...

  9. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

随机推荐

  1. Spring(003)-消费返回list的rest服务

    通过spring提供的RestTemplate就可以访问rest服务.首先需要创建一个RestTemplate,这个需要手动来创建bean @Configuration public class De ...

  2. 曹玉中-201871010105《面向对象程序设计(java)》第6-7周学习总结

    曹玉中-201871010105<面向对象程序设计(java)>第6-7周学习总结 项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>    https://www.c ...

  3. 面向对象程序设计(Java) 第6-7周学习指导及要求

    面向对象程序设计(Java)第6-7周学习指导及要求 (2019.9.29-2019.10.8)   学习目标 深入理解程序设计中算法与程序的关系: 深入理解java程序设计中类与对象的关系: 理解O ...

  4. 【入门篇一】HelloWorld演示(2)

    一.传统使用 Spring 开发一个“HelloWorld”的 web 应用 1. 创建一个 web 项目并且导入相关 jar 包. 2. 创建一个 web.xml 3. 编写一个控制类(Contro ...

  5. Win10 Mactype 字体优化

    1.下载安装 Mactype :http://www.mactype.net/ 2. 打开MacType Tray.exe,右键其在任务栏图标就能选择配置文件. 分享一个配置文件: [General] ...

  6. 【oracle】update select语句

  7. 获取客户端IP地址的三个HTTP请求头的区别

    一.没有使用代理服务器的情况: REMOTE_ADDR = 您的 IP HTTP_VIA = 没数值或不显示 HTTP_X_FORWARDED_FOR = 没数值或不显示 二.使用透明代理服务器的情况 ...

  8. [LeetCode] 737. Sentence Similarity II 句子相似度之二

    Given two sentences words1, words2 (each represented as an array of strings), and a list of similar ...

  9. Oracle--DBV命令行工具用法详解及坏块修复

    一,介绍 DBV(DBVERIFY)是Oracle提供的一个命令行工具,它可以对数据文件物理和逻辑两种一致性检查.但是这个工具不会检查索引记录和数据记录的匹配关系,这种检查必须使用analyze va ...

  10. Eclipse:设置自动生成注释

    一.设置自动生成 1.修改设置: 点击Window下的Preferences: 进入Java->Code Style->Code Templates的页面,选择Code下的New Java ...