知更鸟 » Web设计

关于jQuery fadeIn() & fadeOut()在IE中的问题

知更鸟 — Tue, 26 Jul 2011 09:56:36 +0000

使用用jQuery fadeIn()可以实现淡入效果，比如我目前用的主题侧边TAB菜单，就具有此效果，但是在IE浏览器下模样大变，文字周围总是有那么一小段时间显示重影，虽然通过给其中的元素加个背景色，可一定缓解问题，但总是不理想，转老外的一篇相关文章，研究研究，估计都不会达到其它浏览器的效果。

I’ve noticed that when I use the jQuery .fadeIn() or .fadeOut() method I see ugly pixelated text in Internet Explorer after the animation has completed. This seems to be related to an issue with an IE specific style filter called clearType. To solve the problem, you need to remove the clearType filter after your jQuery element has faded in. There are a few ways to do this:

Preview / Sample / Demonstration

3 Ways to Fix The Issue

1. Add a Background Color

Set a background color with CSS on the element that is fading in or out. This is the most basic way to solve the problem.

2. Remove the clearType Filter

After fading in an element you can add this simple callback function to fix the bug.

$('#fadingElement').fadeIn(2000, function(){
this.style.removeAttribute('filter');
});

3. Use a Custom fadeIn/Out Method

This method serve’s as a replacement for the built-in fadeIn() & fadeOut() methods for jQuery.

