原文：http://designreviver.com/tips/internet-explorer-resources-for-web-developers/

在开发者与设计者眼里没有比通过IE浏览网站更糟糕的事情了，随着IE8的到来，事情有所好转，但是仍然有大量的用户在使用IE6和IE7，请升级，立刻升级！！！

IE 仍然占有绝大部分的用户，所以，很遗憾，开发者和设计者还要和他相伴工作（我非常的扫瑞啊）。

今天，我们整理了一部分很好的资源，提示和备忘录来帮助您为IE做开发。

终极 IE6 备忘录:如何解决25+ Internet Explorer 6 臭虫

CSS 在 Internet Explorer 6, 7 和 8 中的不同之处

开发者必须在所有目前使用的Internet Explorer浏览器工作中为客户的网站与个人项目进行彻底测试，保证目标拥有更广泛的受众。

本文为开发人员提供了一个详尽的，易于使用的参考，让您清楚CSS中的IE6中，IE7和IE8的支持的差异。

Internet Explorer 6, 7 和 8 通盘测试战略

这篇文章中，作者向我们展示了如何通过Microsoft提供的虚拟PC（VPC在线）和Internet Explorer VPC镜像中的应用程序兼容性来降低成本，安装多个合法版本的IE来进行测试，当您完成后，您就可以放心地测试在IE6，IE7和IE8中测试了。

经典方案 （css/jquery）

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.corners.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘.box’).corners(’10px’);
});
</script>

<div>
<!–CONTENT–>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').corners('10px');
});
</script>

<div>
	<!--CONTENT-->
</div>

CSS3 方案

<style type=”text/css”>
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div>
<!–CONTENT–>
</div>

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div>
	<!--CONTENT-->
</div>

还有附带视频

看到这篇文章以后，做下自己的整理。

在写css的过程中，Class的命名是非常重要的一项内同，简洁有语义的Class命名有利于代码的可读性。虽然伴随着HTML5的到来，会逐渐弱化，直接在HTML标签上进行简化和加强语义，但是这里还是有必要写一下。

class=”fixed”

这里是清除浮动的新写法，自动产生一个不显示的字符”.”，清除浮动，非常的实用。我自己使用class=”clearfix”

.fixed:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	}
.fixed{
	display:block;
	}
/*  \*/
.fixed{
	min-height:1%;
	}
* html .fixed{
	height:1%;
	}

class=”alt”

alt是”alternative”的缩写

#content img{
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #ccc;
	padding:1em 0;
	background:#fff;
	}
#content img.alt{
	float:right;
	margin-right:0;
	margin-left:10px;
	}

class=”selected”

<li class=“selected”><a href="/about">About Us</a></li>

class=”first”,class=”last”

直到所有的浏览器都支持:first-child 和 :last-child属性以后，这个写法将会消失。

class=”inner”

作为内容器经常与container一起使用

<div id="container">
	<div>

	</div>
</div>

class=”even”，calss=”odd”

使用在隔行变色的li或者table tr上

<ul>

<li>Content</li>

<li>Content</li>

<li>Content</li>

<li>Content</li>

</ul>

class=”section”

替代以前常用的class=“box”

<div>
	content here...
</div>

1. ColorBox
ColorBox是一个轻量级的可自定义的lightbox jQuery 1.3插件仅有9KB。可以支持图片，图片组，滑动显示，ajax,inline,与框架内容；通过CSS完全控制表现，用户可以自定义box的样式;行为设置可以被重写，而不用修改js文件。

2. markItUp!
markItUp! 轻量级jQuery插件 (仅有 6.5 KB).轻松将文本框变成编辑器。

3. jFlow
jFlow 是模仿非常流行的 codar滑动插件，能让内容滑动显示.仅有2KB 。

4. JPolite
JPolite – jQuery POrtal Lite – 基于jQuery 的轻量级前端web框架(5 KB)。 查看 demo.

5. vTip
vTip 快速提供tooltips的轻量级解决方案 (706b js, 272b CSS, 270b 图片)。

