32个唯美CSS3菜单和导航条教程

今天我们所介绍的所有CSS3导航条教程都是功能齐全并且很容易就可以部署到在线的网站上。但是我们更期望它们能变得更具有实验性和概念验证性，而不仅仅是成为一个强大的终端产品（多一点点折腾会使得一切变得更好！）。它们所能提供的仅仅是给你一个挽起袖子进行实战的机会和探索更多开创性的代码。

不管怎么样，以下将为您一一展现这些唯美的css3菜单和导航条：

1、创造性的CSS3动画菜单





创造性css3动画菜单

本教程的想法是期望形成一个简单的要素组合：一个图标，一个主标题和一个副标题，通过使用CSS过渡和动画来实现动画悬停效果。

教程地址：
http://tympanus.net/codrops/2011/10/24/creative- href="http://www.laokboke.net/tag/css3/" target=_blank>css3-animation-menus/

演示：
http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/
2、CSS3动画下拉菜单





CSS3动画下拉菜单

在本教程中，你将会学到使用一些很酷的技巧来构建这令人敬畏的CSS3动画下拉菜单。为了兼容IE，会使用少量的JQuery。

教程地址：
http://www.red-team-design.com/css3-animated-dropdown-menu
演示：
http://www.red-team-design.com/wp-content/uploads/2011/11/css3-animated-dropdown-menu-demo.html
3、创建一个很酷的CSS3下拉菜单





一个很酷的CSS3下拉菜单

在此教程中你将会看到如何创建一个多层级的CSS3下拉菜单，他能很好的兼容Firefox，Chrome和Safari，此菜单也能在IE8+上显示，但是圆角和阴影将无法显示。

教程地址：
http://www.script-tutorials.com/creating-css3-dropdown-menu/
演示：
http://www.script-tutorials.com/demos/87/index.html
4、CSS3简约导航菜单





CSS3简约导航菜单

在本教程中，你将学会如何构建一个简单的CSS3简约导航菜单，它能很好的兼容老一代浏览器，也能前瞻的适应下一代浏览器。

教程地址：
http://tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/
演示：
http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html
5、CSS3动画菜单





CSS3动画菜单

使用强大的CSS3效果和过渡，在本教程中，你将会学习如何构建一个导航菜单，同时使用排列特征如：target伪选择器和：after元素。

教程地址：
http://tutorialzine.com/2011/05/css3-animated-navigation-menu/
演示：
http://demo.tutorialzine.com/2011/05/css3-animated-navigation-menu/
6、CSS3层级显示菜单





CSS3层级显示菜单

教程地址：
http://www.script-tutorials.com/pure-css3-lavalamp-menu/
演示：
http://www.script-tutorials.com/demos/249/index.html
7、CSS多层级下拉菜单





CSS多层级下拉菜单

在本教程中，你将会学习如何创建一个透明的CSS3多层级下拉导航菜单，这导航菜单非常完美的支持Firefox，Chrome和Safari

教程地址：
http://www.bloggermint.com/2011/06/pure-css3-multi-level-drop-down-navigation-menu/
演示：
http://www.bloggermint.com/demos/darknavmenu/
8、CSS3内容响应导航条





CSS3内容响应导航条

在本教程中，那你将学会如何仅仅使用CSS来创建一个内容响应导航条。本想法是通过使用使用：target 伪类来显示和隐藏几个幻灯片和内容层。通过使用CSS转换，可以使得幻灯片以一个很绚丽的方式展现。

教程地址：
http://tympanus.net/codrops/2012/03/23/responsive-content-navigator-with-css3/
演示：
http://tympanus.net/Tutorials/CSS3ContentNavigator/index.html#slide-main
9、用CSS3实现的可折叠式





用CSS3实现的可折叠式

在本教程中，通过隐藏输入框和标签，你将学会如何创建一个折叠式导航使得你可以动画的打开和关闭内容区域

教程地址：
http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
演示：
http://tympanus.net/Tutorials/CSS3Accordion/
10、芳香的标签式导航





芳香的标签式导航

你将会学会如何使用CSS3来构建芳香的标签式导航

教程地址：
http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
演示地址：
http://demo.marcofolio.net/css3_tabbed_nav/
11、用CSS3实现的圆形导航效果





用CSS3实现的圆形导航效果

本教程将会展示如何仅仅使用CSS3来创建一个美丽的有着悬停效果的图像导航。

教程地址：
http://tympanus.net/codrops/2011/10/10/circle-navigation-effect-with-css3/
演示：
http://tympanus.net/Tutorials/CircleNavigationEffect/
12、仅仅使用CSS3的Apple.com菜单





仅仅使用CSS3的Apple.com菜单

在本教程中个，你将学会如何仅仅使用CSS3创建像Apple.com一样的导航菜单

教程地址：
http://www.marcofolio.net/css/the_apple.com_navigation_menu_created_using_only_css3.html
演示：
http://demo.marcofolio.net/apple_menu/
13、使用CSS3过滤的时尚菜单





使用CSS3过滤的时尚菜单

在本教程中，你将学习使用CSS3过渡来如何创建一个时尚菜单，并且有着一些很酷的过渡效果。

教程地址：
http://slicescript.com/create-a-stylish-menu-with-css3-transitions/
演示：
http://slicescript.com/wp-content/uploads/2011/11/css3-transitions.html
14、有着滑动效果的菜单





有着滑动效果的菜单

在本教程中你将会学会如何创建一个有着苹果风格的滑动效果菜单

