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 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 >
Head First HTML with CSS & XHTMLTired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML with CSS & XHTML and reall... Read More >
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 >
3