6. jQuery Cycle Plugin
jQuery Cycle Plugin 轻量级滑动显示插件。提供了暂停，自动停止，自动适应，前后回调，点击触发和许多转变效果。多层的继承，每个子元素也可以变成 “slide”. 过渡效果可以进行时间和效果设置。

7. Wilq32.RotateImage
Wilq32.RotateImage 轻量级简单易用图片旋转插件。

8. jqModal
jqModal 提供在网页浏览器中以窗口形式显示提示，对话框的轻量级插件。

9. jQPie
jQPie 是提供PHP接口的轻量级的 jQuery插件.多种混合方式进行配合，支持  XML, HTML and JSON,

10. jContext
jContext 是轻量级右键显示菜单插件，仅有 0.6kB .

表象化状态转变（英文：Representational State Transfer，简称REST）快捷教程，新的系统构架方法和轻量级Web服务替代品。

1. 什么是REST?
2. 轻量级Web服务REST
3. REST有多简单呢？
4. 更多复合的REST请求
5. REST服务响应
6. REST实例
7. AJAX与REST
8. REST构造部件
9. REST设计指南
10. ROA vs. SOA,REST vs.SOAP
11. REST服务文档编写：WSDL与WADL
12. REST不同语言实例
13. 有关REST更多内容
14. 问题与解答

越来越多的客户开始使用WordPress 作为他们的内容管理系统。作为设计师或者开发者，学习WordPress的编码势在必行。在开始前，你可以阅读我的 WordPress主题指南与hacks.现在，我要为大家推荐一个非常有用有关WordPress的网站，名字叫做WpRecipes。本文包含了20个我在WpRecipes上收集的WordPress 编码食谱。如果你有任何好的WordPress 代码或者hacks打算共享给大家的话，你可以随时发给我，我会将它们张贴出来。

• Display Tags In A Dropdown Menu

• Get Posts Published Between Two Particular Dates

• Get Posts With A Specific Custom Field & Value

• Get Latest Sticky Posts

• Automatically Insert Content In Your Feeds

• Display The Most Commented Posts

• Display Most Commented Posts In 2008

• Display Related Posts Based On Post Tags

• Display The Number Of Search Results

• Display The Comment Page Number In The <Title> Tag

• Display The Future Posts

• Randomize Posts Order

• Display Word Count Of The Post

• Fetch RSS Feeds

• Highlight Searched Text In Search Results

• Display A Greeting Message On A Specific Date (PHP)

• Automatically Create A TinyURL For Each Post

• Exclude Categories From Search

• Exclude Categories From RSS

• Using Shortcodes

• Display The Number Of Your Twitter Followers

• Display FeedBurner Subscriber Count In Text

• Display The Latest Twitter Entry

• Social Buttons

代码省略。链接在这儿

1. 使用Yslow概览与测量网站加载时间

在决定什么出问题之前，知道网站的加载时间是第一步。它也能让你知道你是否需要为网站加速进行更改。

在我们开始之前，如果你还没有安装YSlow, 请安装。他是Mozilla Firefox的一个扩展，你可从下面的链接找到它：

• https://addons.mozilla.org/en-US/firefox/addon/5369

第一，让我们浏览Six Revisions网站，我们都使用相同的例子进行测试（仅需要在新的标签或者浏览器窗口中打开）。

在浏览器的有效叫，有里程表的一栏（如图1）。在其旁边，当网页完成加载以后，你会看到”YSlow”和数字。数字代表浏览器加载网站所花费的时间(以秒计)。我们希望这个数字保持尽可能低的水平。 图 1: YSlow图标和显示网页加载时间的里程表 多数情况下，导致网页加载时间长的一个或者一组原因如下：

• 太多的HTTP请求
• 非压缩的 (或未经缩小的) JavaScript文件
• No expiration headers for静态图片文件

我们一会将要讨论这些。

为了fimilarize自己网站加载时间的表现，浏览一些网站。看看Google，facebook,和一些你喜欢的博客与网站。你会注意到网站利用越多的图片与js网页的响应时间越久。

YSlow的使用特点

除了测量它网页加载的速度， YSlow为您提供一些深入了解，如你可以为提高自己的网站性能做些什么，以及网站的负载性能的不足。

