首先看这下面的例子（鼠标移上去）：
Link 1
Link 2
Link 3
Link N
菜单实例 |
类似这样的仿Windows下拉菜单，在网上是比较常见的，最初出现在微软网站上，之后被大量效仿。 事实上制作这样一个模拟菜单也并不是一件很困难的事，比如上面的例子代码如下： <![CDATA[-------------------------------------------
Link 1<br />
Link 2<br />
Link 3<br />
<br />
Link N<br />
菜单实例
-----------------------------------]]> 那么下面我们就由浅入深的对这种模拟菜单进行分析讲解。
在讲解之前，有一点需要说明的是：笔者在后面讲解的代码都基于当前的主流浏览器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[--------------------------------------------
鼠标移上来，通过className属性改变这段文字的class，使文字颜色变成红色；
移走，又恢复原来的颜色。
----------------------------------------------
]]>
效果如下（把鼠标放到文字上）：
我们看到，在处理相对复杂的样式变化的情况下，用className就方便得多了，至于样式如何变化，就变成如何定义class的问题了。
讲到这里，我想有一定CSS基础的朋友应该已经清楚如何来修饰这个菜单了，即便你对CSS了解的还不多，前面已经介绍了几个较常用的属性。所以，这里就不再多讲了，最后提供两个笔者做好的例子，希望你能从中受到启发（查看源文件即可看到相应的代码，相应位置加了注释，在此就不另行给出）。
1. 一个简单的背景变化
2. 仿office XP菜单效果
上面两例都用了灰色，你当然可以改成你自己喜欢的颜色。这两例也是比较常见的效果，这里提供给大家也算是抛砖引玉。相信开动你的脑筋、合理的运用掌
巧巧读书:http://www.qqread.com/dreamweaver/2006/10/x237973.html
进入讨论组讨论。
【深 度 阅 读】 相 关 文 章
相关专题
最新论坛文章
站内各频道最新更新文档
站内最新制作专题
热门关键字导读
站内频道文章精选
