JS+css滑动菜单简单实现

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
            鼠标指向和移出二级菜单区域时,将自身显示或隐藏
四.鼠标移动时菜单消失问题
          当鼠标指向菜单时,二级菜单显示了,这时如果鼠标移动到二级菜单上时,如果移动速度较慢,会发现二级菜单消失了.因为脚本写过当鼠标
        移出菜单标题时,二级菜单隐藏.此时二级菜单和菜单标题之间是有一些间隙的,所以只要保证它两之间有一丝重合,就能让鼠标完美过渡到
        二级菜单上,而不发生烦人的菜单消失问题.
五.示例:请用鼠标指向下面的菜单标题

生活

二级菜单生活
科学
二级菜单科学
自然
二级菜单自然
神学
二级菜单神学

巴特西

JS+css滑动菜单简单实现

最新文章

热门文章