下面的图片是 ‘性能’ 标签 (如图 2). 但你点击它，它会分级展示每个影响到加载时间与整体性能的领域的细节。 图 2: 性能标签 在这个领域，最主观的选择是使用CDN (内容分发网络).CDN针对大型网站非常有效果。他们所作的事情是跨越遍及各个地区的服务器传播网站内容。当物理服务器越是接近用户加载一个网站，一个页面的速度越快速。因此本质上来说，使用CDN是从服务器上将内容分发到最接近的访问的页面用户旁。 图 3: 性能标签使用字母(A, B, C, D, F) 表示等级以及当前等级(1-100). Aside from using a CDN (which can be costly) – everything else is doable.

等级领域

让我们贯穿每个等级因素，下面是每个等级领域的简短秒速，以及如何解决这些问题实现最佳的性能。 减少HTTP请求:当网页从服务器获取文件的时候便有HTTP请求产生。范围包括脚本，CSS文件，图片以及 asynchroneous客户端/服务端请求 (Ajax和其他变化的技术)。这是提及性能时的关键处，但是只需费点体力便能很容易解决。例如，尽可能的合并脚本，CSS，以及图像，在用户的机器上缓 存文件常常有帮助。 添加期限头部: 80% 的页面加载时间都于下载脚本，图片以及CSS有关. 多数情况下，这些元素在用户的机器中不会发生改变，你可以通过在.htaccess中添加代码缓存在用户本地机器中（我们会在文章的后面对如何操作进行讨论）。 Gzip 部件: Gziping或者压缩JS文件，图片，HTML文档，CSS文档等等。用户可以下载较小的文件版本，增加网页的加载速度。 这样可以降低服务器的消耗，但是解压缩部件也可能导致页面响应变慢，这取决于用户的浏览器。 把CSS放在顶端: 把CSS文件放在网站的顶端，可以是网站尽可能同时加载其他部件，如图像和文字。 把js放在底端: 把CSS放在文档的头部，仅需要在关闭<boby>前插入js.在这些脚本在后台加载的同时，用户先得到看似完整的页面。 避免使用CSS表达式: 我从来没有使用过CSS 表达式 (被称之为动态特性), 这仅是IE专有的一个增加编程概念（如控制/有条件的结构）的CSS特性,截止到IE8，三叉戟布局引擎（在IE中使用的）不再提供支持。反正使用他们没 有一个好想法。在某种程度上，我会基于不同的条件使用PHP脚本加载不同的CSS样式规则，例如一个随机数，一天的时间，或者浏览器。 外部调用JS与CSS: 将JS和CSS文件放在外部文件中，浏览器缓存他们要比每次调用拥有更快的页面加载速度。 减少DNS查找: 只要用户在浏览器的地址栏中键入域名，浏览器总会执行DNS查找IP地址，网站拥越多的入口位置，必要的DNS查找也会越多。尽可能的保持较低的水平，平均60-100毫秒进行一次DNS查询。 缩小JS: 不同于一般的gzip压缩，缩小js文档是去除不必要的空格, tabs, 和其他跟中跟杨的选择字符，减少文件的总尺寸，较小的页面可以获得更快的加载速度，你可以使用 JSMIN来缩小JavaScript. 避免重定向:无论是服务器端头重定向，js重定向，或者HTML元素重定向。你的网站都会加载空白的页面的头，然后再加载新的一页，用户为了获得需要的页面花费越来越多的时间，所以要不惜一切代价避免这种情况。 去除重复的脚本: 浏览器加载相同的脚本会增加页面的加载时间，这是非常简单的数学问题，更多的文件等于更多的加载时间。仔细检查你的网站，确保你没有调用两次或三次jQuery或者其他的脚本。

Whew… that was a lot, let’s move on to the next tab of YSlow just before we get into some other techniques to increase the performance of your website. 图 4: 部件标签. 部件标签 (如图 4)可以洞察增加网站加载速度的效果。在这里，你可以看到当前文档加载需要的时间，如果这些文件被压缩，响应的时间，以及假如他们缓存在用户的机器中和什么时候缓存过期。这是对网站很好的考核，衡量其性能与速度优化情况。最后，统计资料标签(如图 4)，它向我们展示了所有的HTTP请求，同时下载的文档，以及缓存的文件。Empty cache显示了浏览器需要下载的呈现页面的文件。Primed Cache是另一方面，显示了已经存在于用户浏览器缓存中的文件列表，从而节省了浏览器不必再次下载文件的请求。 图 5: Stats tab.

