zoukankan      html  css  js  c++  java
  • 网页中的下拉式菜单

    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就可以。


    主要是参考了这篇文章提到的资源:

    30个浏览器当中常用的菜单插件和脚本








  • 相关阅读:
    优先队列
    Problem W UVA 662 二十三 Fast Food
    UVA 607 二十二 Scheduling Lectures
    UVA 590 二十一 Always on the run
    UVA 442 二十 Matrix Chain Multiplication
    UVA 437 十九 The Tower of Babylon
    UVA 10254 十八 The Priest Mathematician
    UVA 10453 十七 Make Palindrome
    UVA 10163 十六 Storage Keepers
    UVA 1252 十五 Twenty Questions
  • 原文地址:https://www.cnblogs.com/leftfist/p/4258082.html
Copyright © 2011-2022 走看看