Welcome visitor! Please wait till I load my blog page...

.......

30+ CSS Tab Navigation Scripts for Bloggers and Web Designers


Tabbing navigation should not be confused with tabbed document interface In computing, tabbing navigation is the ability to navigate between focusable elements (such as hyperlinks and form controls) within a structured document or user interface (such as HTML) with the tab key of a computer keyboard. Usually, pressing Tab will focus on the next element, while pressing Shift + Tab will focus on the previous element. The order of focusing can be determined implicitly (based on physical order) or explicitly (based on tab index). In general, tabbing is cyclical, not linear, meaning that the tabbing will cycle to the first/last element when it moves away from the last/first element.



  • 17+ Featured Content Slider for Blogger Using jQuery Tutorial






  • Advanced Tabs from EXT JS 

    This is the most powerful tabs component that I can found. It comes with a lot of features such as auto tab resizing, tab scrolling, icons, context menu plugin, and also add/remove tabs via script.


    Article : http://dev.sencha.com/deploy/dev/examples/tabs/tabs-adv.html






    Nanotabs 

    Nanotabs is a tiny version of idTabs that doesn’t require jQuery. It is only 2KB in size!


    Article : http://www.sunsean.com/nanotabs/







    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.


    Article : http://blog.fueledsoftware.com/m/blogs/fueleddev/demos/demo.html






    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.


    Article : http://livepipe.net/control/tabs





    JavaScript tabs with jQuery 

    jQuery plugin that lets you create JavaScript tabs very easily. Examples of simple tabs, custom tabs, slide effects, fade effects and callbacks demos available.


    Article : http://stilbuero.de/jquery/tabs/





    CSS Menu With Slider 

    This little example shows how to make really simple and yet very nice CSS Menu with slider.


    Article : http://dragan.yourtree.org/blog/en/2007/05/11/css-menu-with-slider/






    CSS drop down menu 

    Instead of the menu being triggered by placing your mouse of the menu label, it is trigger by moving your cursor over the down arrow on the right side of the menu label.


    Article : http://moronicbajebus.com/playground/cssplay/drop-down-llama-menu/







    jQuery Coda-Slider 

    Nice sleek tabs that slides through each tab.


    Article : http://www.ndoherty.biz/demos/coda-slider/1.1.1/




    Fabtabulous – Simple tabs using Prototype 

    This is a tab implementation using another famous Javascript framework – Prototype.


    Article : http://tetlaw.id.au/view/blog/fabtabulous-simple-tabs-using-prototype/




    DD Tab Menu from Dynamic Drive 

    DD Tab Menu is a standards compliant, 2 level tab menu script. The script uses CSS to control all of its appearance, and plain HTML to implement the entire menu tabs and contents.



    Article : http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm






    DOM dynamic Tabs 

    DOM dynamic Tabs allows you to easily create tabbed content on the fly without creating HTML.



    Article : http://www.ajaxlessons.com/2006/02/24/dom-dynamic-tabs/






    HTML Dog CSS Tab 

    A popular form of navigation is tabbed navigation-a group of links that give the impression of being protrusions attached to different areas of unseen content. With CSS you don’t need to be restricted to rigid images for every tab-you can maintain complete control over appearance and text at a fraction of the file size of image-only alternatives.


    Article : http://www.htmldog.com/articles/tabs/






    jQuery Thickbox 

    ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.


    Article : http://jquery.com/demo/thickbox/







    jQuery idTabs 

    It makes adding tabs into a website super simple. But it can also open the door to endless possiblities.


    Article : http://www.sunsean.com/idTabs/






    Tab Accordian 

    Tab navigation with sleek animation using Moo FX.


    Article : http://www.nyokiglitter.com/tutorials/tabs.html




    DHTML Goodies Tab Panes 

    Tab navigation with a close [x] button on each tab.


    Article : http://www.dhtmlgoodies.com/scripts/tab-view/tab-view.html





    dhtmlxTabber – AJAX powered DHTML Javascript Tabber component 

    This AJAX-enabled component lets you create nice looking and feature-rich tabs easily. You can put your tabs to left, right, top or buttom aligned according to the predefined or your own style.



    Article : http://www.dhtmlx.com/docs/products/dhtmlxTabbar/index.shtml







    Tabtastic 

    Tabtastic supports multiple or nested tabsets on the same page and allow users to bookmark the page loading to a specific tab.



    Article : http://phrogz.net/JS/Tabtastic/index.html






    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.


    Article : http://www.andrewsellick.com/examples/tabslideV2/



    Tab Pane 

    The look and feel of Tab Pane is entirely decided by CSS. So, you can change it easily through creating different styles.



    Article : http://webfx.eae.net/dhtml/tabpane/tabpane.html






    SimpleTabs by Komrade 

    SimpleTabs doesn’t depend on any third party Javascript library so it will not cause any conflict if you are already using any Javascript library such as jQuery or MooTools. It is small in size and can remember last tab clicked before you reload your page.


    Article : http://komra.de/labs/simpletabs/







    Closeable Tabs module 

    The closeable tabs module allows tabs to be removed. The HTML markup for this tabs module is same as standard tabs module.


    Article : http://www.nodetraveller.com/sandbox/moduleTabs/closeable.php






    Yahoo UI Library: TabView 

    This is another tab component by Yahoo UI Library. It comes with a cheat sheet, good tutorials and also examples.


    Article : http://developer.yahoo.com/yui/tabview/






    Brainjar Tabs 

    Using CSS to build a tabbed display. One where the user can click on individual tabs to view different content within the same space.


    Article : http://www.brainjar.com/css/tabs/demo.html




    Kollermedia Tab Menu 

    This ia a Javascript tab implementation that used by Kollermedia. The author implemented the script by himself and decided to share the scripts with us after received feedbacks from his readers.



    Article : http://www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange/






    Ajax Project – Tabbed Page Interface 

    This is a script that can load a new page to the tab without a page refresh.



    Article : http://www.crackajax.net/tabs.php







    AJAX Tabs (Rails redux) 

    Using Ajax to load information that does not need to be retrieved every time the user pulls the record.


    Article : http://actsasflinn.com/Ajax_Tabs/index.html






    Ajax Project – 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.


    Article : http://www.crackajax.net/tabs.php





    Core Design Magic Tabs 

    Nice tab plugin for Joomla.


    Article : http://www.greatjoomla.com/extensions/plugins/core-design-magic-tabs-plugin.html






    JQuery Nested Tab Set 

    Nested tab set done with the ExtJS UI Library.


    Article : http://blog.cutterscrossing.com/index.cfm/2007/6/15/Updated-JQuery-Nested-Tab-Set-with-Demo





    Perspective Tabs 

    Simple mootools plug-in that allows for a large number of tabs to fit into a small space.


    Article : http://people.cs.uchicago.edu/~meweltman/sliding_tabs.html




    XP Style Tab Panes 

    To get this script working properly, simply put your content into separate “div”s and then call a javascript function which creates the tabs dynamically.



    Article : http://www.dhtmlgoodies.com/index.html?whichScript=tab-view







    qrayg CSS Menu 

    4 level deep list in both horizontal and vertical layout modes while maintaining hover persistence.


    Article : http://qrayg.com/experiment/cssmenus/


    DOMTab – Navigation tabs with CSS and DOM Scripting 

    DOMTab is a popular Javascript tab implementation script. Basically, it will turn a list of links connected to content sections into a tab interface. You can get example code through the website.



    Article : http://www.onlinetools.org/tools/domtabdata/





    JavaScript Tabifier – Automatically create an html css tabs interface 

    This is a plug-and-play Javascript tab script. To use it, simple include the js file and make some minor modifications to your current html code. Use CSS to customize the tabs’ appearance.



    Article : http://www.barelyfitz.com/projects/tabber/






    Ajax Tabs Content Script from Dynamic Drive 

    This is an Ajax tabs script that lets you display content pulled from external files inside a “div” and organized wia CSS tabs.(Non-Ajax version here)



    Article : http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/







    Fancy Menu 

    Custom navigation bar with some cute Javascript effects that will certainly impress your friends.


    Article : http://devthought.com/cssjavascript-true-power-fancy-menu/




    Creative Pony Sliding Tab 

    Sliding Tabs is a mootools 1.11 plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site.


    Article : http://creativepony.com/archive/demos/sliding-tabs/





    JQuery Tab Animation 

    A sample that show how you can add tab transition animations to your existing Tab Panel Controls.


    Article : http://mattberseth2.com/tab_animation/

    2 comments:

    1. Thanks for the list. Now going to Yahoo to look at its tabs

      ReplyDelete
    2. Enormous piece of writing! I really appreciate this wonderful post that you have provided for us. I utterly agree with you. I regularly read your blog and it’s very helpful.

      ReplyDelete