我想网 » Menu

97个漂亮的网站导航设计欣赏

seasun — Sun, 17 Oct 2010 12:52:05 +0000

导航是一个网站设计的关键因素之一。这是非常重要的，一个非常清洁，优美和简单的导航，会让用户耳目一新。现在，我们也已经进入了Web 2.0的新时代，因此需要以某种方式将导航增强，并制作出独特的，新颖的导航菜单。

Alexarts

Candybar

Club Sites

Attack of the Web

Sushi & Robots

Delibar

Gap Medics

Thibaud

Getraenke-Krukal

Mission Bicycle Company

Oink!

Clearleft

GETINVISION

Southern Media

Curious Generation Group

Utahtravel

f claire baxter

Gpacheco

Narwhal. Co

Jason Dorn

Delete

Jeffrey Sarmiento

Small Stone Recordings

Cassys design

HANDCRAFTED css

Christmas Tweets

Ballpark

Custom Tshirts UK

XIXI NO BANHO

Microsoft

Carsonified

AdaptD

Sky Larkin

Ctrln

Lucia Soto

Dreamling

Neotelos

Gisele Jaquenod

Artcore-Illustrations

Mystery Tin

Netwise

Loodo

Tapbots

Checkout

Somos la pera limonera

marcusK

Joe Nyaggah

DFW Usability Professionals’ Association

Mailchimp

Web design NJ

LemonStand

MetaLab

MacRabbit

Yorkdale

Jiri Tvrdek

Flicka

Graphik

Dreamer Lines

PixelResort

N.Design Studio

Media Temple

Kulturbanause

Diego Latorre

Fluxiom

Apple

Culinaryculture

Yodaa

Mimeo

Dpivision

Adidas

tap tap tap

Serigraphics

Mint

Inspire Image Design Labs

Lomotek Polymers

Jarnheimer Productions

Bert Timmermans

Kevadamson

Redvelvetart

Pampaneo

Taufiq Ridha

The Invoice Machine

The Great Bearded Reef

Ashes & Milk

Boloco

Freckle

Gugafit

BambooBali Arquitetura em Bambu

Indofolio

Elitewebmaster

ARIN s. r. o.

Stone Skipper

Global Creative Designs

David Hellmann

Dragon Interactive

Feed enhanced by Better Feed from Ozh

JS下拉菜单实现与可访问性的思考

seasun — Thu, 16 Sep 2010 16:07:09 +0000

一、俗耐的开篇语

关于下拉菜单的可用性问题，我之前一直都是忽略的，可以说是不知道，常常仅仅止步于眼前的效果上。前段时间看到了Roger的”Accessing Nav Drop-Downs“一文，就是讲了下下拉菜单的可用性问题。同时，巧的是，最近在看淘宝UED翻译的《ppk谈JavaScript》一书，其多次提到了可访问性的问题，尤其在p28~p37对JavaScript及其一些可用性问题发表了自己的看法。其中主要的观点和注意事项与Roger的文章是一致的。
这些阅读的经历让我意识到自己长时间忽略下拉菜单的可访问性，于是开始结合实际情况，思考自己以后需要注意和提高的地方。这让我对下拉菜单实现方式选择、标签的使用等有了更加明确的认识。不太成熟的思考，仅用于交流。再具体讲述下拉菜单的可访问性之前，先简单说说下拉菜单以及下拉菜单的实现吧。
二、关于下拉菜单及其实现
百度百科对“下拉菜单”一词的解释是：以条形菜单栏和菜单栏中每个菜单项的弹出菜单窗口两部分组成，一般作为应用系统的主菜单使用。

不过这段话就像《盗梦空间》一样，让人很难懂。通俗点讲，就是“经过/会点击就会显示列表的菜单”就叫做下拉菜单。在web上非常之常见，例如~~我随便打开个页面，啊，就像是我浏览器现在显示的百科的页面的右上角：

或是隔壁的微博页面，啊，果然，看左上角的广场下拉：

恩恩，看来下拉菜单就像是男人一样，满地都是。就不一一举例了，关于下拉菜单的实现，那方法可就多了，class切换，属性绑定，js定位等，不同的页面，不同的设计，不同的架构，就有不同的实现方法。由于每个项目，每个页面的情况都不一样，所以，不能轻易的下结论，你是大熊猫，是国宝，它是小野猫，是杂草。但是，就可用性而言，不同的方法优劣还是有标准来评判的，这个在后面会自然而然的展示。
现在，举个切换class实现下拉效果的简单例子，实例菜单原型来自Mtime时光网，//zxx:Mtime创始人在新浪微博上很活跃，你有兴趣可以follow他， @马日拉，你有没有觉得这个名字很有遐想的空间呢？，截图如下：

