用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. python 模块、包

    #-----模块.包----- 模块: 一个.py 文件就称之为模块模块好处:1.提高代码可读性 2.编写代码不需要从零开始 python 模块: 1.python标准库 2.第三方模块 3.应用程序 ...

  2. toString的本质 以及String.valueOf()

    Object可以用toString转为字符串. Object.toString(); 但char[]不行,得用valueOf. String.valueOf(char[]); 如果用toString, ...

  3. 201871010126 王亚涛 《面向对象程序设计（Java）》第十周实验总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  4. 201871010136-赵艳强《面向对象程序设计（java）》第十四周学习总结

    201871010136-赵艳强<面向对象程序设计(java)>第十四周学习总结   项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh ...

  5. python27期day01：变量、常量、注释、PEP8开发规范、数据类型、Python2和Python3的区别、用户输入、流程控制语句、作业题

    1.变量:将程序中运行的中间值临时存储起来,以便下次使用. 2.变量命名规范:数字.字母.下划线.建议驼峰体.变量名具有可描述性.不能使用中文和拼音.不能数字开头和使用关键字('and', 'as', ...

  6. Python 包：

    分享一波油藏描述方面的Python开源包 前一阵去捷克参加了数学地质年会(IAMG2018),听完汇报,发现在数学地质领域用python的越来越多了,他们的很多成果都是用python做出来的.不管喜不 ...

  7. 树形DP（超详细！！！）

    一.概念 1.什么是树型动态规划 树型动态规划就是在“树”的数据结构上的动态规划,平时作的动态规划都是线性的或者是建立在图上的,线性的动态规划有二种方向既向前和向后,相应的线性的动态规划有二种方法既顺 ...

  8. 【cf比赛记录】Codeforces Round #605 (Div. 3)

    比赛传送门 Div3真的是暴力杯,比div2还暴力吧(这不是明摆的嘛),所以对我这种一根筋的挺麻烦的,比如A题就自己没转过头来浪费了很久,后来才醒悟过来了.然后这次竟然还上分了...... A题:爆搜 ...

  9. 不同种类的ICP算法

    摘自<三维点云数据拼接中ICP及其改进算法综述>

  10. linux操作记录

    cd ~ 是返回根目录cd .. 跳转到上一页cd 目录 是跳转到目录文件 php -i | grep php.ini  是查看php.ini在哪个文件 vi 是查看文件内容,:i 是编辑文件内容 : ...