您大概听说过这样的说法:对于一个新的访问者来说,他在最初20秒内与某网站的互动情况,决定了他是否会留在这个网站做进一步的探索,还是扬长而去。这就意味着,在设计网页的时候,你必须遵循一定的规律来留住访问者。简单的说,就是把所有的网页元素放在访问者所期待的位置。进行此设计的一个重要而有效的部分,就是整一个易于使用的导航菜单。
本文将手把手带领您在jQuery的帮助下,制作一个漂亮的CSS + XHTML导航菜单。
第一步:HTML
呵呵,这代码简单吧?其实就是一个 ul + li 的结构。一目了然。如果您想加减菜单项,或是换个菜单链接,就对着 li 和 a 标签下手就成。嗯,唯一需要注意的就是,怎么设定一个当前(或选定)的菜单项。如上面代码,您就把 a 的 class 设为 “selectedMenu” 即可(如代码中的 Our clients 项)。当然了,可以使用ASP或PHP等进行动态设置。详见下图说明:
第二步:jQuery
如上图所示,我们在jQuery部分要做的工作是:复制在HTML文档中定义的(深色的)菜单项,并将复制所得(浅色的)菜单项的CSS类设定为 hoverMenu。这个类会将这些复制品定位在相应默认菜单项的上方。
这样的做法有很多好处。首先,这会使 XHTML 文档本身保持整洁,你不必手动添加那些菜单项链接。其次,在客户端不支持javascript的情况下,这个菜单仍旧可以正常工作,并且对搜索引擎友好。
javascript代码如下:
好的,看上去蛮专业的,呵呵!但是这些代码到底是什么意思呢?首先,使用$(‘document’).ready 方法来确保代码在页面载入完毕后执行。然后我们遍历了所有的 li ,复制它们,并赋予这些复制品一个新的CSS类:hoverMenu 。
这一切完成之后,我们使用hover() 方法来为mouseover 和mouseout 事件添加事件处理程序。
接下来,使用animate 方法来添加动画效果。我们为这个方法提供一个marginTop 参数值和一个动画效果持续时间值即可。其它的事情就交给jQuery处理好了。
请大家注意stop() 方法的使用:它停止所有当前活动的动画,由此来防止多个不同特效的叠加,从而实现一种平滑的效果。
第三步:CSS
好的,现在让我们来看看CSS代码:
这些代码一目了然。我们使用了三个不同的类来分别定义菜单项三种状态的样式:一般状态 - normalMenu ;鼠标悬停滑动效果状态 - hoverMenu ;当前(被选定的)状态 - selectedMenu
一切就是这么简单,希望您喜欢!
效果演示:http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/
源码下载:http://download.csdn.net/source/2055272