推荐5款精心挑选的导航菜单

￡神魔★判官ぃ 2022-03-21 08:56 150阅读 0赞

日期：2013-3-13  来源：[GBin1.com][]

[![推荐5款精心挑选的导航菜单][5]][5_5]

在今天的文章中，我们从中挑选了5款非常受欢迎的导航风格的主题内容。如果你也喜欢，请留言给我们。

相关阅读:[ ][Link 1]

*  [分享5个超酷flash样式的jQuery导航和菜单][5_flash_jQuery]
 *  [33个设计精良的免费导航菜单PSD][33_PSD]
 *  [分享50个有趣的导航菜单设计][50]

## [CSS3实现的特效菜单 ][CSS3_] ##

![css3实现的特效菜单][css3]

使用CSS3实现的一个hover特效菜单

## [纯CSS实现的Lavalamp风格的导航菜单设计 ][CSS_Lavalamp_] ##

[![纯CSS实现的Lavalamp风格的导航菜单设计][CSS_Lavalamp]][CSS_Lavalamp_]

来自[PeHaa][]的一个纯CSS实现的Lavalamp风格的导航菜单，使用CSS3的动画过渡效果实现类似Lavalamp风格的导航菜单。

## [来自David Bushell的响应式的canvas导航菜单设计 ][David Bushell_canvas_] ##

[![来自David Bushell的响应式的canvas导航菜单设计][David Bushell_canvas]][David Bushell_canvas_]

这个[响应式][Link 2]的canvas导航菜单使用CSS transforms和transitions生成。支持移动设备，有兴趣的朋友，在手机设备上加载看看吧！

## [实用的多级菜单导航jQuery插件- superfish][jQuery_- superfish] ##

[![实用的多级菜单导航jQuery插件- superfish][jQuery_- superfish 1]][jQuery_- superfish]

支持IE6+，并且支持双层导航栏，垂直导航菜单。非常合适皮肤自定义，相信大家会喜欢！

## [分享一个使用jQuery实现的楼梯台阶状的菜单特效实现][jQuery] ##

[![分享一个使用jQuery实现的楼梯台阶状的菜单特效实现][jQuery 1]][jQuery]

要知道在CSS中我们无法选择一系列元素中的前面或者后面一些元素。这个jQuery代码很好的演示了如何设置指定元素前面或者后面的一系列元素，而且整个菜单的展现效果相信大家看了也会感觉非常不错，试试看吧！

来源：[推荐5款精心挑选的导航菜单][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/javascript/20130313-navigation-design/
[5]: http://www.gbin1.com/technology/javascript/20130313-navigation-design/title.jpg
[5_5]: http://www.gbin1.com/technology/javascript/20130313-navigation-design/index.html
[Link 1]: http://www.gbin1.com/technology/jquery/20120323flashstylemenu
[5_flash_jQuery]: http://www.gbin1.com/technology/jquery/20120323flashstylemenu/
[33_PSD]: http://www.gbin1.com/tools/design/2011092833freewelldesignednavigationmenupsd/
[50]: http://www.gbin1.com/tools/design/2011122850interestingnavigationmenus/
[CSS3_]: http://www.gbtags.com/gb/share/522.htm
[css3]: http://www.gbin1.com/technology/javascript/20130313-navigation-design/1.jpg
[CSS_Lavalamp_]: http://www.gbtags.com/gb/share/349.htm
[CSS_Lavalamp]: http://www.gbin1.com/technology/javascript/20130313-navigation-design/2.jpg
[PeHaa]: http://pepsized.com/author/pehaa/
[David Bushell_canvas_]: http://www.gbtags.com/gb/share/157.htm
[David Bushell_canvas]: http://www.gbin1.com/technology/javascript/20130313-navigation-design/3.jpg
[Link 2]: http://www.gbtags.com/gb/share/tag/usertag/296.htm
[jQuery_- superfish]: http://www.gbtags.com/gb/share/118.htm
[jQuery_- superfish 1]: http://www.gbin1.com/technology/javascript/20130313-navigation-design/4.jpg
[jQuery]: http://www.gbtags.com/gb/share/24.htm
[jQuery 1]: http://www.gbin1.com/technology/javascript/20130313-navigation-design/5.jpg