|
网页菜单详解
首先看这下面的例子（鼠标移上去）：
类似这样的仿Windows下拉菜单，在网上是比较常见的，最初出现在微软网站上，之后被大量效仿。 事实上制作这样一个模拟菜单也并不是一件很困难的事，比如上面的例子代码如下： <![CDATA[-------------------------------------------
<!-- 样式部分 -->
<style type=text/css>
td,div { font: normal 12px 宋体; }
a { color: #F8F8F8; text-decoration: none; }
a:hover { color: #F8F8F8; text-decoration: underline; }
</style>
<!-- 实现部分 -->
<div style="background-color:#3366CC;width:68px;text-align:center;
padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"
onmouseover="myMenu.style.display='block'"
onmouseout="myMenu.style.display='none'">
<div style="position:absolute;width:0px;height:0px;overflow:visible;">
<div id=myMenu style="position:absolute;left:-10px;top:18px;display:none;
width:90px;background-color:#3366CC;padding:5px;text-align:left;">
<a href=#none>Link 1</a><br>
<a href=#none>Link 2</a><br>
<a href=#none>Link 3</a><br>
<a>...</a><br>
<a href=#none>Link N</a><br>
</div>
</div>
<a href=#none>菜单实例</a>
</div>
-----------------------------------]]> 那么下面我们就由浅入深的对这种模拟菜单进行分析讲解。
在讲解之前，有一点需要说明的是：笔者在后面讲解的代码都基于当前的主流浏览器Microsoft Internet Explorer（即我们通常所说的IE）下的。笔者进行调试的浏览器是IE 5.01。另外，这样一个菜单体现的是HTML/CSS/JavaScript的综合应用，这里并不对一些细节进行详细的讲解，所以你至少应该有一点这方面的基础。
基本原理
其实，这个菜单实现的原理简单的说就是：设置页面元素的CSS属性，对其进行定位并设置其是否可见，然后通过激发一定的事件，用JavaScript来动态的改变这些属性。
看下面几个CSS属性：
position：定位类型，取值static/absolute/relative，其代表的含义简单的说即无定位/绝对定位/相对定位；
left：距离左侧的位置（具体的参照物与position的设置有关），单位为px或%；
top：距离顶部的位置（具体的参照物与position的设置有关），单位为px或%。
display：页面元素的显示状态，如取值block表示做为块状元素显示，none则为不显示，还有其他一些取值（如inline等）这里就不做详解。
比如上例中的“div id=myMenu style="position:absolute;left:-10px;top:18px;display:none...”就是使用了这几个属性。
下面我们来看看如何用JavaScript来控制页面元素的CSS属性。
对HTML有一定了解的朋友一定清楚，几乎所有的标记都有一个style属性，通过设置这个属性来设置该标记的CSS属性（即CSS的内联用法）。在JavaScript中，每一个标记都被视为Document对象的一个子对象，而该标记的每一个HTML属性也都是这个对象的属性或子对象，style就是其中一个，通过用JavaScript控制style的属性，就达到了动态改变页面元素CSS属性的目的。如上例中的“onmouseover="myMenu.style.display='block'"”就是一个很普通的用法，其中myMenu即我们所看到的“菜单”的ID，它原来的display为none，即不显示，当鼠标移上去时，变为block，即块状显示。
另外要提的是：前面只说了如何实现定位、如何动态控制，那么定位的、控制的是什么元素呢？原则上来讲，大部分块状元素（如div、table）都可以，而在IE中，div标记（注意，在一些非IE浏览器中，并不支持div标记）因其使用的灵活性和方便性而做为我们的首选。上例使用的就是div标记。
好啦，基本的过程，上面大致已经说完了，在下一章，我们将看到使用上面提到的技术来实现一个简单的菜单。
模拟网页下拉菜单中有几个比较关键的CSS属性：position、left、top、display，同时，他们也是style对象的属性,今天我们就用这几个基本属性来实现一个简单的网页菜单。
首先请大家看笔者已经做好的一个实例，然后我们对这个例子进行详细代码讲解。
为大家阅读方便，这里采用在代码中加注释的方式，红色部分为注释。
代码如下：
------------------------------------------------------
<html>
<head>
<title>菜单实例</title>
<style type=text/css>
td,div { font: normal 12px 宋体; }
</style>
</head>
<body style="margin-left:12px;margin-top:16px;">
<table cellpadding=0 cellspacing=0 width=90% height=20 bgcolor=#CCCCCC>
<tr>
<td width=10> </td>
<td width=80 align=center onmouseover="menuShow(menu01)"
onmouseout="menuHide(menu01)">菜单实例</td>
<!--
上两行为菜单中显示的文字，注意这里面的事件触发：
onmouseover="menuShow(menu01)" 鼠标经过时显示菜单；
onmouseout="menuHide(menu01)" 鼠标移走时隐藏菜单。
参数menu01即要显示的菜单的id，将在接下来的代码中看到。
menuShow与menuHide分别为显示、隐藏菜单方法，将在后面定义。
-->
<td> </td>
</tr>
</table>
<div style="position:absolute;top:36px;left:20px;display:none;
width:80px;height:100px;background-color:#DDDDDD;" id=menu01
onmouseover="menuShow(this)" onmouseout="menuHide(this)">
<!--
以上三行，定义了菜单的一些属性，注意“id=menu01”，前面提到过。
position、top、left、display四个CSS属性即上一章讲过的；
width、height、background-color分别为宽度、高度、背景色。
这里再一次出现onmouseover="menuShow(this)" onmouseout="menuHide(this)"，
就是说当鼠标从菜单按钮上移开，如果是移到了菜单上，菜单仍然显示。
注意这里参数是this而不是menu01，this即对象本身，在这里就是指menu01，所以结果相同。
在这里笔者有意使用this，只是想告诉大家一个技巧，这在很多时候非常方便。
-->
<br> 菜单内容
</div>
<script language=javascript>
function menuShow(menu) //定义显示菜单的方法，参数menu即菜单的id。
{
menu.style.display='block';
//注意这里如何用JavaScript改变style对象的属性来达到改变CSS属性的目的。
}
function menuHide(menu) //定义隐藏菜单的方法，参数menu即菜单的id。
{
menu.style.display='none';
//同上
}
</script>
</body>
</html>
------------------------------------------------------ 这样，一个简单的菜单就实现了，只要你略有一些相关的基础知识，反复体会一下我加的注释，就应该可以理解了，是不是并不难？
这个菜单现在看上去还有点简陋，下次我们将对这个菜单进行进一步的修饰。
这一章，我们就来讨论如何美化它。
美化主要表现在鼠标放到菜单上后（即鼠标悬停）的效果，这里首先介绍几个经常用到的CSS属性：
background-color：背景色，其值为一个颜色值，如“#FF0000”、“red”。
border：边框样式，一个形如“宽度 样式 颜色”的字符串，如“1px solid red”，即1px的红色实线边框。
cursor：鼠标指针样式，取值为表示鼠标指针样式的字符串，如“hand”、“help”，即小手、帮助状态。
以上只是简单的介绍了几个在此类菜单中非常常见的CSS属性，这里也并未做很详尽的解释（毕竟这些并不是我们要讲解的重点），欲了解更多可参阅相关资料。笔者在这里想说的是：掌握更多的CSS属性会对你有所帮助。
前面说了，美化主要表现在鼠标放到菜单上后的效果，那么如何用JavaScript来控制样式的变化呢？或者你会想到前面讲过的style对象，的确，用style可以达到目的，但是，很多时候，需要改变很多个CSS属性，用style就显得有些麻烦。我们再来介绍一个新的属性：className。
className属性对应的就是CSS的class，也即所谓的伪类，比如在某个标记中设置class=myName，那么这时该元素的className属性就是myName。
来看下面这个例子： <![CDATA[--------------------------------------------
<style type="text/css">
.style_normal { color: gray; }
.style_over { color: red; }
</style>
<span class=style_normal onmouseover="this.className='style_over'"
onmouseout="this.className='style_normal'">
鼠标移上来，通过className属性改变这段文字的class，使文字颜色变成红色；
移走，又恢复原来的颜色。</span>
----------------------------------------------
]]>
效果如下（把鼠标放到文字上）：
我们看到，在处理相对复杂的样式变化的情况下，用className就方便得多了，至于样式如何变化，就变成如何定义class的问题了。
讲到这里，我想有一定CSS基础的朋友应该已经清楚如何来修饰这个菜单了，即便你对CSS了解的还不多，前面已经介绍了几个较常用的属性。所以，这里就不再多讲了，最后提供两个笔者做好的例子，希望你能从中受到启发（查看源文件即可看到相应的代码，相应位置加了注释，在此就不另行给出）。
1. 一个简单的背景变化
2. 仿Office XP菜单效果
上面两例都用了灰色，你当然可以改成你自己喜欢的颜色。这两例也是比较常见的效果，这里提供给大家也算是抛砖引玉。相信开动你的脑筋、合理的运用掌握的技术，会做出更漂亮的效果！
通过前三篇文章的讲解，现在我们已经可以实现一个基本的菜单了。这一章，我们来讨论一下定位的问题。
在前几章讲的例子中，定位都是相对于整个网页的左上角。在有一些时候，我们可能需要它相对于网页中某个元素定位，这样做在某些时候是非常有必要的，比如不会出现那种因窗口大小的改变而致使菜单与网页中的一些元素的相对位置发生变化。在第一章的最初，笔者所给的例子中就是这样做的。
在那里我们很方便把就把这个菜单插入到了网页中，而菜单不会相对菜单按钮的位置发生变化。下面我们就看看如何来实现。
在第一章，我们讲过position，当它取值absolute的时候，即绝对定位。既然是定位，就要有参照物。一般来讲，这个定位的参照物是body（即整个网页）的左上角，但如果其父级元素中有设置了position:absolute的元素，那么它的参照物就是该元素。知道了这样一个特性，我们就可以很容易的来实现了。
另外，有一点在这里必须要着重说明一下，前面同时也讲过，当position的值为relative时，就是相对定位，为什么不用它来实现呢？我们必须要正确理解这里所谓的相对定位：它是指相对于原来在HTML中的位置所发生的偏移，而它仍占据原来在HTML中所占据的位置。而我们现在的菜单需要“悬浮”在网页元素之上，而这只有当position设为absolute时才可以做到。
通过上面的讲述，我们应该可以大致的了解其实现的原理了。下面就看看刚才在上面看到的那个菜单的代码（注意里面的注释会帮你加深理解）。
-------------------------------------------------------------------------------<![CDATA[<style type=text/css>
td,div { font: normal 12px 宋体; }
a { color: #F8F8F8; text-decoration: none; }
a:hover { color: #F8F8F8; text-decoration: underline; }
</style>
<div style="background-color:#3366CC;width:68px;text-align:center;
padding:3px;border-bottom:1px solid #FFFFFF;z-index:1;"
onmouseover="myMenu.style.display='block'"
onmouseout="myMenu.style.display='none'">
<!--上面的DIV就是我们看到的按钮部分，它并未涉及任何定位的部分，
不要与下面两个混淆。-->
<div style="position:absolute;width:0px;height:0px;overflow:visible;">
<!--注意上面的DIV，设置了position:absolute，但是并没有设置left/top，
所以这时它仍与一个普通的HTML元素一样，出现在它应该出现的位置。-->
<div id=myMenu style="position:absolute;left:-10px;top:18px;
display:none;width:90px;background-color:#3366CC;
padding:5px;text-align:left;">
<!--它的定位是相对于前一个DIV而不是Body，
因为前一个DIV设置了position:absolute-->
<a href=#none>Link 1</a><br>
<a href=#none>Link 2</a><br>
<a href=#none>Link 3</a><br>
<a>...</a><br>
<a href=#none>Link N</a><br>
</div>
</div>
<a href=#none>菜单实例</a>
</div>]]>-------------------------------------------
请仔细理解上面的代码，相信大家对用CSS进行绝对定位会有一个更深层次的认识！
这里说一句题外话：这种定位可以用Dreamweaver来实现（这对于对JS不是很熟的朋友来讲的确很方便），而事实上这样做生成的代码的原理与上面讲的相同的。把上面讲的原理弄清楚了，使用起来会更灵活。
|