2. 使用CSS精灵减少HTTP请求

CSS Sprites 可能是自从Tesla发明了电流以后最cool的事情。呃，我的意思是爱迪生。

嗯，不大，但是非常紧凑。

CSS sprites 可以通过合并你的css背景图片，减少页面向服务的HTTP请求，轻松的降低页面的加载时间。

许多教程只是教你如何使用CSS精灵制作导航，我要说的是使用它制作整个网站的用户界面。

首先，让我们快速浏览一下YouTube，看一看他们是如何使用CSS Sprites的(如图 6). 你不能在这里看到YouTube的CSS Sprite:

• master-vfl87445.png

图 6: YouTube的 “主要的” CSS Sprite. 这是怎么做到的，使用CSS，YouTube设定了一个将这张图片作为背景（如上图）的类， 然后其他元素只需要通过css的背景位置属性background-position设定相应的类来使用这些图片。

让我们来试试，我们打算使用YouTube图片来制作一个实例。

在以下示例中，我们使YouTube标志显示在屏幕上。使用相同的使用相同的sprite类与相同的图标,制作一个简单的翻转图标。

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}

#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}
</style>

<div id="logo" class="sprite"> </div>

现在我们所作的是通过单一的HTTP请求满足所有的静态网站需求。这样可以大大降低网页加载时间。

当你使用sprites制作悬停翻转效果时图片更替看起来间隔时间非常短。不同于翻转状态时加载文件，留下大量的空白直到该文件完全被加载。

<style>
.sprite {
  background:url(http://s.ytimg.com/yt/img/master-vfl87445.png);
}
#logo {
  width:100px;
  height:45px;
  background-position:0 0;
}

#button {
  background-position:0 -355px;
  padding:5px 8px;
}

#button:hover{
  background-position:-25px -355px;
}

</style>

<div id="logo" class="sprite"> </div>

<a href="#" id="button" class="sprite"></a>

3. 先加载CSS最后加载JavaScript

某些站点，你根本无法避开所有的扰乱了你的功能的HTTP请求。

在这方面，以下几个建议：

1. 在body上的<head>标签里加载CSS
2. 在</body>标签闭合前加载JavaScript .

会发生什事情呢？网页在用户的机器上加载显示，因此他们的眼睛就开始扫描所提供的内同，这个时候JavaScript正好迎头赶上在后台进行加载。 i

提示：如果您不想移动JavaScript标记，你认为它会搞糟网站的方式工作，我建议使用 defer 属性。用法如下：

 <script defer='defer'>

4. 使用子域名并发下载

并行下载，当你增加文件下载。如果你有打开网页在页脚的状态栏，你会发现加载其他网站的时候，会同时对static.domain.com和c1.domain.com进行请求.

这是一个非常棒的优化负载性能的方法。虽然只是简单的食用子域名，内容在同一个服务器上，但是浏览器是当作独立的服务器进行对待。

进行这样的设定:

1. 在服务器上创建3个子域名
2. 把图片放在在每个子域名的一个文件夹内
3. 在新建的子域名中替换网站图片的位置路径

现在使用JavaScript文件,不会超过两个并发。

5. Adding an Expires Header

一些网站非常丰富，即使使用上述的技术后，性能似乎还可以增加更多。

一个用户访问你的网站，产生一些必要的页面，图片，脚本等HTT请求。

当你使用了Expires Header,你可以在用户的本地机器对这些元素进行缓存，不仅提高了他们的访问速度，也节省了你的带宽。 Expires header可以在所有的图片，脚本与css上使用。

只需要在你的网站根目录.htaccess文件中加入一行代码就可以轻松做到。（假如你没有，可以用文本编辑器创建一个，存为.htaccess，然后上传到根目录中。）

下面的.htaccess.为ico, .pfd, .flv (Flash类型文件), .jpg, .png等设置了2010到期的遥远的期限。

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|CSS|swf)$">
  Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

