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 table鼠标经过变色代码
Sep 27 Javascript
动态加载jquery库的方法
Feb 12 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
VUE2.0+Element-UI+Echarts封装的组件实例
Mar 02 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
原生JS生成指定位数的验证码
Oct 28 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
生成缩略图
2006/10/09 PHP
PHP cron中的批处理
2008/09/16 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
JS操作COOKIE实现备忘记录的方法
2016/04/01 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python中的列表生成式与生成器学习教程
2016/03/13 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
什么是Python包的循环导入
2020/09/08 Python
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
表彰先进的通报
2014/01/31 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
2015年个人思想总结
2015/03/09 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
Python if else条件语句形式详解
2022/03/24 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript