JS+css滑动菜单
制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错等等..
一.使用了如下HTML标记结构
ul // 菜单条块
li // 子项块
a // 菜单(链接)
div // 二级菜单块
二.主要样式设置
1.ul
list-style:none // 去掉前面圆点
其它样式,边框内外补等等
2.ul li
float:left;// 左浮,让菜单在同一行
3.ul li a
padding-bottom:.5em;// (关键)这个的用途在于将菜单项和滑动的菜单项重合,并且压在上面,防止鼠标移向二级菜单的中途,菜单消失(详见下文)
4.ul li div
display:none; // 开始时菜单隐藏
position:absolute;// 设绝对定位,它会相对于父级的li位置出现.
margin-top:4px; // 让菜单向下
li没有设置相对定位,所以div设为绝对定位时,也不指定位置
三.脚本简单,只有几句
1. a的mouseover和mouseout
鼠标指向和移出菜单标题时.将div显示或隐藏
2. div的mouseover和mouseout
鼠标指向和移出二级菜单区域时,将自身显示或隐藏
四.鼠标移动时菜单消失问题
当鼠标指向菜单时,二级菜单显示了,这时如果鼠标移动到二级菜单上时,如果移动速度较慢,会发现二级菜单消失了.因为脚本写过当鼠标
移出菜单标题时,二级菜单隐藏.此时二级菜单和菜单标题之间是有一些间隙的,所以只要保证它两之间有一丝重合,就能让鼠标完美过渡到
二级菜单上,而不发生烦人的菜单消失问题.
五.示例:请用鼠标指向下面的菜单标题
//