There are many examples on creating tabbed navigation with (or without) help of JavaScript frameworks like Prototype, MooTools or JQuery. However, I find that it’s much easier to create draggable tabbed navigation using Chain.js and its great extension: Interaction.js.

Riziq, creator of Chain.js & Interaction.js, already showed an example on how to utilize the libs to build tab interface in a few JS code lines. However, for its own purpose, the example is not SEO-friendly — disabling JavaScript in your browser will result in empty content and search engines will see nothing on your page consequently. Now say, you want to create a tabbed navigation for your blog to show/hide “Latest Posts”, “Latest Comments” etc. and you want the links can be seen no matter if JavaScript is enabled or not in reader’s browser — something looks like this:

Blog's tabbed navigation

Step 1: HTML & CSS

Just create a template in HTML and full links to latest posts, comments and most popular articles:

Read the rest of this entry »

Recommended Reading

Mastering CSS, Vol. 1 (Smashing eBook Series)Are you stumped by the rather sophisticated nature of CSS? Getting a grip on this still dewy technology isn’t quite as hard as you might think. Conn... Read More >

CSS Pocket Reference (Pocket Reference (O'Reilly))

When you're working with CSS and need a quick answer, CSS Pocket Reference delivers. This handy, concise book provides all of the essential informa... Read More >

JavaScript: The Definitive Guide

This Fifth Edition is completely revised and expanded to cover JavaScript as it is used in today's Web 2.0 applications. This book is both an examp... Read More >