导航菜单应当足够简单以让用户快速了解它，但还要包含一些必要的元素来引导用户浏览整个网站——融入一些有创意且漂亮的设计。 向大家推荐的[b]70款优秀的导航菜单[/b]，有些是基于CSS设计的，有些是基于CSS+JavaScript的菜单，还有些是基于Flash的导航菜单设计，它们都有一个共同点:那就是它们都极具创意、界面对用户有好的，且完美的与网站的整体风格融合在一起。 1.基于CSS的导航菜单设计 [url=http://www.loodo.com.br/]Loodo[/url] 让网站更有感觉的华丽的菜单 [url=http://blog.bingo929.com/70-beautiful-and-user-friendly-navigation-menus.html][img]http://files.jb51.net/file_images/article/201109/201109202237002.jpg[/img] [/url] [url=http://acko.net/]Acko.net[/url] Steven将他网站的导航菜单设计成了不同寻常的透视效果。 [img]http://files.jb51.net/file_images/article/201109/201109202237003.jpg[/img] [url=http://webdesignledger.com/]Web Design Ledger[/url] Web Design Ledger的导航菜单设计的非常棒，超大的尺寸让用户的操作很方便，但不会干扰到网站的内容。 [img]http://files.jb51.net/file_images/article/201109/201109202237004.jpg[/img] [url=http://www.uxbooth.com/]UX Booth[/url] UX Booth在它的导航下面使用了华丽的文本区，用来对每个相应的导航菜单项进行详细描述。 [img]http://files.jb51.net/file_images/article/201109/201109202237005.jpg[/img] [url=http://www.nopokographics.com/english/]Nopokographics[/url] 很少有网站使用纵向的导航，原因很简单:纵向菜单用起来很困难。但是，仍然会有一些设计师铤而走险。 Nopoko Graphics 为纵向导航添加了箭头和一些鼠标悬停效果。 [img]http://files.jb51.net/file_images/article/201109/201109202237006.jpg[/img] [url=http://www.icondesigner.net/]Icon Designer[/url] 这个网站在首页使用了一个很大的基于图片的导航。用户的视线会第一时间被这个大导航吸引，从而起到方便用户的作用。 [img]http://files.jb51.net/file_images/article/201109/201109202237007.jpg[/img] [url=http://www.cosmicsoda.com/]Cosmicsoda[/url] 这个网站的大导航很吸引人，而且使用了轻微的悬停效果来着重显示某个菜单项。 [img]http://files.jb51.net/file_images/article/201109/201109202237008.jpg[/img] [url=http://designsensory.com/]Designsensory[/url] 这个二级下拉式导航菜单，通过不同的颜色来凸显当前激活的菜单项。 [img]http://files.jb51.net/file_images/article/201109/201109202237009.gif[/img] [url=http://www.smallstone.com/home.php]Smallstone[/url] Smallstone,一家美国唱片公司。导航的设计样式是号称[i]Space Echo [/i]Roland SE-201。 [img]http://files.jb51.net/file_images/article/201109/2011092022370010.jpg[/img] [url=http://tnvacation.com/]TNVacation[/url] 这是个非常难得的养眼的下拉菜单，的确非常漂亮！ [img]http://files.jb51.net/file_images/article/201109/2011092022370011.jpg[/img] [url=http://clearleft.com/]Clearleft[/url] Clearleft用几张纸组成了它的导航菜单。 [img]http://files.jb51.net/file_images/article/201109/2011092022370012.gif[/img] [url=http://www.45royale.com/about/]45royale[/url] 带有漂亮的鼠标悬停效果的简洁导航。 [img]http://files.jb51.net/file_images/article/201109/2011092022370013.jpg[/img] [url=http://designintellection.com/]Design Intellection[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370014.gif[/img] [url=http://www.ronnypries.de/]Ronnypries.de[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370015.jpg[/img] [url=http://www.tvrdek.cz/en]Jiri Tvrdek[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370016.jpg[/img] [url=http://www.watersmedia.com/]Water's Edge Media[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370017.jpg[/img] [url=http://www.mattdempsey.com/]Matt Dempsey[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370018.jpg[/img] [url=http://www.cognigencorp.com/]Cognigen[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370019.jpg[/img] [url=http://www.districtsolutions.co.uk/candidates/]District Solutions[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370020.gif[/img] [url=http://www.jaymeblackmon.com/]Jayme Blackmon[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370021.jpg[/img] [url=http://www.jeffsarmiento.com/]Jeff Sarmiento[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370022.gif[/img] [url=http://studioracket.org/]Studioracket[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370023.jpg[/img] [url=http://www.culturedcode.com/]Cultured Code[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370024.jpg[/img] [url=http://www.nandodesigner.com/home.htm]Nando Designer[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370025.gif[/img] [url=http://www.bonfiremedia.com.au/web/]Bonfiremedia[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370026.gif[/img] [url=http://artgeex.com/v6/]Artgeex[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370027.jpg[/img] [url=http://www.gloobs.com/]Gloobs[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370028.jpg[/img] [url=http://southcreative.com.au/]South Creative[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370029.jpg[/img] [url=http://www.macrabbit.com/]Mac Rabbit[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370030.jpg[/img] [url=http://www.realmacsoftware.com/rapidweaver/]RapidWeaver[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370031.jpg[/img] [url=http://dfw-upa.org/]DFW UPA[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370032.jpg[/img] [url=http://www.revolutiondrivingtuition.co.uk/]Revolution Driving Tuition[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370033.jpg[/img] [url=http://www.duartepires.com/]Duarte Pires[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370034.jpg[/img] [url=http://agachi.name/weblog/]Valetin Agachi[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370035.jpg[/img] [url=http://www.tutorial9.net/]Tutorial9[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370036.jpg[/img] 2. 带有JavaScript的CSS菜单 [url=http://agamicreative.com/]Agami Creative[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370037.jpg[/img] [url=http://www.whitehouse.gov/]Whitehouse.gov[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370038.gif[/img] [url=http://mac.appstorm.net/]AppStorm[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370039.jpg[/img] [url=http://www.ericj.se/]Eric Johansson[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370040.jpg[/img] [url=http://www.panic.com/coda/]Coda[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370041.jpg[/img] [url=http://dragoninteractive.com/]Dragon Interactive[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370042.jpg[/img] [url=http://www.helmy-bern.cz/]Bern[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370043.jpg[/img] [url=http://abduzeedo.com/]Abduzeedo[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370044.jpg[/img] 3. 基于Flash的菜单 [url=http://iipvapi.com/]Iipvapi[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370045.jpg[/img] [url=http://www.notforgottenmovie.com/]Not Forgotten: The Movie[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370046.jpg[/img] [url=http://www.narrowdesign.com/]Nick Tones[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370047.gif[/img] [url=http://www.woonky.com.ar/]woonky.ideas[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370048.gif[/img] [url=http://www.gotmilk.com/#/gotmilkbrand/]Gotmilk[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370049.jpg[/img] [url=http://msnbcmedia.msn.com/i/msnbc/components/spectra/spectra.html]Spectra Visual Newsreader[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370050.jpg[/img] [url=http://www.nickad.com/]NickAD[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370051.jpg[/img] [url=http://www.sensisoft.com/]Sensi Soft[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370052.jpg[/img] 4. 高可用性的导航菜单 [url=http://www.taptaptap.com/]tap tap tap[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370053.jpg[/img] [url=http://www.apple.com/mac/]Apple[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370054.jpg[/img] [url=http://www.alexbuga.com/v8/]Alex Buga[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370055.jpg[/img] [url=http://www.creasenso.fr/]CREASENSO[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370056.jpg[/img] [url=http://www.polargold.de/]polargold[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370057.jpg[/img] [url=http://www.colourpixel.com/]Colourpixel[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370058.jpg[/img] [url=http://www.dvein.com/]DVEIN[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370059.jpg[/img] [url=http://www.alexcohaniuc.com/]Alexandru Cohaniuc[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370060.jpg[/img] [url=http://www.porsche.com/canada/]Porsche Canada[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370061.jpg[/img] [url=http://www.jeremylevine.com/]Jeremy Levine Design[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370062.jpg[/img] [url=http://www.firstbornmultimedia.com/]firstborn[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370063.jpg[/img] [url=http://benjamindavid.cc/]Benjamin David[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370064.jpg[/img] [url=http://www.thibaud.be/]Thibaud's Portfolio[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370065.jpg[/img] [url=http://www.jasonreedwebdesign.com/]Jason Reed Web Design[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370066.jpg[/img] [url=http://www.mariusroosendaal.com/]Marius Roosendaal[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370067.jpg[/img] 5.纵向导航布局 [url=http://www.dannyblackman.com/]Danny Blackman[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370068.gif[/img] [url=http://www.pojeta.cz/]Tomas Pojeta[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370069.jpg[/img] [url=http://www.volll.com/#section_main]volll[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370070.jpg[/img] [url=http://www.mediocore.cz/]Mediocore[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370071.jpg[/img] 6.对用户友好的侧边栏菜单 [url=http://freelanceswitch.com/]FreelanceSwitch[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370072.jpg[/img] [url=http://www.fubiz.net/]Fubiz[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370073.jpg[/img] [url=http://www.checkoutapp.com/features/#sales]Checkout[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370074.jpg[/img] [url=http://www.rubytuesday.com/]Ruby Tuesday[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370075.jpg[/img] [url=http://concentric-studio.com/work/dealbreaker/?nav=2]Concentric Studio[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370076.jpg[/img] [url=http://www.barackobama.com/index.php]Barack Obama[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370077.jpg[/img] [url=http://www.gabbo.cz/graficke-studio.html]GABBO DESIGN[/url] [img]http://files.jb51.net/file_images/article/201109/2011092022370078.jpg[/img]