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:
Recommended Reading
CSS Mastery: Advanced Web Standards SolutionsThis is the second edition of the 27,000 selling (on Bookscan) CSS Mastery. It brings the old book up to date with information on CSS 3 and modern browser standards. It also includes completely new case study chapters and new examples.
High Performance JavaScript (Build Faster Web Application Interfaces)If you're like most developers, you rely heavily on JavaScript to build interactive and quick-responding web applications. The problem is that all ... Read More >
HTML5 for PublishersHTML5 is revolutionizing the Web, and now it's coming to your ebook reader! With the release of the EPUB 3 specification, HTML5 support will offici... Read More >
3