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; 100px;
     height: 30px;line-height: 30px;
     text-aligin:center;    }

颜色以及细节修改

设置导航栏默认颜色，并且通过margin属性是导航标签产生间隔。
将导航栏四个角通过border-radius设置成圆角。
通过给a标签属性设置class=on，以及伪类选择器a:hover将【首页】和【鼠标滑过】的样式颜色设置为#f60，字体颜色设置为白色。

li a{
    display:block;
     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;
				 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
来源：简书