导航条菜单的制作_学习笔记

首页免费课导航条菜单的制作笔记

导航条菜单的制作

最热最新

qq_刘先森_

1.jS(原生代码)实现：动画开始前先清除一下定时器，避免动画累加。 window.onload=function (){ var aA=document.getElementByTagName('a'); for(var i=0;i<aA.length;i++){ aA[i].onmouseover=function (){ clearInterval(This.time); var This=this; /*把当前的this对象传进来*/ This.time=setInterval(function (){ This.style.width=This.offsetWidth+8+"px"; /*8是变宽的速度*/ if(This.offsetWidth>=160){ clearInterval(This.time); } },30); } aA[i].onmouseout=function (){ clearInterval(This.time); var This=this; This.time=setInterval(function (){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=120){ This.style.width="120px"; clearInterval(This.time); } },30); } } }; 2.jQuery实现：动画打开时，先把上一个动画清理掉（使用stop方法）。 $(function(){ $('a').hover( function(){ $(this).stop().animate({"width":"160px"}.200); } function(){ $(this).stop().animate({"width":"120px"}.200); } )) })

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2018-03-22
qq_刘先森_ 01:30

伸缩导航条的制作将圆角导航条上修改成伸缩导航条！去挑圆角贴图，给.on,a:hover加会原来的背景颜色。把a标签的背景图片删掉，给.on,a:hover添加高度，“重点”：margin可以用负值，相反方向移动。通过改变<a>标签的margin值，实现菜单项【向上增高】，同时让文字垂直居中。 a{height:30px;} a:hover{height:40px;margin-top:-10px;line-height:40px;}/*重点*/ 提示： margin可以用负值，向相反方向移动。改变a标签的高度height:40px，这样是向下增加的，再设置margin为负值，向反方向移动margin-top:10px，但文字也向上移动国，可设置a标签line-height:40px 最后居中，line-height

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2018-03-22
慕名而来1412 03:15

ul{list-style:none}去除圆点

查看全部

0 采集收起来源：垂直菜单的制作
2016-05-09
小菜地

伸缩菜单制作：水平方向，非JS（JS待学，因未涉及高度和宽度，不知道如何替换）

查看全部

0 采集收起来源：编程练习
2016-05-09
小菜地

<title>导航菜单内容随宽度自动伸缩</title> li和ul同时浮动，避免出现支架li被移，房子ul倒塌现象，不设置宽高，让导航栏宽度随内容自动伸缩;

查看全部

0 采集收起来源：编程练习
2018-03-22
Wang天鹏

实现导航栏动画伸缩的JS语句 <script> 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 >=160) clearInterval(This.time); },30) } aA[i].onmouseout=function(){ clearInterval(this.time); var This=this; this.time=setInterval(function(){ This.style.width=This.offsetWidth-8+"px"; if(This.offsetWidth<=120){ This.style.width='120px'; clearInterval(This.time); } },30) } } } </script>

查看全部

0 采集收起来源：编程练习
2018-03-22
Wang天鹏

JS伸缩动画的语句

查看全部

0 采集收起来源：编程练习
2016-05-09
白空阳

在Javascript中,this关键字永远都指向函数(方法)的所有者，在这题就是代表当前的<a>标签。 2、this.time里的time是自定义属性。在这题this.time=setInterval(function(){},30)就是代表给this定义一个time属性，并赋予setInterval(定时器)的功能

查看全部

0 采集收起来源：编程练习
2018-03-22
changesen

text-align:center 字体居中

查看全部

0 采集收起来源：编程练习
2016-05-08
映雪蝶儿

mark javascript

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2016-05-08
Dream0703

ul{list-style}=none

查看全部

0 采集收起来源：垂直菜单的制作
2016-05-08
weibo_后知_后觉z_03210521

学完JS再写

查看全部

0 采集收起来源：编程练习
2016-05-08
qq_刘先森_

菜单<li>浮动后，<li>脱离文档流，导致<ul>将失去高度和宽度；如果需要对<ul>进行整体背景设置，首先要给<ul>定义宽、高。

查看全部

0 采集收起来源：练习题
2018-03-22
左岸16

<body> <ul class="nav"> <li><a href="#">一级菜单</a> <ul class="subNav"> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li><a href="#">一级菜单</a> <ul class="subNav"> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> </ul> </body> </html>

查看全部

1 采集收起来源：编程挑战
2018-03-22
左岸16

<script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight+16+"px"; if(This.offsetHeight>=120) clearInterval(This.time); },30) } } //鼠标离开菜单，二级菜单动画收缩起来。 aLi[i].onmouseout=function(){ var oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight-16+"px"; if(This.offsetHeight<=0) clearInterval(This.time); },30)

查看全部

0 采集收起来源：编程挑战
2018-03-22