此导航下拉的每个下拉内容都已经通过CSS定位好了，但是，考虑到加载的原因，其下拉内容默认是未装载的。也就是说，是鼠标移至导航内容上，才动态load下拉div并嵌入导航li标签内的，如下图所示：

当然，作为静态demo页面，没有必要动态load下拉内容，所以，demo页面的下拉div默认就是隐藏且装载好的，于是，我们就可以通过简单的class切换实现下拉效果。
首先是HTML结构，见下图：

核心CSS代码如下：

可见，我们只要让li标签的class，例如“我的时光”所在li标签，由”home”变成”home_hover”就可以控制下拉菜单的显示与隐藏了，很简单吧，所以，相应的js代表就会类似于下面：

然后，效果就如下图所示，截自IE6浏览器：

您可以狠狠地点击这里：时光网下拉菜单demo
恩，不错，效果良好，没有兼容性问题，js代码也算是简洁易懂，开起来似乎大功告成。要是以前的我，估计也就会到这里就结束了，没有 bug，测试工程师不会来找茬了。但是，实际上，此处下拉的可访问性只能说是中等及格的水平。//zxx:不过貌似现在整个行业（即使淘宝这类重视前端的公司）的下拉菜单都只实现到这一程度，或许其中有着各种各样的原因，但我个人感觉还是整个行业的水平有待提高。
为何说看似不错的下拉菜单效果其实可用性低呢？继续下文。
三、下拉菜单可访问性问题
首先回答这个问题：什么是可访问性？
可访问性是指你的网页对任何人、在任何环境下都是可持续访问的。但是，在目前，要使得所有的网站在任何情况下都保持完美无缺的可访问性，这样的要求比要求老板升职还要高，是不实际的，但是，在有限的范围内，有着实际意义的，我们可以提高的地方还是很多的。常见的可访问性问题有下面三个：
无脚本
这个主要是考虑到某些浏览器不支持JavaScript的情况。例如Google的页面中经常可见
标签，其就考虑到这一点。但是，就我个人的观点，如果您的网站不是面对亚非拉美这些国家，无脚本的问题其实是可以忽略的。当然，某些人员故意禁用JavaScript则另当别论。
没有鼠标
这是经常会遇到的。有些用户不使用鼠标，而是使用键盘，理由各种各样。例如我自己，有时候懒惰到境界的时候，要是左手已经搁在键盘上，就懒得抬起我的右手，去移动点击鼠标，多麻烦累人啊。直接左手指头垂直动个几厘米多轻松多方便啊；像我大学同学，电脑不知出了什么问题，鼠标都是使用不灵，所以他的大部分上网操作都是键盘完成的；还有些用户有手部残疾（或缺陷）而无法控制鼠标做出微笑的移动，按键为他们提供了一个很好的备选方案，除非 JavaScript开发人员忘记照顾他们。而实际上，包括我在内的许多前端开发工程师，或是省功夫，或是其他什么原因，而将这部分人群当作成年的包裹，都扔掉了。
屏幕阅读器
有些人不能使用常规的浏览器。最典型的就是盲人和视力受损的人，他们无法看到屏幕上的任何东西。作为替代品，他们需要一个能把页面内容大声朗读出来的程序。这就是屏幕阅读器。
以前我纯粹按照自己臆想的经验，认为，盲人用户用电脑，估计就是个梦，就算有屏幕阅读器这类东西，估计也做不了什么操作。但是，路要自己走才知道多远，水要自己趟才知道多深。对自己没有经历过事情的认知往往总是不准确的，对于盲人用户与上网的认识也是如此。我发现自己认知的偏差是因为腾讯 CDC的“闭上眼睛用QQ – 盲人用户探访实录”这篇文章。企鹅公司就是企鹅公司，有钱有人有访谈，这次访谈实录对于像我这样没有机会亲历盲人用户的开发人员来讲是非常宝贵的一手资料，让我意识到，盲人用户也有些他们精彩的世界，他跟我们这些视力良好的人一样，也是可以很好的体验到web给我们生活带来的快乐的。
//zxx:下面这段摘自“闭上眼睛用QQ – 盲人用户探访实录”一文。
盲人用户所有的电脑操作都依赖于读屏软件和键盘来完成。这三位用户现在使用的都是永德读屏软件，它安装后即在后台运行，把普通的操作系统变成了带语音的操作系统。盲人朋友依靠tab键，方向键和部分快捷键来调整目前光标的所在位置，而每按一次键盘，或屏幕上出现新的内容，或可操作界面上状态出现任何变化，系统都会有语音提示，这样盲人朋友也可以像普通人一样对电脑进行操作了。由于多年的训练，盲人所用的语音库的语速都非常快，普通人难以识别。顺带说一句，目前国内的读屏软件都不便宜，如永德是在1200左右，而一个盲人按摩师的月收入也就1、2千吧，问及他们是否会觉得这个软件太贵，老板娘笑了笑说：“我觉得值！”电脑和网络给盲人带来了全新的生活。

