这是一个非常简单的菜单，虽然简单，但我们可以从这个示例中学习到一些有关CSS和JavaScripts的一些有关知识，对于认识下拉式菜单的制作原理和基础有很大的好处。在这个示例中，我用到了DIV标识来作为我的下拉菜单列，而用一个TABLE来做我的菜单头。原理就是通过识别鼠标移动来开关下拉菜单列的显示属性。
下面是这个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 的函数，这是用来获取下拉菜单列的显示位置的。
相关视频
相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
热门文章
360快剪辑怎么使用 36
金山词霸如何屏幕取词
百度收购PPS已敲定！3
最新文章
微信3.6.0测试版更新了
微信支付漏洞会造成哪
360快剪辑怎么使用 360快剪辑软件使用方法介酷骑单车是什么 酷骑单车有什么用Apple pay与支付宝有什么区别 Apple pay与贝贝特卖是正品吗 贝贝特卖网可靠吗
人气排行 xp系统停止服务怎么办?xp系统升级win7系统方电脑闹钟怎么设置 win7电脑闹钟怎么设置office2013安装教程图解：手把手教你安装与qq影音闪退怎么办 QQ影音闪退解决方法VeryCD镜像网站逐个数，电驴资料库全集同步推是什么？同步推使用方法介绍QQ2012什么时候出 最新版下载EDiary——一款好用的电子日记本
查看所有0条评论>>