原文来自：Two CSS Vertical Menu With Show/Hide Effects
翻译整理：西米CC – WordPress外贸建站 | WordPress企业建站
网页设计中如何结合CSS菜单与Web2.0过渡效果是一个非常热门的话题，在本文中将阐述两则关于这方面的设计方法。其中一个比较简单，只是单纯的显示/隐藏效果，通过CSS和一些简单的JS实现；另外一个菜单的收缩和展开带有过渡效果，需要借助mootool来辅助实现：
在提供下载的源码中，包含了本例用到的mootool文件，如果你有这个基础可以去研究一下。现在网络上很多关于CSS的教程中都有关于它的应用，可以为你的网页增加很多不错的效果：
完整实例源文件下载：moomenu.rar
1.1 简单缩展菜单Step1：HTML代码
第一例缩展菜单的显示/隐藏效果比较生硬，只是很直接的出现、消失，涉及的JS代码也只有几行而已。整个例子主要有三个部分：一个ul列表、一个设置了链接的botton按钮、一段名为showElement()的JS代码。首先来看一下它的HTML结构：
注意UL标签中的display:none属性设置，它的作用是让菜单在浏览器加载时默认处于收缩状态，只有当用户点击按钮时，菜单才会显示出来。
1.2 简单缩展菜单Step2：JS代码
把下面的JS代码添加到页面的head区域，通过它来控制一些HTML元素的display属性变化：
showElement()函数以一个HTML元素的ID值为参数，控制该元素的显示或隐藏。当用户点击链接按钮时，值原为none的元素对象display属性将变更为block。
2.1 Mootool过渡效果的缩展菜单Step1：HTML代码
第二个菜单实例在收缩和展开的过程中带有平滑的过渡效果，HTML结构中有一些细微的区别：
我们要在a标签中设置一个名为toggle的ID值，但在第一个例子中我们为UL设置的display:none在这里已经不需要了，因为在本例中菜单的默认隐藏我们是通过mootools中的hide()函数来实现的。
2.2 Mootool过渡效果Step2：JavaScript/Mootools 代码
首先我们在页面的
区域中添加JS调用代码：然后再上面那行代码的后面添加下列JS：
代码中的myMenu.hide();函数将菜单设置为默认隐藏。另外如果你想定制自己的CSS菜单外观，只需要对源文件中的下列样式代码进行修改就可以了：
完整实例源文件下载：moomenu.rar