轩枫阁

首页 / Web前端 / 授人以渔 / JQuery / jQuery制作多级导航菜单

jQuery制作多级导航菜单

前言

假使我们不需要兼容IE6这个浏览器的话,我们完全可以使用纯CSS来制作一个多级导航。比如说写的《Pure CSS Vertical Menu 》就是一个纯CSS制作的导航。那么今天我也要介绍一个不用插件制作的导航,而且用户不支持js的情况下,在现代浏览器中多级导航菜单功能也正常。首先可以看下面的一个Demo

目标

今天主要目标制作一个像下图所示的导航菜单

level-fourth-demo
这个导航有一个最大的特点:在现代浏览器中无需任何脚本也支持下拉菜单的功能。

第一步:HTML Markup

首先我们需要一个正常而又清晰的导航菜单结构,一般我们都是这样写的:

 

第二步:CSS Code

上面我们完成了基本结构,接下来我们要使用样式来美化他,不过这里和平时美化稍有不同,因为还需要考虑到使用样式控制下拉菜单的显示与隐藏功能。别的不说,我们直接上代码才一关键:

1、顶级导航样式

上面主要修饰的是顶级导航的样式,接下来看第二步。

2、二级菜单样式

这里有一个关键地方:菜单加载进页面时,所有子级菜单项都是被隐藏,

然后我们利用的是CSS的”:hover”来实现,当鼠标次级导航的父元素上时,他才被显示,当鼠标离开时又被隐藏:

只是在IE6的浏览器中并不支持“li:hover”功能(具体解决办法可以参考《浏览器兼容之旅的第四站:IE常见Bug——part2》),以致于我们使用纯CSS制作下拉导航存在一个隐患,但对于弃用了IE6的朋友,那是没有问题的。

另外我们这里使用的三角标志也是纯CSS的制作,如上图所示,具体实现方法:我们采用元素的0宽度和高度,并使用元素的border属性来制作,请看三角实现的代码:

如果对这种制作方法感兴趣的,可以点击写的《How to Create DIV Shapes Like Triangles and Circles》。

3、三级(或更深层级)样式

前面两步都是一级二级菜单样式,其实三级菜单或者说四级菜单,他们的基本样式都和前面的一样,只不过是一个位置的不同而以二级菜单通常都是在一级导航的下面,而三级菜单通常是在二级的右边,四级就是三级的右边,依些类推放置。下面我们来看其代码:

此处也是利用“li:hover”来控制下拉菜单的显示和隐藏功能。

那么最后样式就如下所示:

CSS Code

其实到此为此,我们这个多级菜单导航功能在现代浏览器中就可以正常运行了,但由于在”IE6″下不支持“li:hover”致使无法正常运行,而IE6相对来说还是蛮多人在使用,那么为了让其达到一样的效果,我们就接着使用jQuery,让这个多级导航菜单在各浏览器中都能运行。

第三步:jQuery Code

前面也说了,达到前面DEMO展示的效果,在现代浏览器中到上面一步就算功德圆满了,可是还有一个IE6,我们只好使用JQuery方法来辅助完成,首先在第一步将jQuery版本库导进来:

下面接着看实现功能的jQuery代码

1、jQuery实现的方法一:

2、jQuery实现的方法二:

这里我们主要使用了jQuery中的.hover()方法来控制子菜单的显示与否,当然我们带可以使用.mouseover().mouseout()方法来代替.hover()方法;而且这里还使用了.slideDown()方法,让动更显示更生动,当然大家还可以配合jquery.effects.core.js使用。具体效果,大家可以点击Demo,此例中和Demo稍有不同,感兴趣的可以查看代码,或直接将本例代码Copy到你本地,就能正常运行。

到此,一个生动而轻便的多级导航就完成了。在这个实例中,我们一起见证了两点:其一,在现代浏览器中使用纯CSS也一样能制作出靓丽好看的多级导航;其二,不使用任何jQuery插件,也能制作兼容性强,外观好看的多级导航菜单。如果你不在需要兼容IE6,你完全可以使用纯CSS来制作多级菜单。不知道你有没有心动,有心动就动手吧,自力更生,才能丰衣足食。

2011-09-29更新

 

转载自:W3CPLUS

本文标题:jQuery制作多级导航菜单 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
422/470
424/470

相关阅读

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子