制作下拉菜单Tips&相关知识点复习

制作多级菜单

在第一层<li>标签下添加<ul>标签，创建二级菜单，在第二层<li>标签下添加<ul>标签，创建三级菜单…以此类推。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   <ul class="top_nav">          
	<li><a href="#">课程大厅</a> <!--一级菜单-->
		<ul>                  
			<li><a href="#">前端课程</a> <!--二级菜单-->
				<ul>          
					<li><a href="#">html</a></li> <!--三级菜单-->
					<li><a href="#">css</a></li>
					<li><a href="#">javascript</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">学习中心</a></li>
	<li><a href="#">关于我们</a></li>
</ul>

对所有li元素设置position：relative，对li元素下的子元素ul设置position：absolute，使下一级菜单相对于上一级菜单定位。

动画效果

鼠标停留在菜单上，以某种动画效果显示下一级菜单；鼠标离开，下一级菜单隐藏。

JavaScript实现

思路：
Step1:遍历所有<li>标签，为所有的li添加onmouseover和onmouseout事件；
Step2:如果此li下包含子元素ul（非孙辈），则把该子元素ul和指定属性的目标值作为参数传入move函数；
Step3:move函数：为传入的ul绑定定时器，设定速度（注意小数点），在指定属性现值不等于目标值的情况下，指定属性值为现值加速度，否则清除定时器。 为避免鼠标移动过快出现多个定时器，在move函数开头也需清除定时器；
Step4:获取html元素的属性值需要编写getStyle()函数；

jquery实现

1
2
3
4
5
6
$(document).ready(function(){
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('display','block')}).mouseout(function(){
$(this).children('ul').css('display','none');
});
})

CSS3实现

思路：使用transition属性实现;

知识点：

Transition:
用于在一定的时间内平滑的过渡，可以在鼠标点击，获取焦点，被点击或对元素任何改变中触发，并以圆滑的动画效果改变css属性的属性值。
取值：
<’ transition-property ‘>： 检索或设置对象中的参与过渡的属性
<’ transition-duration ‘>： 检索或设置对象过渡的持续时间
<’ transition-timing-function ‘>： 检索或设置对象中过渡的动画类型
<’ transition-delay ‘>： 检索或设置对象延迟过渡的时间
eg:
Transition-property: border-color, background-color, color
Transition-duration:.2s
Transition-timing-function:ease-in
Transition-delay:.1s
或
Transition:all,.2s,ease-in
设置transition属性后，需hover，focus等触发。
兼容：
IE10.0+, Firefox4.0-15.0(-moz-) 16.0+, Chrome4.0-25.0(-webkit-) 26+, Safari6.0(-webkit-) 6.1+, Opera15.0+