神马文学网DIV下拉式菜单1
来源：百度文库 编辑：神马文学网 时间：2024/05/23 19:29:04
下面是这个DIV菜单的效果，你可单击页面任何空白地来取消下拉菜单的显示。
杂志技术站点 门户站点 个人收藏站点
天极网 Yesky.com
电脑商情报
新潮电子
新浪网 Sina
搜狐 Sohu
网易 Netease
耗子网络编程站
中国同学录
中国软件开发网
好了，如果我告诉你，这样的效果也就几十行的代码，你信吗？不管怎么样，让我们来一步一步学习这个菜单是怎么做出来的。Step-by-Step，Let‘s go.
第一步，你需要定义一下菜单项和菜单列的 CSS层叠样式表，这里，如果你不知道CSS是什么意思，请参阅《电脑报网站》的有关CSS的教程。我们定义两个CSS的Class，一个是Meun，另一个是SubMenu， Menu定义了显示在菜单顶上的样式，而Submenu定义了下拉菜单列的显示样式。这里，需要注意的是Submenu中的“position:absolute;width:200”CSS属性，这是必须的，因为这决定了我们显示这个Submenu的位置。而其它的CSS的属性是可要可不要的。下面是这两个CSS Class的描述，你可以把下面这段话放在网的
第二步，我们来看一下隐藏和显示下拉菜单列的Javascript的代码。这段代码非常简单，只要学过一点JavaScripts的人应该是很容易看懂的。如果你不懂Javascript的话，也请参阅《电脑报网站》上的有关JavaScripts的文章。这段代码的含义是，无论什么时候，只要鼠标一进入菜单项（Menu）元件中，那么它的下拉菜单列就会被一个叫Show函数显现出来。这个Show函数主要功能是显示当前的下拉菜单列，并隐藏其它的菜单列，并把当前所显示的菜单项放入变量cm中。另外，在这里，我还加入了一个简单的鼠标单击事件（onclick）句柄，当鼠标单击网页时，就隐藏所有的下拉菜单列。下面，我给出了整个Javascript的程序，其中有一个叫 getPos 的函数，这是用来获取下拉菜单列的显示位置的。
你可以把这段程序放在
标识之间，或是网页的任意位置。接下来，我们还要定义我们的实际菜单项了，这里我们要给每一个菜单项加上一个鼠标的移动事件(OnMouseOver)句柄，并且让这个事件调用我们上面定义的Show函数。也就是说，当鼠标一进入我们的菜单项中，我们的show函数就开始执行了。这里，我们还要给我们的每个菜单项定义一个ID号，并且把其下拉菜单列的ID名传入Show函数中，这对我们控制下拉菜单列很关键，下面我给出了菜单项的HTML语法描述：
| 杂志技术站点 | 门户站点 | 个人收藏站点 |
最后，我们要定义我们的下拉菜单列了。每一个下拉菜单列，我们都要赋予其Submenu的CSS属性，和一个ID名字好让我们的Show函数控制它，最后，我们让他的默认显示方式为none，也就是让它不显示。这是给它的Display样式赋值“none”来实现的。下面，我给出了下拉菜单列的HTML语法描述：
这就是全部的过程了，有了以上四个步骤，你一定可以看见一个菜单了，把它放在你的网页上吧，一定会很漂亮的。当然，你也可以自己试着改变一下菜单的属性，让它更像一个菜单。