Multiple document interfaces can be realized by implementing tab-based design, the users can utilize tabs to navigate between documents. For tab-design, generally CSS is used, for faster loading and optimization, Ajax techniques can be used too. There are so many Web pages describing tab usage, the ones using most interesting techniques are as follows:
DOMTab
DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded.
jQuery idTabs
It makes adding tabs into a website super simple. But it can also open the door to endless possiblities.
Joshua Kaufman’s CSS Tab 2.0
Build CSS tabs without using any images or hacks and with as little CSS as possible.
Ajax Tabbed Page Interface
There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here’s an example of a tabbed interface using Ajax to load the new pages.
JQuery Nested Tab Set
Nested tab set done with the ExtJS UI Library.
DHTML Ajax Tabs Content Script
This is a versatile Ajax Tabs Content script that lets you display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab (ie: when page is reloaded), an “IFRAME” mode, a “slideshow” mode, ability to expand/contract arbitrary DIVs on the page at the same time, nested tabs, and much more.
Fancy Sliding Tab Menu
Included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.
Ajax Tab Reloaded
Taken the idea of the sliding door tabs and mixed them up with a little javascript and ajax to make them very dynamic on the client side.
Yahoo TabView
Tabs based on Yahoo UI Library.
KollerMedia Tabmenu
If you want that the tabs are changing on click and not on mouseover -> then just change the onmouseover to onclick Of course you can set a link to each Menu Tab - just set the linkurl in the href and delete the onclick=”return false;” At the moment it’s not usable with disabled Javascript but i will fix this as soon i have time. If you want to activate the Tabs via Keyboard - just add an onfocus=”” with the same functions as the onmouseover in it. I’ve packed everything in 1 File - but you can also put the css in an external css file and the javascript in an external javascript file. There are a lot of other ways how you can do something like this but if you use more then one of these tabmenus, i think this is one of the best solutions.
Light Weight Low Tech CSS Tabs
An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea. Complete source is available for download, check this is also an another cool menu.
Tab Accordian
Tab navigation with sleek animation using Moo FX.
Tabbed Navigation using CSS
How to create low-bandwidth tab navigation on a web page using CSS..
JQuery Tab Animations
A sample that show how you can add tab transition animations to your existing Tab Panel Controls.
Control.Tabs
Control.Tabs attaches creates a tabbed interface from an unordered list of links/anchors that point to any elements on your page that have an id attribute.
Tabifier
Automatically create an HTML tab interface using plug-and-play JavaScript.
Glowing Tabs Menu
Glowing Tabs Menu uses a background image that accentuates the outline of the tabs. And to jazz it up, the selected tab “glows”, by using the “Sliding Doors” technique to shift the original background image upwards to reveal the glowing version of the tab design. An exquisite yet professional looking horizontal menu.
Tags: download, tabs, Techniques