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

Eloquent JavaScript: A Modern Introduction to Programming

"A concise and balanced mix of principles and pragmatics. I loved the tutorial-style game-like program development. This book rekindled my earliest... Read More >

Smashing CSS: Professional Techniques for Modern Layout (Smashing Magazine Book Series)PROFESSIONAL TECHNIQUES FOR MODERN LAYOUT

Smashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, b... Read More >

HTML A Beginner's Guide

Essential HTML Skills--Made Easy!

Create highly functional, impressive websites in no time. Fully updated and revised, HTML: A Beginner's Gui... Read More >