Sliding/Gliding Menus
How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery
Nowadays there are a competing host of JavaScript libraries around these days. Though I prefer jQuery, I have always liked the way the menu on MooTools worked. So in this tutorial well get that same effect.
Creating tabbed content is easy with jQuery UI. Using a simple HTML layout and calling the tabs function is all it takes. Here, I'll show you how to make a degradable tabbed interface. That is, we'll make it so the page is still readable when JavaScript is disabled. This involves hiding and showing elements using JavaScript before enabling tabs.
See the live demo. Try turning off JavaScript to see how it degrades.
Here is the HTML of the tab widget. By default, UI tabs use an unordered list with anchor links as the tabs and corresponding div tags with the content. The list starts hidden and will be shown with JavaScript, and each section has a heading that we will hide if JavaScript is enabled.
<ul class="tabmenu hidden">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div id="tab-1">
<h2>Tab 1</h2>
<p>Content of tab 1</p>
</div>
<div id="tab-2">
<h2>Tab 2</h2>
<p>Content of tab 2</p>
</div>
<div id="tab-3">
<h2>Tab 3</h2>
<p>Content of tab 3</p>
</div>
<div id="tab-4">
<h2>Tab 4</h2>
<p>Content of tab 4</p>
</div>
</div>
当然，生成缩略图这个工作如果交给程序来完成，效果会好很多，但是有时出于某种因素，例如服务器不支持GD之类的，难免就要请CSS代劳。
把一副大图片按比例缩小到某个尺寸，对于现代浏览器，直接使用max-width和max-height两条CSS属性即可。
对于IE 6.0及以下版本，以上两条CSS属性均不会被理会。之前处理这种事情，我们往往会借助Javascript，然后为图片加上onload事件。例如：
57个超酷的CSS图片展示，图片幻灯片和Lightbox特效代码.含盖了Ajax, JavaScript 以及Lightbox based galleries。你可以点击标题进入演示及查看代码，图片用了flickr外链，顺便也测试一下flickr的外链。根据flickr规则，外链图片必须链回flickr的。