请注意:如果设定过于遥远的expires header,你更新文件需要重新命名(version it) 否则使用缓存的用户将无法看到更新。

例如，如果你拥有一个avaScript文件需要更新, 使用版本号码然后更新所有的旧版本文件 (即. javascriptfile-1.0.js, javascriptfile-1.1.js)

结语

这是篇很充实的文章，但希望你能获得一些如何加快网页载入的建议。如果你有什么建议或者问题，请在留言中分享!

下拉菜单是一个非常便利的范式，使大菜单浓缩在小的初始空间内。很长一段时间人们只是使用一种形式的标准下拉模式，但是只需小小的努力你就可以使用jQuery 和 CSS创建雨刷效果的菜单。

Preview || Download

20. 运用jQuery使背景图片生动起来

五种不同的方式，如何使用jquery创建生动的背景图片真实效果

Preview

21. 怎样使用jQuery创建‘Mootools 主页’有创造性的导航效果

正如你说知道的那样，现在有许多的相互竞争的javascript库 ，虽然我喜欢jQuery, 但是我过去总喜欢运行在MooTools 上的菜单。因此，在本指南中，我们将要使用jQuery创建相同效果的菜单!

Preview || Download

22. Menumatic Mootools

MenuMatic是MooTools 1.2中使用语义列表或无序列表链接变成动态下拉菜单系统的类。For users without javascript, it falls back on a CSS menu system based on Matthew Carroll’s keyboard accessible flavor of Suckerfish Dropdowns by Patrick Griffiths and Dan Webb.( 不知如何翻译是好，>.< )

Preview Vertical || Preview horizontal || Download

23. jQuery convertion: 使用Javascript的车库门效果

所有的jQuery粉丝们: 这里是使用jQuery的车库门效果!

Preview || Download

24. Perspective tabs

Perspective tabs是一个非常简单的 mootools 1.2 插件，可以在小空间内插入大量的选项卡。

25. Fisheye 菜单

Fisheye菜单是基于MacOSX文档可展开的菜单。

Download

26. JavaScript滑动菜单 高亮 1kb

这滑动悬停效果脚本是为你的导航菜单添加一些风味的简单方法。使用CSS你可以方便的自定义菜单来满足你的“外观与感觉”要求。 脚本非常的简单，如下.

Download

27. Mootools Demo Redux

简单的可展开的Javascript导航菜单

Preview

28. HoverAccordion

no-click二级菜单jQuery插件  (你可以用它他做任何你想做的).

29. 简单的Javascript手风琴菜单

Javascript手风琴菜单在如今的网页设计师世界广为使用。我们看到有很多的这样的脚本。这是其中一个非常小的极其简单容易使用的手风琴菜单脚本。不需要任何的框架并跨浏览器兼容。

Preview || Download

30. UvumiTools 下拉菜单

UvumiTools下拉菜单是非常简单的多级菜单，由HTML无序列表构造而成，使用 Mootools Javascript 框架，通过简单的 <ul> HTML 元素进行编辑.

31. 使用css和jQuery创建多级下拉菜单

Preview || Download

32. jQuery & CSS 实例 – 下拉菜单

下拉菜单与菜单条在早期的图形用户界面已经被大量使用。他们的使用变得无处不在,甚至预期，桌面应用程序，以及在网上迅速跟进。本文旨在描述最基本的，但是最强的技术，为您的应用程序或者网站的用户界面设计添加下拉菜单。

Preview

33. 浮动的菜单jQuery&CSS

对我们所有的人来说，为了使用菜单，处理长的页面需要滚动到页面的顶端，这有一个不错的选择，浮动的菜单帮随着页面的滚动。 HTML, CSS 与 jQuery, 完全遵守W3C。

Preview || Download

34. Superfish – jQuery菜单插件

Superfish是Suckerfish-style 菜单的加强型 jQuery插件。现在有纯CSS下拉菜单（所以没有js降低优雅性） 并增加了以下非常抢手的改进：

Preview || Download

35. JQuery Pager

一个简单的JQuery插件，为数据驱动的Web应用程序提供分页功能界面。

