10几年前,我就在网页中用JS脚本实现下拉式菜单,并且导航条还与主窗口处于不同的帧。无非就是些onmouseover,onmouseout之类的事件罢了。这种效果,只要舍得花时间,一万年总可以做出来,但我并不觉得这有什么技术含量,只觉繁琐得很,无聊得很。你实现了又能怎么样呢,说明你的技术就比别人强?雕虫小技罢了。可叹,10几年前,我已经开始用javascript,到现在,却没有丝毫长进,非但如此,javascript代码我却越来越看不明白了。主要是它语法太灵活,有好多写法我都不知道是什么意思,也懒得钻研,日复一日,年复一年,转眼老之将至,成为一个即将被淘汰的老代码工。
现在我知道鸟,不用onmouseover,onmouseout也可以实现下拉菜单。就用CSS。
其原理在于:hover。
hover,CSS一个伪类。“这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。”。我一直以为只会用在超链接上,但其实,象<LI>、<DIV>都可以的。
象下面这个例子,就是先将子菜单隐藏起来:并非是visible=none,而是位置处于屏幕外,等鼠标移到父菜单项上,就将位置定义在可见范围内,看上去,就好象菜单弹出来了。这一切,都在CSS中定义,不用写一句JS代码。
关键的CSS语句,注意其中的2个top:
.sf-menu ul { position: absolute; top: -999em; 10em; /* left offset of submenus need to match (see below) */ } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; }
完整的HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>下拉菜单</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> .sf-menu ul { position: absolute; top: -999em; 10em; /* left offset of submenus need to match (see below) */ } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } .sf-menu li { float: left; position: relative; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' 非必要 */ } .sf-menu ul li { 100%; /* 保证每个子菜单都独占一行 */ } </style> </head> <body> <ul class="sf-menu"> <li> 【有子菜单】 <ul> <li> [子菜单0] </li> <li> [子菜单1] </li> </ul> </li> <li> 【无子菜单】 </li> </ul> </body> </html>
但是IE6不支持这种方式。不过引用下面说的资源中的JS就可以。
主要是参考了这篇文章提到的资源: