by Free Stuff

50+ CSS Tab-Based Navigation Scripts

Over the last few years web-developers have developed many AJAX and CSS Tab-based navigation which became one of the most interesting techniques giving us an easy way to get information without the need to open and close multiple windows at the same time.

The Autochanging Tabs

1) Easy Tabs 1.2 with autochange– You can now set the autochange mode to one of your tab menus.
Css Tab Menus Interface

2) Rotating jQuery tabs
Css Tab Menus Interface

3) Slideshow Tab Content Script-“– Supports “slideshow” mode, in which script automatically cycles through and selects each tab periodically until a tab is explicitly selected.
Css Tab Menus Interface

Sliding Tabs

4) Sliding Tabs– Sliding Tabs is a mootools plugin which adds a pretty neat effect. It’s a clone of something seen on Panic Software’s Coda site, which in turn is very heavily inspired by a widget used in the iTunes Music Store.
Css Tab Menus Interface

5) Coda-Slider– Amazing jQuery Coda-Slider can be used for Nice, slick content presentation.
Css Tab Menus Interface

6) Perspective tabs– Formerly Sliding Tabs uses mootools that allows for a lagre number of tabs to fit into a small space.
Css Tab Menus Interface

Ajax Tab Content

7) 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.
Css Tab Menus Interface

Closeable Tabs

8 ) Tab Panes– Two Versions with close and add panes.
Css Tab Menus Interface

9) Closeable Tabs Module– The Closeable Tab widget allows tabs to be removed.
Css Tab Menus Interface

Must see Examples

10) Fabtabulous– Simple tabs using Prototype
Css Tab Menus Interface

11) JQuery TabContainer Theme-JQuery style fade animation that runs as the user navigates between selected tabs
Css Tab Menus Interface

12) moo.fx Tab Accordion– Tab Accordion script using moo.fx
Css Tab Menus Interface

13) MooTabs– MooTabs is a tiny(3kb) class for MooTools. As the name suggests, it’s main purpose is to help out with the creation of simple tab navigation.
Css Tab Menus Interface

14) TabView component– The TabView component is designed to enable developers to create navigable tabbed views of content.
Css Tab Menus Interface

15) Fancy Sliding Tab Menu– This cool menu is developed in script.aculo.us
Css Tab Menus Interface

16) Control.Tabs– Unobtrusive CSS tabs for Prototype.js
Css Tab Menus Interface

17) Zapatec Ajax Tabs– This demo uses the Zapatec AJAX Transport layer to transfer the tab contents dynamically.
Css Tab Menus Interface

Ajax Tab Generators

18) 15daysofjquery- jQuery Tabs A simple form that you can use to generate the markup for the tabs.
Css Tab Menus Interface

Advanced Tab Techniques

19) Advanced Tabs This TabPanel is built entirely with javascript and demonstrates: Auto tab resizing, Tab scrolling, Tabs with icons, Tab plugins (context menu), Adding tabs with JS.
Css Tab Menus Interface

20) Floating window with tabs This script is based on simple ordinary div tags. This makes it very easy to set up. Put in your HTML content and call a javascript function to initialize the window.
Css Tab Menus Interface

21) AJAX Tabs (Rails redux) The Concept here is using Ajax to load information that does not need to be retrieved every time the user pulls the record.
Css Tab Menus Interface

22) Ajax Tabs Reloaded User can add or remove tabs (and content) without refreshing the page.
Css Tab Menus Interface

23) JQuery Nested Tab
Css Tab Menus Interface

CSS Only Tabs

24) Cross browser tabbed pages with embeded links NO javascript – just CSS – and it validates. Just hover over the tabs to display a page of text with a picture and embeded links. A working scroll bar is added for each page as required.
Css Tab Menus Interface

25) CSS Tabs The goal was to build CSS tabs without using any images or hacks and with as little CSS as possible.
Css Tab Menus Interface

26) CSS-driven tabs
Css Tab Menus Interface

27) CSS-driven tabs
Css Tab Menus Interface

28) CSS Tabs– Based on Joshua Kaufman’s version
Css Tab Menus Interface

29) Hidden Tab menu A simple hidden tab menu that opens when the tab is hovered.
Css Tab Menus Interface

30) Inverted Sliding Doors tabs– Inverted tabs means that they are bottom-aligned, and as text size is increased, more and more of the tabs is revealed from the top down, instead of from the bottom up as in the original Sliding Doors technique.
Css Tab Menus Interface

31) Updated Simple CSS Tabs– CSS Tabs with nested menu.
Css Tab Menus Interface

32) CSS Tabs with Submenus– This is a way of accomplishing tabs and subnavigation using only CSS and nested unordered lists.
Css Tab Menus Interface

33) Simplified CSS Tabs
Css Tab Menus Interface

34) 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.
Css Tab Menus Interface

Ajax Tab Tutorials

35) Dynamic Ajax Tabs in 20 Lines Dynamic Ajax Tabs in only 17 lines of code thanks to the Prototype Javascript framework.
Css Tab Menus Interface

36) Building Tabbed Content This workshop we will be building a tabbed content browser that’s Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab.
Css Tab Menus Interface

37) CSS Tabs– A great tutorial to teach us how to create a css tabs.
Css Tab Menus Interface
Advertisements
Author:

We hope, We will become the best, creative and inspiring community for web and graphics.
Join Us! Can be part of the growing Team. Just write something Creative and Interesting. Click here to become a member.

Comments

No comments yet. Be the first to leave a comment !
Leave a Reply

Copyright © 2017 Design Blog. All Rights Reserved.
Powered by Wordpress.
About Us | Advertise | Write For Us | Contact Us