Tabion – Metro Tab Accordion Switcher CSS

Tabion – Metro Tab Accordion Switcher CSS is a small CSS plugin that is used to create Tab with Metro UI style. Tabion also support Responsive Design that will switch to Vertical Accordion when it is viewed on small screens like Mobile Devices.

Buy Now

Demos:

Tabion – Metro Tab Accordion Switcher CSS Demo

Tabion Features:

Responsive Design.
CSS3 Animation Effects.
Support Horizontal and Vertical Styles.
Support both Font Awesome and Icon Images.
Two Tab Sizes.
Simple HTML Structure.
Multi Tab in One Page.

Change Logs:

+ 24 Jun 2013: Version 1.2:

Improve HTML structure.
Add “Active State” for Tab Buttons.
Fix some HTML code to pass W3C Validator.
Update Font Awesome 3.2.1 for more icons.

+ 06 Jun 2013: Version 1.1.

Add Close Buttons to close Tab Content.

+ May 2013: First Version.

Credits:

<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />

<!-- CSS3 Animation -->
<link rel="stylesheet" href="css/animate-custom.css" type="text/css" />

<!-- TabionCSS Pack -->
<link rel="stylesheet" href="css/tabion-css.css" type="text/css" />

<meta name="viewport" content="width=device-width, user-scalable=no" />

<!-- IE 8 Works with Hover only -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/tabion-css-ie8.css" type="text/css" />
<![endif]-->

Tabion setup is done.

Section 2: Tabion HTML Structure.

This section should be read along with the example files also contained in the download package.

A Simple Tabion Structure:

<!-- START TABION -->
<ul class="tabion">

  <!-- Start Tab Area 1 -->
  <li>

    <input type="radio" name="tabion" id="tab1">

    <div>
    <!-- Start Tab Button -->
    <label for="tab1" class="tabtile">
      <i class="font-icon-class"></i>
      <span>Tab Title</span>
    </label>
    <!-- End Tab Button -->

    <!-- Start Tab Content -->
    <div class="tab-content">
      // Add Tab Content Here
    </div>
    <!-- End Tab Content -->

    </div>

  </li>
  <!-- End Tab Area 1 -->

</ul>
<!-- END TABION -->

Important Note: Every Tab Button must have a hidden input to control the tab content. When a label with [for=”tab-id”] is clicked the hidden input [id=”tab-id”] will be checked then the tab content will be displayed.

To decorate the tab button and tab content you can add some classes like background, shadowhover, text color, position classes,… into the Label tag and Tab Conent div tag. You will see a lot of options in the CSS file. Please read demo files for more detail.

To set a default tab content will displayed first you just add “checked” into the hidden input of this tab. In IE8, the plugin always set the first tab content as the default content and display it initially.

Limitation: Tabion must be set height value when it is displayed on large screens (like desktop/laptop).

Section 3: CSS3 Animation and Text Icon Classes.

CSS3 Animation Classes:

To use CSS3 Animation Classes you just add “animated” class and an animation class above into Tab Content div tag. Please see demo files for more detail.

Text Icon Classes:

Find icon classes you like at 360+ Icons Font Awesome.

[endedwords product=””]http://talk.sonhlab.com/room/tabion-css-plugin[/endedwords]