教程地址：
http://webstandard.kulando.de/post/2010/03/05/css3-transition-tutorial-menu-mit-slide-effekt-im-apple-style
演示：
http://webstandard.kulando.de/static/css3-accordionMenu
15、CSS3下拉菜单





CSS3下拉菜单

在本教程中，你将学会如何使用CSS3来创建一个杰出的下拉菜单

教程地址：
http://webdesignerwall.com/tutorials/css3-dropdown-menu
演示：
http://www.webdesignerwall.com/demo/css3-dropdown-menu/
16、不使用JavaScript的滑动菜单





不使用JavaScript的滑动菜单

通过本教程，你可以不使用JavaScript来创建一个滑动菜单

教程地址：
http://webstandard.kulando.de/post/2010/02/24/css3-tutorial-sliding-navigation-without-javascript
演示地址：
http://webstandard.kulando.de/static/css3-tutorial-animation
17、甜美的CSS3垂直导航





甜美的CSS3垂直导航

在本教程中，你将学会创建一个垂直的CSS3导航，并且不使用任何图片。这个菜单将会用一个中心有图标的圆形来显示，并且当用户将鼠标停留在圆形上时，会拓展和显示一个简单的描述。

教程地址：
http://spyrestudios.com/how-to-create-a-sweet-css3-vertical-navigation/
演示：
http://jsfiddle.net/hatchergraphics/Wr62u/show/light/
18、CSS3垂直多色三维导航





CSS3垂直多色三维导航

教程地址：
http://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/
演示：
http://www.script-tutorials.com/demos/244/index.html
19、仅仅使用CSS3的JQuery风格菜单





使用CSS3的JQuery风格菜单

教程地址：
http://www.tobypitman.com/jquery-style-menu-with-css3/
演示：
http://development.tobypitman.com/css/menu.html
20、CSS3多色菜单





CSS3多色菜单

在本教程中，你将会创建一个非常完美的多色的和跨浏览器的滑动（使用转换）CSS3菜单

教程地址：
http://www.script-tutorials.com/css3-multicolor-menu/
演示：
http://www.script-tutorials.com/demos/232/index.html
21、CSS3大型下拉菜单





CSS3大型下拉菜单

在本教程中，你将会学会如何创建一个跨浏览器的，仅仅使用CSS的大型下拉菜单，使用了很多的CSS3特征。

教程地址：
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
演示：
http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html
22、使用CSS3的唯美菜单





使用CSS3的唯美菜单

教程地址：
http://blog.insicdesigns.com/2010/02/create-a-slick-menu-using-css3/
演示：
http://insicdesigns.com/demo/css3/exp2/index.html
23、2级黑色菜单





2级黑色菜单

教程地址：http://www.ahmadhania.com/2011/06/dark-menu-pure-css3-two-level-menu-tutorial.html

演示：
http://www.ahmadhania.com/wp-content/uploads/demo/css3-dark-menu/
24、富有开创性的CSS3下拉菜单





富有开创性的CSS3下拉菜单

在这个详细的教程中，你将学会如何如何创建以上的下拉菜单

教程地址：
http://www.script-tutorials.com/creating-css3-dropdown-menu-3/
演示：
http://www.script-tutorials.com/demos/96/index.html
25、性感的CSS3菜单





性感的CSS3菜单

在本教程中，你将会学习如何使用一些CSS3魔术来创建一个好看的菜单

教程地址：
http://www.red-team-design.com/sexy-css3-menu
演示：
http://www.red-team-design.com/wp-content/uploads/2011/06/css3-menu.html
26、CSS3下拉菜单





CSS3下拉菜单

教程地址：
http://www.red-team-design.com/css3-dropdown-menu
演示：
http://www.red-team-design.com/wp-content/uploads/2011/03/css3-dropdown-menu-demo.html
27、极酷的CSS3导航菜单





极酷的CSS3导航菜单

教程地址：
http://www.red-team-design.com/cool-css3-navigation-menu
演示：
http://www.red-team-design.com/wp-content/uploads/2011/10/cool-css3-navigation-menu-demo.html
28、点击响应的多层级CSS3下拉菜单





点击响应的多层级CSS3下拉菜单

教程地址：
http://www.script-tutorials.com/click-action-multilevel-css3-dropdown-menu/
演示：
http://www.script-tutorials.com/demos/133/index.html
29、手风琴式的CSS3垂直导航菜单





手风琴式的CSS3垂直导航菜单

教程地址：
http://www.script-tutorials.com/css3-onclick-vertical-metal-menu/
演示：
http://www.script-tutorials.com/demos/162/index.html
30、CSS3没有JavaScript的悬停标签





CSS3没有JavaScript的悬停标签

教程地址：
http://www.kamikazemusic.com/quick-tips/css3-hover-tabs-without-javascript/
演示：
http://kamikazemusic.com/demo/csstabs.html
31、开创性的CSS3下拉菜单





开创性的CSS3下拉菜单

教程地址：
http://www.script-tutorials.com/creating-css3-dropdown-menu-2/
演示：
http://www.script-tutorials.com/demos/91/index.html
32、CSS3旋转菜单





CSS3旋转菜单

教程地址：
http://webdesign.tutsplus.com/tutorials/site-elements/how-to-create-a-css3-wheel-menu/
演示：
http://webdesigntutsplus.s3.amazonaws.com/155_WheelMenu/nav_wheel-css-only/wheel.htm（完）
原文地址：http://speckyboy.com/2012/04/18/css3-menu-and-navigation-tutorials/