导航菜单应当足够简单以让用户快速了解它,但还要包含一些必要的元素来引导用户浏览整个网站——融入一些有创意且漂亮的设计。

向大家推荐的70款优秀的导航菜单,有些是基于CSS设计的,有些是基于CSS+JavaScript的菜单,还有些是基于Flash的导航菜单设计,它们都有一个共同点:那就是它们都极具创意、界面对用户有好的,且完美的与网站的整体风格融合在一起。

1.基于CSS的导航菜单设计

Loodo
让网站更有感觉的华丽的菜单

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Acko.net
Steven将他网站的导航菜单设计成了不同寻常的透视效果。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Web Design Ledger
Web Design Ledger的导航菜单设计的非常棒,超大的尺寸让用户的操作很方便,但不会干扰到网站的内容。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

UX Booth
UX Booth在它的导航下面使用了华丽的文本区,用来对每个相应的导航菜单项进行详细描述。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Nopokographics
很少有网站使用纵向的导航,原因很简单:纵向菜单用起来很困难。但是,仍然会有一些设计师铤而走险。 Nopoko Graphics 为纵向导航添加了箭头和一些鼠标悬停效果。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Icon Designer
这个网站在首页使用了一个很大的基于图片的导航。用户的视线会第一时间被这个大导航吸引,从而起到方便用户的作用。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Cosmicsoda
这个网站的大导航很吸引人,而且使用了轻微的悬停效果来着重显示某个菜单项。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Designsensory
这个二级下拉式导航菜单,通过不同的颜色来凸显当前激活的菜单项。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Smallstone
Smallstone,一家美国唱片公司。导航的设计样式是号称Space Echo Roland SE-201。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

TNVacation
这是个非常难得的养眼的下拉菜单,的确非常漂亮!

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Clearleft
Clearleft用几张纸组成了它的导航菜单。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

45royale
带有漂亮的鼠标悬停效果的简洁导航。

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Design Intellection

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧
Ronnypries.de

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Jiri Tvrdek

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Water's Edge Media

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Matt Dempsey

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Cognigen

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

District Solutions

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Jayme Blackmon

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Jeff Sarmiento

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Studioracket

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Cultured Code

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Nando Designer

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Bonfiremedia

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Artgeex

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Gloobs

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

South Creative

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Mac Rabbit

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

RapidWeaver

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

DFW UPA

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Revolution Driving Tuition

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Duarte Pires

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Valetin Agachi

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Tutorial9

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

2. 带有JavaScript的CSS菜单

Agami Creative

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Whitehouse.gov

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

AppStorm

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Eric Johansson

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Coda

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Dragon Interactive

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Bern

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Abduzeedo

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

3. 基于Flash的菜单

Iipvapi

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Not Forgotten: The Movie

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Nick Tones

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

woonky.ideas

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Gotmilk

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Spectra Visual Newsreader

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

NickAD

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Sensi Soft

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

4. 高可用性的导航菜单

tap tap tap

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Apple

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Alex Buga

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

CREASENSO

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

polargold

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Colourpixel

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

DVEIN

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Alexandru Cohaniuc

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Porsche Canada

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Jeremy Levine Design

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

firstborn

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Benjamin David

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Thibaud's Portfolio

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Jason Reed Web Design

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Marius Roosendaal

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

5.纵向导航布局

Danny Blackman

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Tomas Pojeta

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

volll

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Mediocore

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

6.对用户友好的侧边栏菜单

FreelanceSwitch

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Fubiz

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Checkout

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Ruby Tuesday

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Concentric Studio

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

Barack Obama

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧

GABBO DESIGN

【WEB前端开发】70+漂亮且极具亲和力的导航菜单设计国外网站推荐_javascript技巧