图片来自腾讯CDC 小黄和他的电脑（右边的数字键盘对他们很重要）信息无障碍是我们应尽的公益责任，而我国是世界上盲人最多的国家，根据中国残联最近一次公布的数据（在 2006年发布），视障患者的数量在1300万左右，若按照目前的速度增长下去，预计在2020年这一人数将达到5000万左右。要使盲人朋友能够更好的使用电脑，畅享网络生活，我们需要做的事情还有很多。
从上面三点可以看出，对键盘的支持是提高页面可访问性的最重要的因素。所以，我们再制作页面的时候，还需要多多考虑到键盘事件，尤其像上下左右键，TAB键和回车键。
四、国外支持键盘事件菜单
国外是有不少键盘支持下拉菜单的例子的，例如：
mozilla的官方首页。

当我们使用TAB键让导航项获取焦点后（IE和Firefox浏览器会有虚框），按下←键，或是→键，或是↓键，如果有导航项的话，就会显示下拉内容的。
又如yahoo开发示例的这个下拉菜单：

与Mozilla首页下拉菜单相比，这里功能更多了些，支持二级菜单，由于导航非链接，所以还支持回车键显示下拉菜单。
上述两个实例都是一定程度上支持了键盘事件的下拉菜单的示例。但是，这里我要重重地转折！这里的键盘支持的实际应用价值是多少呢？开发的可行性又是多大呢？我的结论是：实际应用价值低，开发的可行性低。
首先是使用价值，通过移动方向键显示下拉菜单，就中国行情而言，就数十年来中国网民的使用习惯而言，就中国目前前端对方向键的支持情况来看，即使你呕心沥血做了个可以通过方向键控制下拉显示的导航菜单，再即使你昭示天下此导航可方向键操作，有几个人鸟你的账呢？所以我说，在中国，在目前，方向键的可用性虽然看上去不错，实际上没有多大价值。
其次是开发的可行性，要知道，大部分的公司的资源人力有限，而且很多人能力有限，你说，花巨大的代码成本搞个可用性很好（但受众很小的）的下拉菜单，有必要吗？可能吗？你会吗？
所以说，上面yahoo开发和Mozilla首页的下拉的键盘方法是没有任何实际应用价值的，其意义仅在于学习、提高JavaScript 水平，尤其在控制键盘事件上。
您可能会疑问，照我的结论，所谓“下拉菜单可访问性”只是个空洞的理论，没有实际价值嘛。哦，其实不然，我们其实可以找到即有实际应用价值，同时又开发简单常用，又能提高页面键盘可用性的方法的。其关键就是focus事件。作为键盘用户，最常用的是哪个键，一个是Enter回车键，另外一个就是Tab焦点切换键。Tab键可以让页面上的a标签以及表单元素(button, input)依次获取焦点(如果没有设置tabindex属性的话)，当Tab键切换到某个元素时，此元素其实已经相应了onfocus方法（大部分情况下未定义方法），此时如果按下Enter回车键，其实相对于触发了onclick方法，如果a标签有链接的话，会打开链接的。
所以，我们可以抛开烦人的方向键，而专注于Tab键，以及Tab切换触发的focus方法。我们再添加一个让菜单获取焦点的显示下拉的方法，其不是大大提高了页面的键盘可访问性。而且onfocus方法本身与键盘无关，我们只需要专注于事件本身，而忽略键盘，所以开发成本是低的，非常可行的。
下面，就以mtime时光网的下拉为例，添加Tab键的下拉方法（其实是onfocus方法），看如果通过添加几行额外的代码，来大大提高页面的可访问性的。
五、给菜单添加focus事件增加键盘可用性
什么元素支持focus事件呢，据我所知为a标签，以及表单元素。所以，还是Mtime时光网的例子，我们要在下图所标示位置的a标签上添加focus方法，让其获取焦点时也能显示下拉菜单：

