专注优质Wordpress企业网站搭建与优化

一花一世界 – CSS实例教程：收缩展开效果CSS垂直菜单两则



CSS实例教程：收缩展开效果CSS垂直菜单两则

原文来自：Two CSS Vertical Menu With Show/Hide Effects

翻译整理：西米CC

网页设计中如何结合CSS菜单与Web2.0过渡效果是一个非常热门的话题，在本文中将阐述两则关于这方面的设计方法。其中一个比较简单，只是单纯的显示/隐藏效果，通过CSS和一些简单的JS实现；另外一个菜单的收缩和展开带有过渡效果，需要借助mootool来辅助实现：

收缩展开效果CSS垂直菜单两则

在提供下载的源码中，包含了本例用到的mootool文件，如果你有这个基础可以去研究一下。现在网络上很多关于CSS的教程中都有关于它的应用，可以为你的网页增加很多不错的效果：

实例演示：收缩展开效果CSS垂直菜单

完整实例源文件下载：moomenu.rar

1.1 简单缩展菜单Step1：HTML代码

第一例缩展菜单的显示/隐藏效果比较生硬，只是很直接的出现、消失，涉及的JS代码也只有几行而已。整个例子主要有三个部分：一个ul列表、一个设置了链接的botton按钮、一段名为showElement()的JS代码。首先来看一下它的HTML结构：

  1. <a href="#" class="button" onclick="javascript:showElement(&#39;v-menu&#39;)">
  2. <span>Click Here</span>
  3. </a>
  4. <ul id="v-menu" class="v-menu" style="display:none;">
  5. <li><a href="http://ximicc.com">Ximicc</a></li>
  6. <li><a href=" http://ximicc.com ">CSS Design</a></li>
  7. <li><a href="p3.html">Css Gallery</a></li>
  8. <li><a href="p4.html">Entertainment</a></li>
  9. <li><a href="p5.html">Programming</a></li>
  10. </ul>

注意UL标签中的display:none属性设置，它的作用是让菜单在浏览器加载时默认处于收缩状态，只有当用户点击按钮时，菜单才会显示出来。

1.2 简单缩展菜单Step2：JS代码

把下面的JS代码添加到页面的head区域，通过它来控制一些HTML元素的display属性变化：

  1. <script type="text/javascript">
  2. function showElement(layer){
  3. var myLayer = document.getElementById(layer);
  4. if(myLayer.style.display=="none"){
  5. myLayer.style.display="block";
  6. myLayer.backgroundPosition="top";
  7. } else {
  8. myLayer.style.display="none";
  9. }
  10. }
  11. </script>

showElement()函数以一个HTML元素的ID值为参数，控制该元素的显示或隐藏。当用户点击链接按钮时，值原为none的元素对象display属性将变更为block。

2.1 Mootool过渡效果的缩展菜单Step1：HTML代码

第二个菜单实例在收缩和展开的过程中带有平滑的过渡效果，HTML结构中有一些细微的区别：

  1. <a href="#" class="button" id="toggle">
  2. <span>Click Here</span>
  3. </a>
  4. <ul id="v-menu" class="v-menu">
  5. <li><a href="p1.html">Technology</a></li>
  6. <li><a href="p2.html">Design</a></li>
  7. <li><a href="p3.html">Css Gallery</a></li>
  8. <li><a href="p4.html">Entertainment</a></li>
  9. <li><a href="p5.html">Programming</a></li>
  10. </ul>

我们要在a标签中设置一个名为toggle的ID值，但在第一个例子中我们为UL设置的display:none在这里已经不需要了，因为在本例中菜单的默认隐藏我们是通过mootools中的hide()函数来实现的。

2.2 Mootool过渡效果Step2：JavaScript/Mootools 代码

首先我们在页面的区域中添加JS调用代码：

  1. <script type="text/javascript" src="mootools.svn.js"></script>

然后再上面那行代码的后面添加下列JS：

  1. <script type="text/javascript">
  2. window.addEvent(&#39;domready&#39;, function(){
  3. var myMenu= new Fx.Slide(&#39;v-menu2&#39;);
  4. myMenu.hide();
  5. $(&#39;toggle&#39;).addEvent(&#39;click&#39;, function(e){
  6. e = new Event(e);
  7. myMenu.toggle();
  8. e.stop();
  9. });
  10. });
  11. </script>

代码中的myMenu.hide();函数将菜单设置为默认隐藏。另外如果你想定制自己的CSS菜单外观，只需要对源文件中的下列样式代码进行修改就可以了：

收缩展开效果CSS垂直菜单两则

实例演示：收缩展开效果CSS垂直菜单

完整实例源文件下载：moomenu.rar

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Subscribe to Comments

Add a Comment