导航条菜单的制作

垂直菜单的制作

1.用ul无序列列表构建菜单
2.清除默认样式 {margin:0;padding:0;} { }（用于全局设置）
清除ul的样式 ul{list-style：none}，能去掉前面的默认小圆点
去掉a标签的下划线 a{text-decoration：none} 在导航栏中经常用
height: 30px;line-height: 30px;可使文字垂直居中。
3.如果用为文字前面增加像素，最好用缩进的方式来实现
{text-indent：xx px}（文本缩进,用text-indent替换padding-left，是为了防止菜单长度增加。例如：padding-left:10px; 会导致宽度也增加10px ）
4.ul li a{}因为a标签是最内部的元素 所以对a标签设置就可以了 又因为a为内联元素，而块状元素才可以设置 宽度 高度，所以要把a设置为块级元素：ul li a{display:block;}
5.hover鼠标移动触发效果

水平菜单的制作

设置水平菜单导航栏
在垂直菜单导航栏样式基础上修改：
1、设置li为左浮动
2、将ul限制宽度去掉
3、设置文本居中，text-align:center,将之前的text-indent（文本缩进）属性删掉

圆角菜单的制作

1.圆角菜单的制作，通过设置背景，改变外观样式。
通过a：hover，可以为菜单增加交互效果。
2.横向菜单与圆角菜单的却别是：为ul增加一个 装饰线 border-bottom、为a标签添加圆角背景，宽与高相适应、有一个默认的选中状态，所以要为a标签加上一个class”on” 在为它的样式添加上一个on，最后一动它的位置（y，x）
例：background-position: 15px 20px;(指将图片向右移15px,向下移20px;)
简单地说，就是以图片的左上角顶点为原点，往下和右都为正，反之为负

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

伸缩菜单的制作——改变高度

当鼠标移动到相应的导航菜单一栏时，使相应的高度向上延伸：
1.增加高度；
2.margin用负数，向反方向移动（例：margin-top：-20px），整体就向上移动了20px

伸缩菜单的制作——水平方向

1.jS(原生代码)实现：动画开始前先清除一下定时器，避免动画累加。

window.onload=function(){
var aA = document.getElementsByIagName('a'); /*查找所有的a标签元素*/
for(var i=0; i<aA.length; i++){
aA[i].onmouseover = function(){ /*获取a标签的鼠标事件*/
clearInterval(This.time); /*防止累加*/
var This = this; /*把当前的this 对象传进来*/
This.time = setInterval(function(){
This.style.width = This.offsetWidth + 8 + "px"; 
if(This.offsetWidth >= 160){ /*如果当前对象的宽度 大于 160*/
clearInterval(This.time); /*就停止当前时间*/
}
},30) 
}

aA[i].onmouseout = function(){ /*获取a标签的鼠标移除事件*/
clearInterval(This.time); /*防止累加*/
var This = this; /*把当前的this 对象传进来*/
This.time = setInterval(function(){
This.style.width = This.offsetWidth - 8 + "px"; 
if(This.offsetWidth <= 120){ /*如果当前对象的宽度 大于 160*/
This.style.width = "120px";
clearInterval(This.time); /*就停止当前时间*/
}
},30) 

}
}

总结

导航条菜单制作总结

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