Preview || Download

36. jQuery feed 菜单

当feeds变得流行，在你的网站上它有一个为读者指向的RSS或者Atom feeds图标。做为feeds，在国外博客与网站中更为普遍。存在多个供稿的比比皆是，这里是 jquery feed 菜单解决方案!

Download

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

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

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

Preview || Download

2.效果生动逼真的jQuery菜单

学习如何使用简易的XHTML/CSS/JS创建令人惊奇的效果生动逼真的菜单，类似 Dragon Interactive (dragoninteractive.com).

Preview || Download

3. 使用CSS和jQuery创建非常Cool的动画效果导航 (教程 + 下载)

动画及视觉反馈是帮助用户在浏览和网站与网站互动的有效手段。虽然传统的Adobe的Flash是可以完成各种动画效果的，但是最近使用JavaScript的魔法，我们可以完全避免使用flash。

Preview || Download

4.jQuery目录导航插件

这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在列表之上的简易的(via CSS)导航条，向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数，是表明当你点击此字母的 时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。

Preview || Download

5. jqDock 菜单

变换图标模仿mac的Dock菜单, 水平或者垂直，以图标扩大过渡可选的标签。

Preview || Download

6.Jquery滑动菜单

这篇教程是像我们讲解与下载jquery滑动菜单，你可以在PSDtuts网页右上角查看效果。

This is how looks finished demo version:

Preview || Download

7.CSS 精灵 2 – 是JavaScript的时间

Preview

8. CSS Mac Dock 菜单

如果你是Mac深度中毒者,你会爱上我设计的这个CSS dock菜单。他使用了Jquery Javascript库和Fisheye部件界面以及我的一些图标。它有两种停靠风格-上端与下端。这个菜单加入到我的ITHEME中非常好。

Preview || Download

9.jQuery的Kwicks菜单

Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制的通用部件.

7 Examples || Download

10.Jquery文件树

jQuery文件树是一个可配置的， AJAX的文件浏览器jQuery插件 。您可以只用一行JavaScript代码创建一个定制的，完全互动的文件树。目前，服务器端连接器的脚本支持PHP, ASP, ASP.NET, JSP, 与Lasso。如果您是开发人员，可以轻松地使用所选语言创建自己的连接。

Preview || Download

11.学习jQuery: 褪色菜单 -更换内容

CSS-tricks上很好的教程，讲解如何使用css和jQuery, 这次是他们教导如何使用 jquery使得菜单选项褪色。

Preview || Download

12. 如何使用jQuery创建顺滑生动的菜单

曾经见过一些优秀的jQuery导航，你有想自己创建一个的冲动么？ 这篇教程是教你怎样建立拥有顺畅动画效果的菜单。

Preview || Download

13.Create Vimeo-like top navigation

学习如何创建像 Vimeo网站的导航菜单 ，虽然只用了xhtml,css used,但是我仍然想包含他。

Preview + Vimeo site || Download

14. jQuery (mb)菜单 2.3

这是一个强大的jQuery 部件，轻松创建更加直观的多级树形菜单或者继承菜单 (右击)!

你可以添加许多子菜单；如果子菜单或者菜单在页面中没有声明，组件会通过AJAX通过调取菜单中的模板页ID来获取。你需要的（菜单属性值）ajax页面会返回并作为下面的菜单实例而格式化代码。

Preview || Download

15. Coda 滑动菜单

Preview || Download

16. jQuery idTabs

idTabs是jQuery的插件。他能非常容易的为网站添加选项卡. 但是他也为无穷的可能性敞开大门。

Preview || Download

17. 使用CSS & jQuery创建顺畅的选显卡内容区

网页设计师设法把大量的信息浓缩在一个网页上而不失可用性是最大的挑战之一。内容选项卡化是处理此类问题非常棒的方法，最近广泛被应用于博客。这是一篇非常棒的教程讲解，使用HTML建立一个小的选项卡信息盒，最后使用一些简单js功能与jQuery库实现。

Preview

18. 为jQuery爱好者准备的熔岩灯!

轻量级Lavalamp菜单通过令人惊奇的jQuery javascript 库封装成的插件.

Preview || Download