用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. ftp上传文件时遇到: ftplib.error_perm: 553 Could not create file

    问题描述 今天在使用python的ftplib模块上传文件时,碰到了这样的问题: ftplib.error_perm: 553 Could not create file. 原因 原因是FTP下对应的 ...

  2. Springboot jackSon -序列化-详解

    在项目中有事需要对值为NULL的对象中Field不做序列化输入配置方式如下: [配置类型]: 源码包中的枚举类: public static enum Include { ALWAYS, NON_NU ...

  3. c# 第14节 字符方法、转义字符、字符串的方法

    本节内容: 1:字符的定义 2:字符的方法 3: 转义字符 4:字符串简介 5:字符串方法 1:字符的定义 char与Unicode一一对应,一个char 2个字节. 2:字符的使用方法: 实例: s ...

  4. 201871010102-常龙龙《面向对象程序设计（java）》第七周学习总结

    二.博文正文开头格式: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/ ...

  5. uiautomator输入中文实例

    package com.demo3; import jp.jun_nama.test.utf7ime.helper.Utf7ImeHelper; import com.android.uiautoma ...

  6. python27期day12：推导式、内置函数、高阶函数、匿名函数、作业题

    1.推导式:做一些有规律的数据结构 列表推导式: 普通循环模式: [加工后的变量 for 循环] 示例一:print([i for i in range(1,51)]) 结果:[1, 2, 3, 4, ...

  7. NOIP 2005 采药

    洛谷 P1048 采药 洛谷传送门 JDOJ 1277: [NOIP2005]采药 T3 JDOJ传送门 Description ​ 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他 ...

  8. AWS云教育账号创建以及搭建数据库

    注册过程繁琐,本文强调关键几点 首先拿到aws的二维码,进入之后填写相关个人信息,用学校邮箱注册,用学校邮箱注册!! 之后审核会有大约10分钟的过程,之后会收到确认邮件 点进去之后就可以设置自己的密码 ...

  9. <Trie> 212 <Array> 229

    212. Word Search II class TrieNode{ char val; TrieNode[] children; String word; public TrieNode(char ...

  10. CSP2019滚粗记

    CSP2019滚粗记 从不拖更 Day -inf 考完月考才停课\kel,然后月考又被吊打了. Day -1 和左边的\({\text L}\color{red} {\text{ongge}}\)右边 ...