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

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

导航条菜单的制作

最热最新

巴黎的猫

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

查看全部

0 采集收起来源：练习题
2018-03-22
_莫忘初衷_

这里使用一张背景图片的位移实现圆角的

查看全部

0 采集收起来源：圆角菜单的制作
2016-05-12
慕粉3315603

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
慕粉3315603

onmouseover , 鼠标移过； onmouseout , 鼠标离开； setIntervel , 不停地调用函数； clearInterval , 取消 setInterval 函数的运行； this , 提取这个函数的值； offsetWidth , 元素内可见区域的宽度 + 元素边框宽度（如果有滚动条还要包括滚动条的宽度）； clientWidth , 元素内可见区域的宽度； scrollWidth , 元素的全文宽度（如果有滚动条，那么这个宽度还包括滚动条能滚动到的所有区域）；

查看全部

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

要先清除缓存，不然会累加

查看全部

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

border-radius

查看全部

0 采集收起来源：圆角菜单的制作
2016-05-11
小菜地

a:hover li:hover why234撑不起来？

查看全部

0 采集收起来源：编程挑战
2016-05-11
UFO2015

<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
苏苏爱学习3303578 01:28

margin负值可以向相反方向移动

查看全部

0 采集收起来源：伸缩菜单的制作——改变高度
2016-05-10
lt_大胡子

.nav li a.on, .nav li a:hover{ background-position:0 -30px; color:#fff;}

查看全部

0 采集收起来源：编程练习
2016-05-10
秋山君

margin-top:-10px;鼠标经过的时候，使上边距减少10px。唉，要多看几遍才能理解喔字体居中的方式，最好是line-height:然后如果想要使box向上移动可以使用margin-top:-10px;使用margin-top的负数就可以使完成相反方向的移动！

查看全部

0 采集收起来源：编程练习
2016-05-10
秋山君

background-position 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

查看全部

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

这里很重要，终于解决了。记住：li浮动后，ul将失去宽高度，如要设置ul整体背景需要定义好ul宽高

查看全部

0 采集收起来源：练习题
2016-05-10
张小丹and

移入一级菜单显示二级菜单不会

查看全部

0 采集收起来源：编程挑战
2016-05-10
张小丹and

伸缩菜单动画不会

查看全部

0 采集收起来源：编程练习
2016-05-10