(function($) {
$.fn.customFadeIn = function(speed, callback) {
$(this).fadeIn(speed, function() {
if(jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
$.fn.customFadeOut = function(speed, callback) {
$(this).fadeOut(speed, function() {
if(jQuery.browser.msie)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
})(jQuery);

After you add this method to your JavaScript, change your ‘fadeOut’ to ‘customFadeOut’ and your ‘fadeIn’ to ‘customFadeIn’. See a sample of this method on the demo page. Thanks to Benjamin Novakovic for writing this jQuery plugin

Ugly Transitions on Animated Elements

When you animate anything in IE there is an ugly transition effect that occurs before the fix is applied. There’s no way to prevent or fix clearType while the fade occurs. A work-around is to fade something else, like a

on top that fades in, rather than your text content.

Advanced Scenarios

There are more IE related issues that people have mentioned seeing in advanced setups as well.

I found that the answer was to set the z-index. I have a stack of absolutely positioned divs and wanted to fade between them. The only way I could get IE8 to handle the fades nicely was to set the z-index of the element to be faded in higher than the element to be faded out i.e.:

$('#fadeoutdiv').css({zIndex:99}).fadeOut(2000);

$('#fadeindiv').css({zIndex:90}).fadeOut(2000);

Thanks to Al Flemming

A demonstration for Al’s fix has been added to the demo page
Resources

jQuery in Action: If you find yourself frequently using jQuery in your projects I would highly recommend checking out this book. I’ve read this and also Learning jQuery 1.3 and have found jQuery in Action to be clearer, more straight forward and more powerful.
jQuery IE Fade Test
jQuery Reference Guide jQuery fadeIn() & fadeOut(): Problems in Internet Explorer
jQuery fadeIn/fadeOut IE Cleartype Glitch

40个值得关注的网页设计

知更鸟 — Thu, 10 Mar 2011 05:12:11 +0000

I am continuing Top DeviantArtist worth watching series and now I stopped to the best web designers I could find. I only listed those artists, whom layouts I found to be really unique and inspiring, taking classical web design actually to the next level. These layouts are really artworks with amazing details, You usually don’t see browsing through the web. Consider this article as inspirational article now and if You choose to watch those artists, then inspiration blasts in long term. At first I wanted to pick only 2 website examples from each artists, but there was several so amazing webdesigns, where I couldn’t stop and picked 3 or 4 examples. Enjoy this list, hope this will help to get inspired in regular basis!

1. Elusive – (22), from Canada.

2. ECP-Pro – Kim Roar Dag Steen Trollsås (18), from Norway

3. Fel1x – Felix Valentin, from Germany

4. Nikeos – (19), from Israel

5. JK89 – Justinas Krasuckas, from Lithuania

6. blind91 – Sebastian (18), from Germany

7. kakkr – from United Kingdom

8. mindfuckx – Jan Van Lysebettens (24), from Belgium

9. nodethirtythree – from United States

10. tehacesequence – Marcin (25), from Poland

11. Pixelbudah – Oasim Karmieh (28), Romania

12. TIT0 – Alexandr (24), from Russia

13. depthskins – Damian Madray (23), from Canada

Very loooooooooooong and beautiful website artwork – be sure to check it out in fullscreen.

14. sone-pl – Krzysztof Kolatorski (32), from Poland

15. Gregbike – Grzegorz Gawlik (22), from Poland

16. l-a-m-p-e – Philipp Lampe (20), from Germany

17. alexdesigns (19)

18. Frostenblade – (19), from Singapore

19. Jedi88 – Dennis, from Germany

20. Jimmybjorkman – Jimmy Björkman (18), from Sweden

[ad#bildes-ads]

21. Ld-sign – Sascha Zemke (20), from Germany

22. Pho3nix-bf – Lucas (28), from Poland

23. JuliusX – Ali (20), from United States

24. Osec – Daryl Ginn (19), from United Kingdom

25. Nas-Wd – Nasir Wadood (24), from Pakistan

26. zee7 – Zulal (20), from Pakistan

27. Zhyphyr – Paris Miguez (28), from Spain

28. Pazdan – Tomek (22), from Poland

29. G30dud3 – George English (16), from United Kingdom

30. TurokFreak – Evertt De Sousa (25), from Brazil

31. Frose – (20), from Germany

32. Uribaani – Miika Ahvenjärvi, from Finland

33. CC-Designs – (18), from Germany

34. Carl06 – Carl (19), from Germany

35. Koenigpersoenlich – (16), from United States

36. Nonlin3 – Martin, from Poland

37. Rheyzer – Reynan Alibuyog (23), from Philippines

38. Outlines – Dimiter Tzankov, from Bulgaria

39. Sansana – Daria Michalska (20), from Poland

40. Niponwar – Vladimir Chernov (19), from Canada

Ok, so this is pretty much it – at least for me this collection is in gold value, I just love web design, though I am lacking time, but in future, I’m sure I’ll release some good templates,themes and so. Enjoy, get inspired and watch those artists!

Add some more links, if You know very good web designers, who are not on this list!

Web设计中体现出来的浓重的苹果风格

知更鸟 — Thu, 10 Mar 2011 02:00:20 +0000

优雅的设计贯串苹果所有的产品，也包括网站，不仅苹果自己的网站，世界上有无数模仿苹果的网站设计，然而是什么构成了苹果式网站设计风格？浅淡的配色，大面积留白，清晰统一的导航，雅致的图标，还有，拒绝使用 Flash，本文分析了 Web 设计中苹果风的构成元素，并提供了大量苹果风 Web 设计案例供大家欣赏。

苹果风构成元素

浅色系与微妙的渐变色

留白，留白

清晰明快的字体

产品图片充满美感

雅致的图标

干净整洁的网格布局

清晰，友好，一致的导航

产品功能的介绍结合非常出色的图片，视频

小而清晰的字体

靠明显的对比效果引起注意

简洁的指南

不使用 Flash

苹果风 Web 设计欣赏之一：苹果家族 Apple Developer

苹果风 Web 设计欣赏之二：仿苹果家族 1. Panic Coda
这是一个非常受欢迎的 Mac 代码编辑器

2. AteBits
简单就是美

3. Cultured Code
漂亮的图标贯串始终，对内容的组织很有效

4. Mac Rabbit
灰白色系黑渐变，雅致的图标

5. Twelve South
非常漂亮的产品图片，苹果产品图片

6. Metalabs
虽然表面上不是很苹果，但骨子里。BTW，这就是据说被 Mozilla 的一款产品的 UI 所抄袭的设计 （译者注）

7. Version App
很黑，但仍然很苹果

8. IconDock

9. Acrylic Apps

10. Billings App
深得苹果精髓的设计，大产品图 + 灰白蓝色系 + 大小对比强烈的字体

11. Postage

12. Bohemian Coding

13. Checkout App

14. Nprinting

15. PostBox Inc

16. Symphony CMS

17. Invoice Machine

18. Icon Designer

19. Transmission Apps

20. 280 Slides

本文国际来源

11个让你成为用户体验专家的博客

知更鸟 — Sun, 14 Nov 2010 20:53:38 +0000

在今天的网页设计世界,很多都强调了SEO,迫使我们为了机器.即使SEO是网页设计者必须考虑的,但是关注需要放在用户上-用户的呼吸,打字和点击.幸好,有一些关注用户体验的博客,那些博客有很多信息,贴士,和洞察力那些可以帮助到你成为一个用户体验专家.这里有大约11个最棒的博客.

UX Magazine

UX Magazine集中了很多讨论用户体验原则的内容.

Signal vs. Noise

Signal vs. Noise是37 signals的博客.37 signals打造了很流行地网页应用像basecamp, 他知道一个或两个东西关于用户体验.

UX Booth

UX Booth 是一个用户体验社区.里面有很多有用的文章或资料关于可用性,用户体验和互动设计.

Adaptive Path Blog

Adaptive Path 创造了用户驾驭地产品可以递交伟大的体验.他们的博客允许他们有机会来分享他们学到地东西.

UsabilityPost

Usability Post 是一个关于设计的博客,不单单网页是长什么样,还是它怎么工作的.Usability Post 是用来提供相关的资源,贴士关于很好的设计来帮助你制作好的产品.

inspireUX

456 Berea Street

456 Berea Street 是瑞典网页专家（Roger Johansson）的博客。他写了关于网页标准，可用性和其他关于用户体验的主题。

Functioning Form

Functioning Form是一个博客关于界面设计。也就是说，在这里，艺术和科技成为一种体验，在这里，消息和媒体合并在一起，在这里，互动是很重要的和享受。

A List Apart

关于网页标准和实践。

Boxes and Arrows

关于实践，发明和设计的讨论

EverydayUX

EverydayUX是一个博客关注于那些设计尤其是关联到互动设计。

web设计趋势与潮流

知更鸟 — Sun, 14 Nov 2010 20:50:13 +0000

19年前，世界上第一个网页诞生，它没有设计可言，由文本和url组成，样式只有最基本的

。而如今，Web设计已经成长为独立而庞大的设计门类，一个网页的创造需要多个工种、多种技术的参与，其流程的复杂和挑战性已经超过任何传统设计类别。

这19年间，网站的拥有者越来越清楚自己的目标，而设计师们也越来越理性和专注，人们在不停寻求商业诉求、用户、审美和技术上的平衡点。每一年过去，都有无数过时的风格、特征元素以及实现技术被抛于身后。

设计风潮体现着一个时期内人们对特定的风格、趣味、审美、技术乃至理念等各种模型或特征的追随。新技术的发展、媒介载体的占有量的变化、新网站类型的诞生、全球的设计思潮的影响、行业领军者的转变、明星设计师个体的亮点，这些因素都在推动潮流的变化。你可以回想一下那些曾经风靡一时的模式：复古的像素样式；Google的朴素之风；韩式清新插画风；Flashsite的兴起带来的不规则布局和动画的滥用；Apple引发的对质感的追求；用户和情境意识的觉醒；对细节的关注——圆角和阴影的广泛运用； Web2.0设计风潮中典型的配色和特征元素；空间与层次感的魔术……

09年流行的半透明风格：

空间和层次感的魔术：

潮流的涌现，是社会一致化与个体差异化的碰撞，每一次碰撞都推动着这个行业的进步。

让我们来看看这些发生中的变化：

简洁，精简，极简

极简主义（Minimalism ）在这一年大热。原因有4点：

1. 手持便携设备的占有量逐步上升，人们的访问方式发生了改变，小尺寸屏幕所需的精简之道反过来影响了整体的设计趋势。

2. Apple简洁、专注、充满诱惑力设计哲学重领潮流，效仿者众多。

3. 来自全球设计思潮的影响：极简、禅意、人文、空间感的“日式风格”这两年在出版界、时装设计、包装设计、工业设计界都颇受追捧。

4. 网站的专业性和针对性在进一步加强，人们选择一个网站一次把一件事做好、做到极致，而非盲目扩张。这也使“精简”拥有更大的实现空间。

极简主义体现设计师对意图、受众、情境的强大控制力。不是简单的做减法就可以了，如果不能很好地把握取舍的宗旨与理由，一个为了极简效果而精简的页面可能看起来庸俗不堪，是为“做作”的留白。

操刀这一风格需要对作品有充分的自信和理解力，更重视细节和布局，把握恰当的对比、强调。

来自版式和留白的均衡美感

极简主义风格非常适用于以图片为表现主体的网站

极简主义的风潮中，还涌现了许多单页网站。所有内容都放在一个页面上呈现，通过分屏来巧妙地布置格局，不再有跳转和复杂的站点结构，一目了然。

更有人情味与趣味的设计

运营上的专注使得设计师们可以在设计中投入更多的感情，更有针对性地取悦受众。从保守、冷漠、功利的陈旧风貌中，涌现出更多富有生命力和趣味的产品。

Twitter取得了巨大成功，可爱的小鸟形象深入人心。以动物为主题的logo和网站吉祥物也随之风行起来。

这一变化出现的原因：
1是具有针对性的中小型服务和应用类网站大批涌现。
2是来自示范者的力量。
3是多元化的必然趋向。
4是在功能性、规范性和用户体验之外，设计师开始寻找那些从未出现过的、能更深层次打动用户的东西——“一种在感情上赢得人们喜爱的东西”。

亲和、活泼、富有感染力、配色清新、使用自然元素作为装饰物。

曾经很不常见的高饱和度的配色，这种充满动感和生命力高调设计让人充满惊喜。

精致有趣的细节

对传统设计的借鉴

Web设计这个年轻的分支在自我生长的同时也在不停向传统设计汲取营养。在布局与版式方面，设计师们一直在探寻更好的表现手法，所以尝试从传统的设计媒介中寻求灵感，杂志版式布局（ Magazine-style Layouts）的从09年就开始大热，不光大型新闻网纷纷求变，杂志版式布局的Wordpress Themes 也炙手可热。这一变化对传统设计不仅仅是形式上的追随，更重要的是尝试去借鉴与融合的态度。

Times 和 Financial Times 都是国外老牌媒体，他们的网站布局结合传统纸媒版式有许多新潮的亮点，比如竖式的流体布局，图文混排，头条强调，由标题字号变化带来的层级差别。

而国内的此类网站绝大多数采用的还是非常传统的横向区块布局，信息密度高，版式缺乏节奏和韵律。

由比较可见，国外的大容量信息网站的趋势是降低首页的信息密度，把内容分摊到二级频道；版式上更具引导性、更适于阅读，浏览方式像读报一样更流畅随意。
由于广告盈利价值的差别，国内这类网站还是使用信息密度极高的索引模式，所以看起来更像说一份导流量的“黄页”而非可随心阅读的媒体。在信息呈现密度与模式无法改变的情况下，照搬国外的版式布局是非常危险的。

除了在样式上的借鉴，传统版式设计上的许多经典的实现手法也移植了过来，最著名的就是黄金比例和栅格系统（Grid System)。栅格系统的历史有300多年，运用严谨的几何网格来指导和规范元件的分布排列。将传统栅格移植为适合网页设计的系统，不光是创造了一种工具，也产生了一种普遍的审美规范与倾向。无论你是选择遵循规范还是打破规范，都是对它的推动。

960px宽的网页栅格系统 960 Grid System：

个体风格带来的变化

谁才代表着趋势？有人认为设计师们所追捧的变化代表了潮流，有人认为top100的大站才是大势所趋。狡猾一点说，两个说法都不确切，网站运营的Top100并不代表设计上的Top100，出于多种原因，很可能它们是最保守的阵营。但你无法忽略他们对用户/客户的审美及视觉习惯造成的影响。而设计师们虽然愿意挑战和尝试变化，但在面对个人化设计和商业设计时，他们的取舍却往往不尽相同。

巨头和个体们在设计风格一直在互相影响和渗透。所以你永远不应该轻视那些看起来“个人化”和“小众”的创新设计。观察它们的最好舞台就是设计师的Blog和Profile站。

下面这几点都是从现在小众网站上流行，慢慢被许多普通大众网站设计所趋向的特征。。

更大header区，更醒目的logo和标识，字号更大的标题。

内容放得再多再好，但用户记不住“你是谁？”也是白费。更大header区强化了用户对品牌和风格的记忆，让你有更多的发挥余地去表现。

在背景中使用恰当地纹理。

十几年前，在美化手法贫乏的年代，人们也喜欢在背景中使用纹理，但大多只取得了浮华嘈杂的效果。现在的设计师们学会了理性而低调的使用纹理来制造风格、提升品质和烘

户外服装的电子商城。使用了粗砺的水泥纹理：

婴幼儿用品的电子商城，使用了清洁柔和的圆点纹理：

把Footer区利用起来

这是典型的受Blog设计影响的潮流，在footer区放上更多的信息、标志与快捷入口。

更注重品质，更能抓住用户眼睛的设计

这点变化在和消费挂钩的网站上非常明显。设计师们注重对设计心理学和视觉传达的技巧的运用，使用强调和对比的策略来引导用户的视觉焦点。更醒目的标题，高质量的图片，使用slideshow来创造更多展现空间空间，这些手法都在强调那些希望得到用户关注的地方。

Apple网站的专业、直接、有效的界面设计，不光打动了消费者的心，也吸引了众多开发者的效仿，大量App应用网站都以使用Apple风格为荣。

iPhone 4 发布时的Apple.com 首页：一切无关的都被省略了，表现主体被无限强调，它牢牢抓住人们的目光，传达出最直接的诱惑：

消费类网站的趋势：使用更醒目的标题，更大尺寸的高质量产品图片，让用户形成感官上的认识，而不仅仅是信息的罗列。高质量的商业摄影越来越多地出现在网站配图中。精心处理过的抠底图片配合简洁的整体设计，是电子商务网站近几年的趋势。

Slideshow的使用风头正劲。用于在有限的空间内展示更多的信息（通常是为了放下更多大图片），增加页面的动感和观赏的流畅性。

在页面里运用可视化图表也是一个潮流，一些表单操作也被加工为可交互的图表。将信息或数据可视化，助读者更深入直观地理解其含义。

更有效但低调的交互。

交互在Web设计中是如此重要，为了让用户与界面更好地沟通，许多设计师过度地重视了交互，特别是只关注细节而失败于全局。大量交互行为被过度设计，变成了用户的负担。如果信息能够被更好的匹配或呈现，许多交互是可以避免的。未来，设计师们力求通过优化信息架构和使用流程去减少交互，更成熟地运用情境菜单（上下文菜单），将操作反馈处理得更为隐形和自然。

交互的设计会向着直接有效、更低调、提升使用乐趣的方向发展。

coda.co.za 这个网站的交互反馈，非常简洁优雅，效果自然。

当鼠标移到某张CD上的时候，它信息会通过隐藏右边的CD显示出来。这种反馈比悬浮框更自然。

与物理世界操作经验吻合的交互体验

越来越多的Web操作允许快捷键的参与。允许快捷键可以提升高级用户操作效率，增加使用乐趣，同时也是为了更好的向无障碍访问的方面进步，照顾视力不好或无法鼠标的用户。

结语：去哪里捕捉和观察趋势。

相较于国外的这一波波风潮，国内的设计师的行动并不多，许多原因使他们面对这些变化，或保守或滞后。同时，许多生硬的抄袭和模仿也正在伤害国内的设计行业，从Templates (许多是过时且侵权的) 开工、抄捷径的“拿来主义”不光在腐蚀一个设计师的创造力，也在折损着整个行业从业者的价值。

我希望年轻的设计师尽可能多得去关注国外的专业Blog和作品画廊站（Gallery），低头干活的同时，抬头看路。这样才能在团队中提供自己的专业判断，而不只是一个被动的“美工”。

专业Blog：

www.smashingmagazine.com 可以说是如今全球内容质量最高的Web设计专业Blog。订阅量接近20万。设计师们一定不可以错过。
sixrevisions.com 为首的多名技术专家共同撰写的blog，提供大量对Web设计师和开发人员有用的技巧、教程和资源。还有很多前瞻性的分析文章。
abduzeedo.com 更新量很大,如果你设计卡壳了,这是寻找灵感的好地方.

作品共享和灵感采集站：

deviantart.com 全球最大的设计师展示和分享创作的平台。其网站本身交互设计也非常有特色。
ffffound.com 图片类的delicious服务，一个你永远不可能拿到注册码的社区，但是其中活跃着大量全球一流的设计师和创作。

Web设计画廊（Gallery）

designshack.co.uk （可按配色、布局和类型进行筛选）

reeoo.com （可按配色进行筛选）

siteinspire.net （可按样式、主题、网站类型进行筛选和排序）

coolhomepages.com （可按类型进行筛选和排序）

42个采用WordPress精心设计的博客

知更鸟 — Sun, 20 Sep 2009 07:36:23 +0000

博客虽然以内容为先，但独特、漂亮的博客模板设计，可以更加吸引浏览者的眼球和注意力。所以漂亮的博客模板设计加上原创高质量的内容，必将使您的博客脱颖而出。

1. Assault Blog

2. BestBlogBox

3. Cheaper Than Therapy

4. Cult-foo

5. Narstuff

6. Jason Bradbury

7. Juan Diego Velasco

8. Ecoki

9. All For Design

10. Hatch

11. heyIndy

12. 1stwebdesigner

13. Behind The Websites

14. Design Your Way

15. Digital Deceptions

16. Brown Blog Films

17. Elitist Snob

18. Studio 7 Designs

19. Getting Crazy

20. Gisele Jaquenod

21. ilovecolors

22. Inspiredology

23. garamiz blog

24. Jeses Rodriguez Velasco

25. Kulturbanause

26. Larissa Meek

27. LeBloe

28. Macalicious

29. Loop

30. Matblogg

31. Melech Mizrahi

32. Missionpoken

33. No Sleep for Sheep

34. One Nation Magazine

35. Outlaw Design Blog

36. No Milk Today

37. Luthier Services

38. Owltastic

39. UX Booth

40. PopCultureTees

41. Jeffrey Sarmiento

42. Julius Mattsson

原文链接：http://www.webdesignbooth.com/wordpress-showcase-40-beautiful-and-well-designed-blogs-powered-by-wordpress/

在线CSS网格布局生成器精选

知更鸟 — Fri, 18 Sep 2009 08:16:52 +0000

有了这些在线CSS网格布局生成器，即可方便学习DIV+CSS,也可以省去很多精力，制作出符合标准的web页。

1.blueprint-generator

2.constructyourcss

3.csscreator

4.cssfly

5.css grid calculator

6.CSS Portal CSS Layout Generator

7.Design by Grid Generator

8.DIV Design Grid Layout Generator

9.Firdamatic

10.Grid

11.Grid Calculator

12.Grid Designer

13.Grid Generator

14.Grid Maker V1.2

15.Grid System Generator

16.GridFox – The Grid Layout Firefox Extension

17.GridMaker V2 Reboot

18.Gridr Buildrr

19.PageColumn Layout Generators

20.Phiculator

21.CSS Source Ordered

22.TypoGridder version 0.2

23.Variable Grid System

24.Web Page Layout Grid

25.WPDFD Browser Grid

26.YAML Builder

27.YUI CSS Grid Builder

28.1kbgrid

原文来自：http://fishyoyo.com/

慎用@import导入样式文件

知更鸟 — Wed, 16 Sep 2009 06:43:00 +0000

WordPress主题一般是在header.php中采用下面的模式导入样式文件:

[link rel="stylesheet" href="" type="text/css" media="screen" /]

不知从什么时候开始，越来越多的WordPress主题（特别是国外的）采用在style.css代码最前面，加入：

@import url(../ Theme/style.css);

导入样式文件.

采用@import导入样式文件，网上通俗的说法就是造成无法同时下载不同的样式文件（如果这个主题有多个样式文件），会增加页面总体加载时间，网络状况不好的情况下，刚开始的几秒中会很混乱，所以建议将采用这种模式导入的样式文件的主题，如果不是很复杂的，可以将样式文件合并到style.css中，可能会对博客的打开的速度有所帮助。

100余款网站幻灯广告源代码打包下载

知更鸟 — Mon, 14 Sep 2009 09:52:20 +0000

flash幻灯基本上是各大网站必备的元素，弄个幻灯加到WP主题装饰一下自己的博客也是不错的选择，这100多幻灯源码基本上汇集了众多网站幻灯源代码。

纳米盘打包下载

36个JQuery导航菜单(转)

知更鸟 — Thu, 03 Sep 2009 08:54:00 +0000

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

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

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