由于鼠标经过也实现同样的下拉效果，所以，我们需要将显示下拉菜单的方法提出来，一番处理后，js代码如下：

上述方法除了focus方法之外，为了让下拉显示的列表也能通过Tab键访问，所以，对当前显示的下拉对象cache了下，以能够准确收起之前展开的下拉菜单。
上述脚本代码的效果如下图所示，通过切换Tab键显示的下拉列表内容：

这里只看图是体会不出这里可访问性是如何切实提高的，您可以狠狠地点击这里：Tab键可访问的下拉菜单demo
无论是Firefox浏览器还是IE浏览器，不停的切换Tab切换键，当导航中的a标签获取焦点时（出现虚框，Chrome土橙色框，Safari蓝框）（可见outline是可访问性里面很重要的东西，没事就设置outline:none;的人都是不明真相的盲从者），就会出现下拉菜单。此时下拉菜单中的列表项也可以通过Tab键获取（如果下拉菜单不显示，菜单列表是无法通过Tab键访问的）。
于是，对于那些无法或不想使用鼠标的用户而言，这里导航的可访问性显然更高一筹，因为，他们可以轻松使用键盘访问导航里面的每一项内容，Tab切换，回车键访问。
值得一提的是，对于Safari浏览器用户，默认Tab切换元素是不高亮的，您需要在偏好设置里勾选此项，如下图所示：

六、抓住最后一点尾巴
我知道“站着说话不腰疼”，放眼看看中国互联网上的这些网站，绝大多数网站连个小众用户都没有，更别谈考虑到“键盘偏好用户”了，人力有限，财力有限，所谓的这些可访问性问题都只是些用钱的公司，有钱的网站有资本把玩的东西。成千上万生死先上挣扎的中小网站，对于他们来讲，本文的意义又何在呢？
我想，应该不少同行看过本文，知道了下拉菜单这类东西最好添加键盘可访问的方法。但是多仅局限于只是知道而已，真正去付诸实践的有多少呢，我是很怀疑的。所以从这点来讲，本文的实际价值又似乎打了折扣了。所以，我自己并不奢望每个前端开发人员日后都开始重视键盘用户的可访问性问题，要为页面重要的地方写键盘事件，或者是本文重点演示的focus事件。
然而，虽然，我觉得为少了的键盘用户、屏幕阅读器用户额外写js方法在大多数网站是行不通的。但是，其实只要举手之劳，我们也能够让自己网站的可访问性更好，而这些看上去不起眼的操作实际上是更加有实际应用与推广价值的，到底哪些“举手之劳”呢？
首先，把网站CSS reset中的outline:0;，痛痛快快，舒舒服服地删掉。
其次，凡事涉及到事件的元素，例如按钮，选项卡等。都必须使用（或包含）a标签或是表单元素（如button）。这不难理解，就拿本文时光网导航举例，实际上导航中的a标签去掉，同样的脚本，已经可以实现下拉菜单的效果了。或许有人反而会认为自己仅仅使用了ul, li标签就实现下拉菜单效果沾沾自喜，认为自己去掉了荣誉的a标签，HTML代码够简洁，这就跟《媳妇的美好时代》里面的毛峰一样，家里这个温柔贤惠漂亮勤劳的老婆不要，跑去沾惹那个什么龙瑾，不要是看外表风骚，看知道内涵才行。
所以，我要看到只要ul,li标签的导航觉得苗条性感，实际上只是个花花瓶子，里面需要有点内涵的东西——a标签。a标签本身的存在就是提高的页面的可访问性了。
所以呢，那些自以为代码精简、或是自认为a标签虚框不好看而使用类似span标签代替的做法，都是业余的，是可以轻松改进的。
然后，不要自以为的不要自以为边缘处理后的文字似乎更好看，就把按钮，选项卡的文字用图片代替，连文字也不留两个。你说屏幕阅读器认识图片吗，还有，你就这么喜欢没事来两个图片链接请求来虐待服务器吗？所以，少用图片代替文字，即使要代替，也要把文字藏在后面，注意是藏在后面，就是图片不显示文字就显示，而不是隐藏掉。
最后，总结下，就是outline，a标签，文字。如果您想做真正优秀的网站，加一条，键盘响应事件。
七、结语加《盗梦空间》电影之旅
本来这篇文章预计9点就可以发布，结果拖到现在，为什么呢？啊，说来话长，当时我写文章正进入体验高峰状态，突然外面有人敲窗户，我以极慢的速度转过头，
盯着黑乎乎的窗外看了10秒钟，眼睛共慢悠悠地眨了3下（1~2~3~），突然，眼前一亮，啊！这不是芳芳同学吗？我故作镇静的走过去，打开窗户，“什么事？”只见其玉手拿出两张黄黄的票子，说：“我这儿有两种《盗梦空间》的电影票，多了一张，你要不要去看？”此言一出，我肾上腺素立即升高，“哇靠，这不是电视剧里才有的桥段吗？”这等美事怎能放过，于是乎，我平生第二次和女生单独看电影（第一次是和我妹）。不要问我后来怎么样了，我现在脑子里有的就是：啊，电影很好看；啊，陆家嘴很美；啊，我的心情超好。
呼~~长嘘一口气，回到本文，关于本文……果然，还是不行，心情依旧沉浸在喜悦之中。算了，有什么问题评论交流。就这些，洗洗睡了~~

