70+漂亮且极具亲和力的导航菜单设计国外网站推荐


Posted in Javascript onSeptember 20, 2011

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

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

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

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Design Intellection

70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Ronnypries.de

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Jiri Tvrdek

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Water's Edge Media

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Matt Dempsey

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Cognigen

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

District Solutions

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Jayme Blackmon

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Jeff Sarmiento

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Studioracket

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Cultured Code

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Nando Designer

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Bonfiremedia

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Artgeex

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Gloobs

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

South Creative

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Mac Rabbit

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

RapidWeaver

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

DFW UPA

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Revolution Driving Tuition

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Duarte Pires

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Valetin Agachi

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Tutorial9

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

2. 带有JavaScript的CSS菜单

Agami Creative

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Whitehouse.gov

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

AppStorm

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Eric Johansson

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Coda

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Dragon Interactive

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Bern

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Abduzeedo

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

3. 基于Flash的菜单

Iipvapi

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Not Forgotten: The Movie

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Nick Tones

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

woonky.ideas

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Gotmilk

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Spectra Visual Newsreader

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

NickAD

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Sensi Soft

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

4. 高可用性的导航菜单

tap tap tap

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Apple

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Alex Buga

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

CREASENSO

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

polargold

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Colourpixel

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

DVEIN

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Alexandru Cohaniuc

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Porsche Canada

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Jeremy Levine Design

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

firstborn

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Benjamin David

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Thibaud's Portfolio

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Jason Reed Web Design

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Marius Roosendaal

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

5.纵向导航布局

Danny Blackman

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Tomas Pojeta

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

volll

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Mediocore

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

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

FreelanceSwitch

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Fubiz

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Checkout

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Ruby Tuesday

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Concentric Studio

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Barack Obama

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

GABBO DESIGN

70+漂亮且极具亲和力的导航菜单设计国外网站推荐

Javascript 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
Angular4开发解决跨域问题详解
Aug 28 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 #Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 #Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 #Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 #Javascript
用jQuery中的ajax分页实现代码
Sep 20 #Javascript
jquery模拟按下回车实现代码
Sep 20 #Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 #Javascript
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php获取域名的google收录示例
2014/03/24 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
Python中为什么要用self探讨
2015/04/14 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
Python collections模块的使用方法
2020/10/09 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python wsgiref源码解析
2021/02/06 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
以权谋私检举信范文
2015/03/02 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers