漂亮的CSS + XHTML导航菜单

您大概听说过这样的说法：对于一个新的访问者来说，他在最初20秒内与某网站的互动情况，决定了他是否会留在这个网站做进一步的探索，还是扬长而去。这就意味着，在设计网页的时候，你必须遵循一定的规律来留住访问者。简单的说，就是把所有的网页元素放在访问者所期待的位置。进行此设计的一个重要而有效的部分，就是整一个易于使用的导航菜单。

 

本文将手把手带领您在jQuery的帮助下，制作一个漂亮的CSS + XHTML导航菜单。

 

 

---

 

 

第一步：HTML

<div id="menu-container"> <ul id="navigationMenu"> <li><a href="#" mce_href="#" class="normalMenu">Home</a></li> <li><a href="#" mce_href="#" class="normalMenu">Services</a></li> <li><a href="#" mce_href="#" class="selectedMenu">Our clients</a></li> <li><a href="#" mce_href="#" class="normalMenu">The team</a></li> <li><a href="#" mce_href="#" class="normalMenu">About us</a></li> <li><a href="#" mce_href="#" class="normalMenu">Contact us</a></li> </ul> </div>

呵呵，这代码简单吧？其实就是一个 ul + li 的结构。一目了然。如果您想加减菜单项，或是换个菜单链接，就对着 li 和 a 标签下手就成。嗯，唯一需要注意的就是，怎么设定一个当前（或选定）的菜单项。如上面代码，您就把 a 的 class 设为 “selectedMenu” 即可（如代码中的 Our clients 项）。当然了，可以使用ASP或PHP等进行动态设置。详见下图说明：

 

 

第二步：jQuery

如上图所示，我们在jQuery部分要做的工作是：复制在HTML文档中定义的（深色的）菜单项，并将复制所得（浅色的）菜单项的CSS类设定为 hoverMenu。这个类会将这些复制品定位在相应默认菜单项的上方。

这样的做法有很多好处。首先，这会使 XHTML 文档本身保持整洁，你不必手动添加那些菜单项链接。其次，在客户端不支持javascript的情况下，这个菜单仍旧可以正常工作，并且对搜索引擎友好。

 

javascript代码如下：

$(document).ready(function(){ $('#navigationMenu li .normalMenu').each(function(){ // 使用clone()创建li的复制品 $(this).before($(this).clone().removeClass().addClass('hoverMenu')); }); $('#navigationMenu li').hover(function(){ $(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200); }, function(){ $(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200); }); });

 

 

好的，看上去蛮专业的，呵呵！但是这些代码到底是什么意思呢？首先，使用$(‘document’).ready 方法来确保代码在页面载入完毕后执行。然后我们遍历了所有的 li ，复制它们，并赋予这些复制品一个新的CSS类：hoverMenu 。

 

这一切完成之后，我们使用hover() 方法来为mouseover 和mouseout 事件添加事件处理程序。

 

接下来，使用animate 方法来添加动画效果。我们为这个方法提供一个marginTop 参数值和一个动画效果持续时间值即可。其它的事情就交给jQuery处理好了。

 

请大家注意stop() 方法的使用：它停止所有当前活动的动画，由此来防止多个不同特效的叠加，从而实现一种平滑的效果。

 

 

第三步：CSS

好的，现在让我们来看看CSS代码：

/* Page styles */ body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{ /* resetting some elements for better browser compatibility */ margin:0px; padding:0px; } body{ /* styling the body */ margin-top:20px; font-family:Arial, Helvetica, sans-serif; color:#51555C; height:100%; font-size:12px; } /* Navigation menu styles */ ul{ /* the unordered list */ height:25px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } ul li{ border:1px solid #444444; display:inline-block; /* changing the display property */ float:left; /* floating the list items to the left */ height:25px; list-style-type:none; /* disabling the list icon */ overflow:hidden; /* hiding the overflowing content */ } ul li a, ul li a:hover, ul li a:visited{ text-decoration:none; /* removing the underline text-decoration */ } /* styling the links */ .normalMenu, .normalMenu:visited, .hoverMenu, .hoverMenu:visited, .selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */ outline:none; padding:5px 10px; display:block; } /* styles that are assigned individually */ .hoverMenu,.hoverMenu:visited, .selectedMenu,.selectedMenu:visited { margin-top:-25px; background:url(img/grey_bg.gif) repeat-x #eeeeee; color:#444444; } .selectedMenu,.selectedMenu:visited { margin:0; } .normalMenu, .normalMenu:visited{ color:white; background:url(img/dark_bg.gif) repeat-x #444444; }

这些代码一目了然。我们使用了三个不同的类来分别定义菜单项三种状态的样式：一般状态 - normalMenu ；鼠标悬停滑动效果状态 - hoverMenu ；当前（被选定的）状态 - selectedMenu

 

一切就是这么简单，希望您喜欢！

 

效果演示：http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/

源码下载：http://download.youkuaiyun.com/source/2055272