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

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

导航条菜单的制作

最热最新

朔雪寒 07:48

JQuery

查看全部

0 采集收起来源：伸缩菜单的制作——水平方向
2016-04-09
姑娘小小

li{float: left; }

查看全部

0 采集收起来源：水平菜单的制作
2016-04-09
姑娘小小

a{text-decoration: none;} 可以把超链接的下划线去掉

查看全部

0 采集收起来源：垂直菜单的制作
2016-04-09
_莫忘初衷_

1、getElementsByTagName得到的是一个数组； 2、不管数组中有多少元素，要取出数组中的元素，只能用List[i]的方式取出，哪怕只有1个元素；所以，var oSubNav=this.getElementsByTagName("ul")[0]的[0]不能丢。

查看全部

0 采集收起来源：编程挑战
2018-03-22
_莫忘初衷_

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
_莫忘初衷_

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

查看全部

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

background-position:0 -30px;

查看全部

0 采集收起来源：圆角菜单的制作
2016-04-09
俺是种瓜低

text-indent:10px (文字缩进)

查看全部

0 采集收起来源：垂直菜单的制作
2016-04-09
qq_转角遇见_0

.nav { width:320px; height:30px; background-color:#CCC; margin:20px auto; } .nav li { list-style-type:none; float:left; margin-left:20px; } .nav a { text-decoration:none; width:80px; height:30px; display:block; line-height:30px; text-align:center; font-size:16px; color:#FFF; } .nav a:hover { background-color:#F90;/*动作背景颜色*/ font-size:16px; color:#fff; }

查看全部

0 采集收起来源：水平菜单的制作
2016-04-09
瓜瓜gua

导航条菜单制作总结 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上； -------> 雪碧图的应用--- background-position 4、在制作改变高度的伸缩菜单时，实现高度向上延伸的技巧： ----> margin-top用负值； 5、用JS制作水平伸缩菜单时，“this”代表当前的<a>标签。

查看全部

0 采集收起来源：总结
2018-03-22
whyQAQ

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

查看全部

0 采集收起来源：练习题
2018-03-22
半个西瓜

javascript

查看全部

0 采集收起来源：编程挑战
2016-04-08
半个西瓜

background-position:0 -30px;改变背景图片x轴Y轴的位置

查看全部

0 采集收起来源：编程练习
2016-04-08
糖桔

导航栏原来a高度是30px，当鼠标经过时，高度纵向上高出10px，并且字体保持居中，方法： a:hover{height:40px;margin-top:-10px;line-height:40px;} 使用margin的负值可实现向下移动

查看全部

0 采集收起来源：编程练习
2016-04-08
余祖勋

记得为不影响文本结构，在使用浮动的后面记得清除浮动

查看全部

0 采集收起来源：水平菜单的制作
2016-04-08