用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. jquery实现一些小动画二

    jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...

  2. 初识V4l2（二）-------浅析video_register_device

    在V4l2初识(一)中,我们已经知道当插上一个摄像头的时候,在uvc_driver.c中最终会调用函数video_register_device函数.接下来我们就简要分析这个函数做了哪些事情,揭开其神 ...

  3. 09-tensorflow-tf.split()

    # 'value' is a tensor with shape [5, 30] # Split 'value' into 3 tensors with sizes [4, 15, 11] along ...

  4. mwArray和cv::Mat转化函数 20170812

    不是新东西了,但是有必要专门把这两个函数拿出来记录一下. 需要注意的是,Mat2mwArry函数的输入Mat类型是 CV_8UC1,灰度图. 如果要传递多通道图像的话,需要先cv::split()成多 ...

  5. zz独家专访AI大神贾扬清：我为什么选择加入阿里巴巴？

    独家专访AI大神贾扬清:我为什么选择加入阿里巴巴? Natalie.Cai 拥有的都是侥幸,失去的都是人生 ​关注她 5 人赞同了该文章 本文由 「AI前线」原创,原文链接:独家专访AI大神贾扬清:我 ...

  6. vue中使用kindeditor富文本编辑器2

    第一步,下载依赖 yarn add kindeditor 第二步,建立kindeditor.vue组件 <template> <div class="kindeditor& ...

  7. Ultimate Chicken Horse GameProject需求规格报告书

    团队名称:超级鸡马 成员: 身份 姓名 分工 组长 邱志明  主程序设计 组员 吴钧诚  界面设计 组员 李承哲  陷阱设计 组员 冯英炽  客户,参与测试和需求分析工作 组员 林裕权  素材确定 修 ...

  8. [LeetCode] 907. Sum of Subarray Minimums 子数组最小值之和

    Given an array of integers A, find the sum of min(B), where B ranges over every (contiguous) subarra ...

  9. [LeetCode] 659. Split Array into Consecutive Subsequences 将数组分割成连续子序列

    You are given an integer array sorted in ascending order (may contain duplicates), you need to split ...

  10. find sum and average of n numbers

    public class Solution { public static void main(String[] args) { Scanner ip = new Scanner(System.in) ...