Feed enhanced by Better Feed from Ozh

10个jquery动画菜单：插件和教程

seasun — Mon, 16 Aug 2010 15:36:32 +0000

jQuery是一个非常容易使用，同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。

插件

LavaLamp

相信很多人都见过这个很酷的菜单插件，也有很多网站成功的应用了这个插件。

插件主页

jquery Kwicks 插件

如果你多Mootools有些了解，或许会注意到Mootools上一版主页的一个滑动菜单效果(现在已经看不到了)。这个插件就是来自于这个效果，很酷，也很容易定制。使用这个插件不仅仅可以制作非常个性的菜单，制作某些步骤演示也非常合适——比如购物流程的演示。插件主页

查看演示 | 下载

仿Mac的停靠菜单插件

这是个仿苹果机的停靠菜单的一个jQuery插件，支持水平和竖直两种。查看插件页面。

查看演示 | 下载

jquery滑动菜单

一个和LavaLamp很像的菜单，而且脚本只有不到1kb(lavalamp也是这么小)，也比较容易使用。该菜单的原理是，通过在当前ul元素的下面(或者说”后面”更合适些？)添加一个额外的div，用position定位该div。然后用jquery和插件来控制这个div的大小和位置，并实现动画效果。

查看演示 | 下载

教程

CSS Sprites2 – 使用jquery制作动画菜单

知名博客alistapart的一个关于CSS Sprites的教程，这个网站对CSS Sprites的技术的普及起到了非常重要的作用。本文的目的是介绍基于javascript的CSS Sprites技术，只是是通过制作动画菜单的例子来讲解。非常值得一读。查看教程

查看演示

使用jQuery的动画菜单

教你如何使用CSS和jquery的animate()函数改变背景色的透明度(opacity)来实现动画菜单的一个教程，讲的很详细，如果你看不懂英文没关系，能看懂教程中的代码就OK了。查看教程

查看演示

使用CSS和jquery创建很酷的动画导航菜单

Nettus推出的一个教程，非常详细的讲解如何使用CSS和jquery制作很酷的动画效果的菜单。查看教程

查看演示 | 下载源文件

CSS Dock Menu

来自www.ndesign-studio.com的一篇使用CSS制作停靠菜单的教程，使用了 jquery机器FishEye插件。查看教程

查看演示 | 下载

使用jquery制作平滑的动画导航

一个很不错的导航效果，这个教程很详细的讲解了制作这个菜单的步骤。使用了jquery的easing组件。查看教程

查看演示 | 下载

使用jquery实现动画背景图片

这是一个教程，作者结合了上面提到的CSS Sprites2教程，结合jquery 背景动画插件来实现的一个效果。这个效果很不错，很酷。查看教程。

查看演示 | 下载

Feed enhanced by Better Feed from Ozh

一个基于JQuery 和CSS3的滑动菜单

seasun — Tue, 27 Jul 2010 14:34:26 +0000

Demo Download

