[组图]70+漂亮且极具亲和力的导航菜单设计

推荐者:尘一 (积分 62102) | 原作者:彬彬译
网站可用性是任何网站的基本要素,而可用的导航更是网站所必需的要素之一。导航决定了用户如何与网站进行交互。如果没有了可用的导航,那么网站内容就会变得毫无用处。导航菜单应当足够简单以让用户快速了解它,但还要包含一些必要的元素来引导用户浏览整个网站——融入一些有创意且漂亮的设计。

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


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


Loodo

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


CSS-导航-实例



Acko.net

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


CSS-菜单-实例


Web Design Ledger

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


javascript-导航-实例


UX Booth

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


javascript-菜单-实例


Nopokographics

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


CSS-教程


Icon Designer

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


JavaScript-教程


Cosmicsoda

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


CSS-导航-实例


Designsensory

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


CSS-菜单-实例


Smallstone

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


javascript-导航-实例


TNVacation

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


javascript-菜单-实例


Clearleft

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


CSS-教程


45royale

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


JavaScript-教程


Design Intellection


CSS-导航-实例

Ronnypries.de


CSS-菜单-实例


Jiri Tvrdek


javascript-导航-实例


Water’s Edge Media


javascript-菜单-实例


Matt Dempsey


CSS-教程


Cognigen


JavaScript-教程


District Solutions


CSS-导航-实例


Jayme Blackmon


CSS-菜单-实例


Jeff Sarmiento


javascript-导航-实例


Studioracket


javascript-菜单-实例


Cultured Code


CSS-教程


Nando Designer


JavaScript-教程


Bonfiremedia


CSS-导航-实例


Artgeex


CSS-菜单-实例


Gloobs


javascript-导航-实例


South Creative


javascript-菜单-实例


Mac Rabbit


CSS-教程


RapidWeaver


JavaScript-教程


DFW UPA


CSS-导航-实例


Revolution Driving Tuition


CSS-菜单-实例


Duarte Pires


javascript-导航-实例


Valetin Agachi


javascript-菜单-实例


Tutorial9


CSS-教程


2. 带有JavaScript的CSS菜单


Agami Creative


JavaScript-教程


Whitehouse.gov


CSS-导航-实例


AppStorm


CSS-菜单-实例


Eric Johansson


javascript-导航-实例


Coda


javascript-菜单-实例


Dragon Interactive


CSS-教程


Bern


JavaScript-教程


Abduzeedo


CSS-导航-实例


3. 基于Flash的菜单


Iipvapi


CSS-菜单-实例


Not Forgotten: The Movie


javascript-导航-实例


Nick Tones


javascript-菜单-实例


woonky.ideas


CSS-教程


Gotmilk


JavaScript-教程


Spectra Visual Newsreader


CSS-导航-实例


NickAD


CSS-菜单-实例


Sensi Soft


javascript-导航-实例


4. 高可用性的导航菜单


tap tap tap


javascript-菜单-实例


Apple


CSS-教程


Alex Buga


JavaScript-教程


CREASENSO


CSS-导航-实例


polargold


CSS-菜单-实例


Colourpixel


javascript-导航-实例


DVEIN


javascript-菜单-实例


Alexandru Cohaniuc


CSS-教程


Porsche Canada


JavaScript-教程


Jeremy Levine Design


CSS-导航-实例


firstborn


CSS-菜单-实例


Benjamin David


javascript-导航-实例


Thibaud’s Portfolio


javascript-菜单-实例


Jason Reed Web Design


CSS-教程


Marius Roosendaal


JavaScript-教程


5.纵向导航布局


Danny Blackman


CSS-导航-实例


Tomas Pojeta


CSS-菜单-实例


volll


javascript-导航-实例


Mediocore


javascript-菜单-实例


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


FreelanceSwitch


CSS-教程


Fubiz


JavaScript-教程


Checkout


CSS-导航-实例


Ruby Tuesday


CSS-菜单-实例


Concentric Studio


javascript-导航-实例


Barack Obama


javascript-菜单-实例


GABBO DESIGN


CSS-教程

posted on 2010-07-02 17:10  itzsl  阅读(282)  评论(0编辑  收藏  举报