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 相关文章推荐
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 Javascript
小程序实现录音功能
Sep 22 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
python基础教程之序列详解
2014/08/29 Python
Python实现的计算器功能示例
2018/04/26 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
公务员政审个人总结
2015/02/12 职场文书
防汛通知
2015/04/25 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书
感谢信
2019/04/11 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
处理canvas绘制图片模糊问题
2022/05/11 Javascript