在这里我们将要创建一个独特的滑动导航菜单。这个想法是让装有菜单项的盒子（box）滑出，并且弹出一个缩略图片。同时还要在有需要二级菜单的链接项调用一个子菜单盒子。这个子菜单要依靠在上级菜单的左边或右边的位置悬停。

这里我们要用到jQuery Easing Plugin和tibchris的一些美丽的图片。

1. HTML结构

先来写HTML结构，这里我们用一个无序的列表来放导航菜单的一级菜单，用DIV来放子菜单。

 id="sdt_menu" class="sdt_menu">

		 href="#">
			 src="images/1.jpg" alt="" />

			 class="sdt_wrap">
				 class="sdt_link">Portfolio
				 class="sdt_descr">My work
			
		
 class="sdt_box">
			 href="#">Websites
			 href="#">Illustrations
			 href="#">Photography


...

如果没有子菜单，DIV可以被忽视。图片在开始的时候不会被显示，我们要在CSS中为它的宽和高都设为０。

让我们开看看CSS样式

2. CSS

让我们首先为无序列表设置样式。

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

接下来，我们要去掉菜单链接中的text-decoration和outline。

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

我们要将列表项左浮动，并且要将position设置为relative，因为我们要为它内部的元素进行绝对定位。如要我们不那样设置，绝对定位刚是相对于整个网页的。

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

这里来设计主链接的样式，我们有两个span，标题和描述。如下面这样来为它们写样式。

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

注意z-index: 我们要为重要的元素定义堆叠顺序，来让它们能够停留在上面。
我们要用一个背景图片来创造一种半透明的渐变。当你用一些背景图片（像DEMO中的木纹背景）来创造一种美丽的效果，请务必用一些不同的纹理会让它看起来棒级了。
你也可以加上阴影－改变一下值像2px 2px 6px #000 inset，同样会给你非常好看的效果。
接下来是图片的样式:

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}

我们要加上图片由下升起的动画，这就是为什么定位它必然要用“bottom”作为参考点。我们同样加上了很棒的阴影效果。这里前两个值是0，使图片的周围的阴影显得均匀。这甚至可以把阴影被用作一种特效，无论什么时候，你都可以创造一种边框效果。它的优点在于这些阴影不是真的存在－你不用考虑在元素中如何来计算它的宽和高。当然现在的缺点是CSS3并不被ＩＥ支持。
下面是包涵标题和描述的span的样式

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

如果你有大量的文字，你则需要改变这些值。也要确保那些改变的值能匹配在JavaScript中设置动画的值。
下一步，我们要定义一个灰色的滑动盒子的样式。我们给它的高设为0并且定位它，在动画中我们只要增加它的高度就可以了。

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

接下来我们要为这些设置一些共有的样式。

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

下面是标题和描述的样式。

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
}

子菜单盒子起初是一个隐藏在下面的灰色的盒子。我们要让它在我们在的地方动态的向右或向左滑动。像我们这个例子，当鼠标悬停在最后一个位置，我们要它动态的向左滑动，在其它的位置上我们要它向右滑动。

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

第一个子菜单链接需要设置一个margin-top

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

这是所有样式！让我们加上魔法！

3.JavaScript

当我们的鼠标悬停在这些列表元素上，我们要放大图片，并且显示全部，sdt_active和the sdt_wrap。如果这个元素含有子菜单(sdt_box)，将滑动到一旁。如果这个元素在菜单中是最后一个，其子菜单将滑动到左边，其余的滑向右边。

