用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. debian apt-get 代理

    一:在 /etc/apt/目录下建立 apt.conf 文件增加如下 Acquire::http::Proxy "http://proxyxxxxxxx:port"; 注意格式:最 ...

  2. 201871010135 张玉晶《面向对象程序设计（java）》第十五周学习总结

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

  3. maven配置阿里云国内仓库

    <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http:/ ...

  4. Windows解决端口占用问题

    Windows解决端口占用问题 步骤 1. win + R,输入cmd回车进入dos界面 2. 输入netstat -ano|findstr 8080 查看占用8080端口的进程 3. 输入taskk ...

  5. 2016年蓝桥别A组模拟训练

    1. 网友年龄 某君新认识一网友. 当问及年龄时,他的网友说: “我的年龄是个2位数,我比儿子大27岁, 如果把我的年龄的两位数字交换位置,刚好就是我儿子的年龄” 请你计算:网友的年龄一共有多少种可能 ...

  6. [LeetCode] 12. Integer to Roman 整数转化成罗马数字

    Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 ...

  7. 第04组 团队Git现场编程实战

    组员职责分工 组员 分工 林涛(组长) 分配任务.整理数据.写博客 童圣滔 UI界面制作 林红莲 UI界面制作 潘雨佳 测评出福州最受欢迎的商圈 于瀚翔 测评出福州最受欢迎的商圈 覃鸿浩 测评出福州人 ...

  8. 关于一些规范：main()函数的返回值 mingw和mingw-w64编译器的区别

    深度剖析c语言main函数---main函数的返回值 - 编程随笔与杂谈 - CSDN博客 https://blog.csdn.net/z_ryan/article/details/80979008 ...

  9. Python连载27-log日志

    一.log 1.推荐网站:https://www.cnblogs.com/yyds/p/6901864.html 该网站为日志处理logging模块简介 2.logging模块提供模块级别的函数记录日 ...

  10. PDF提取图片（错误纠正）

    有个任务需要抽取pdf中的图片,于是找了一个例子但是有错误,仅此记录下 错误1. AttributeError: 'Document' object has no attribute 'getObje ...