$(function() {
	$('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
			}
		});
	}).bind('mouseleave',function(){
		var $elem = $(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');

		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

就是这样！我们希望你能喜欢这个小菜单，它能对你有帮助。
P.S. 这个在Google Chrome下看起来非常完美。

Feed enhanced by Better Feed from Ozh

35个 jQuery的动画教程

seasun — Sat, 17 Jul 2010 05:26:23 +0000

创意设计人员可以利用JQuery做一些惊人的事情。实现各种各样的动画效果都是可能的，这里提供的35个JQuery教程就是为想在这方面获得技能提升的任何人最好的学习资源。你会发现一些创建动画导航菜单的教程，及使用JQuery实现不以来Flash也可以实现的动画效果。Enjoy it！

Animate Image Filling Up Using jQuery

Animate Curtains Opening with jQuery

Building an Animated Cartoon Robot with jQuery

jQuery Animations: A 7-Step Program

jQuery and CSS Sprite Animation Explained in Under 5 Minutes

Fun with jQuery’s Animate () Function

Animate a Hover with jQuery

How to Create a “MooTools Homepage” Inspired Navigation Effect Using jQuery

Crafting an Animated Postcard with jQuery

How to Create a Drop-Down Nav Menu with HTML5, CSS3 and jQuery

Creating a Polaroid Photo Viewer with CSS3 and jQuery

Quick Tip: Easy Sequential Animations in jQuery

Build an Incredible Login Form with jQuery

Learning jQuery: Revealing Photo Slider

Using jQuery for Background Image Animations

Animated Menus Using jQuery

Create a Cool Animated Navigation with CSS and jQuery

Animated Drop Down Menu with jQuery

How to Load In and Animate Content with jQuery

Puffing Smoke Effect in jQuery

How to Make an Impressive Animated Landscape Header with jQuery

Make an Animated Alphabet Using Keypress Events in jQuery

How to Make a Smooth Animated Menu with jQuery

Sliding Boxes and Captions with jQuery

Create a Realistic Hover Effect with jQuery

Glimmer “Freestyle” Animations

Create a Funky Parallax Background Effect Using jQuery

Create a Stunning Sliding Door Effect with jQuery

How to Build an Animated Header in jQuery

Create a Unique Gallery by Using Z-Index and jQuery

jQuery UI Animation Effects

Animate Your Message Boxes with jQuery

Sexy Opacity Animation with MooTools or jQuery

Controlling Animation Timing in jQuery

Methods for Animation Effects with jQuery 1.4

Feed enhanced by Better Feed from Ozh

网站导航设计的6大分类

seasun — Mon, 12 Jul 2010 14:15:47 +0000

导航是网页设计的重点，我们在设计一个网站的时候，常常从导航入手，不夸张的说，导航的设计甚至决定了整个网站的风格。这就需要我们平常多留心收集优秀的案例，在需要的时候才能手到擒来。在前文中我们已经为大家介绍了120个非常优秀的CSS水平导航菜单，今天我们汇总了更多优秀的导航设计案例，千万不要错过哦！

1.三维导航设计：

网站导航已经不满足于常见的平面化设计，越来越多的网站喜欢用立体感强的三维导航。折纸是最常用的表现形式。

2. 说话气泡导航设计

把菜单设计成讲话的气泡形状，似乎是另一种流行的趋势。

3.圆角导航设计

圆角经常用来软化规整的矩形，其按钮的外观为是为了吸引用户点击它们。

4.应用图标的导航设计

精致的图标越来越多的应用到导航设计中，因为现在带宽不再令人担心了。由于视觉上的吸引力，人们正越来越多地使用的图标，这种趋势仍在继续。图标不仅能吸引眼球，还有助于用户进行视觉识别。

5.JavaScript 动画

JavaScript 技术使 Web设计人员只用几行代码的网页元素即可容易创建动画，设计师们最近一直在使用功能多用又美观的JavaScript。

6. 不规则形状导航设计

由于大多数网站都用的是直边和尖角，不规则的形状让你有机会摆脱俗套范。

Booma

Kutztown University

Yorkdale

The Crazy Love Campaign

Carnivale du Vin 2009

Feed enhanced by Better Feed from Ozh

120个非常优秀的CSS水平导航菜单

seasun — Mon, 12 Jul 2010 14:08:45 +0000

导航是一个网站的路标，优秀的导航是网站设计成功地第一步。导航必须是用户友好的，而且要与网站设计风格保持一致，这样才能为用户提供简便的导航。

在这里您将看到120个非常优秀的CSS水平导航菜单。

Feed enhanced by Better Feed from Ozh

30个漂亮的分页样式设计

seasun — Wed, 05 Aug 2009 04:32:10 +0000

Feed enhanced by Better Feed from Ozh

用jQuery和CSS构建下拉菜单

seasun — Wed, 17 Jun 2009 15:31:21 +0000

研究表明，导航栏吸引了大多数浏览者的注意力。在存在下拉菜单的导航栏中，具有良好的组织及直观的印象是最关键的，优美的设计在开发中也至关重要。在本教程中，我会告诉您如来来创建一个缓慢下沉的漂亮的下拉菜单：

第一步：HTML文档

首先为你的导航创建一个无序列表，然后简单的写一下另外一个无序列表作为导航子菜单

<ul class=“topnav”>
<li><a href=“#”>Homea>li>
<li>
<a href=“#”>Tutorialsa>
<ul class=“subnav”>
<li><a href=“#”>Sub Nav Linka>li>
<li><a href=“#”>Sub Nav Linka>li>
ul>
li>
<li>
<a href=“#”>Resourcesa>
<ul class=“subnav”>
<li><a href=“#”>Sub Nav Linka>li>
<li><a href=“#”>Sub Nav Linka>li>
ul>
li>
<li><a href=“#”>About Usa>li>
<li><a href=“#”>Advertisea>li>
<li><a href=“#”>Submita>li>
<li><a href=“#”>Contact Usa>li>
ul>

第二步：CSS

定义导航样式

ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*–Declare X and Y axis base for sub navigation–*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*–Drop down trigger styles–*/
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*–Hover effect for trigger–*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*–Important – Keeps subnav from affecting main navigation flow–*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*–Create bevel effect–*/
border-bottom: 1px solid #444; /*–Create bevel effect–*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*–Hover effect for subnav links–*/
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

第三步：jQuery

如果您是jQuery新手，那么请先阅读这里的教程。

下面包含注释的脚本会告诉您jQuery是如何来表现的。

$(document).ready(function(){
$(“ul.subnav”).parent().append(“”); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$(“ul.topnav li span”).click(function() { //When trigger is clicked…
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(“ul.subnav”).slideDown(‘fast’).show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“ul.subnav”).slideUp(‘slow’); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(“subhover”); //On hover over, add class “subhover”
}, function(){ //On Hover Out
$(this).removeClass(“subhover”); //On hover out, remove class “subhover”
});
});

作为友好提示，下拉菜单图标只有在支持javascript的的情况下才会显示并触发。

这是在不支持javascript的情况下的显示

查看Demo并下载源文件

结尾

注意: 在之前，我有增加了圆角的演示版本 (CSS3 – 仅仅在 Firefox, Safar 及 Chrome 获得支持)。如果您想要尝试下，那么请查看本教程.

尝试并自定义适合您需要的菜单！如果您有任何问题，忧虑，建议或评论，那么请不要犹豫，告诉我您所知道的吧！

Feed enhanced by Better Feed from Ozh

36个引人注目JQuery导航菜单

seasun — Sat, 30 May 2009 09:55:52 +0000

导航菜单在任何网站中都占有举足轻重的地位。对于充满了大量页面与文章的大型网站来说，下拉菜单于选项卡菜单非常受欢迎，这是因为用户可以通过他们轻松的浏览网站，同时运用动态的选项卡显示内容能节省网站大量的空间。加入你也想创建一个属于自己的与众不同导航菜单的话，jQuery是提供一套定制选项的正确选择。这就是为什么我想大家推荐36个jquery导航菜单实例的原因。

1.jQuery 选项卡界面 / 选项卡结构菜单教程

这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的。

我想网 » Menu

97个漂亮的网站导航设计欣赏

Alexarts

Candybar

Club Sites

Tutorial9

Attack of the Web

Sushi & Robots

Delibar

Gap Medics

Thibaud

Getraenke-Krukal

Mission Bicycle Company

Oink!

Clearleft

GETINVISION

Southern Media

Curious Generation Group

Utahtravel

f claire baxter

Gpacheco

Narwhal. Co

Jason Dorn

Delete

Jeffrey Sarmiento

Small Stone Recordings

Cassys design

HANDCRAFTED css

Christmas Tweets

Ballpark

Custom Tshirts UK

XIXI NO BANHO

Microsoft

Carsonified

AdaptD

Sky Larkin

Ctrln

Lucia Soto

Dreamling

Neotelos

Gisele Jaquenod

Artcore-Illustrations

Mystery Tin

Netwise

Loodo

Tapbots

Checkout

Somos la pera limonera

marcusK

Joe Nyaggah

DFW Usability Professionals’ Association

Mailchimp

Web design NJ

JP3 DESIGN

LemonStand

MetaLab

MacRabbit

Yorkdale

Jiri Tvrdek

Flicka

Graphik

Dreamer Lines

PixelResort

N.Design Studio

Media Temple

Kulturbanause

Diego Latorre

Fluxiom

Apple

Culinaryculture

Yodaa

Mimeo

Dpivision

Adidas

tap tap tap

Serigraphics

Mint

Inspire Image Design Labs

Lomotek Polymers

Jarnheimer Productions