TAB MENU UI AWESOME

Tab Accordion Menu UI Awesome - Dengan memanipulasi ef ek

tampilan accordion pada tab menu akan membuat tampilan lebih

hidup dengan css animasi tabion, y ang mengusung gay a metro

ui ke dalam blog design UI. Baik menggunakan jquery

ui maupun css3 ef ek, seperti artikel sebelumny a Simple Flat UI

Css Accordion y ang kemudian dikombinasikan dengan f ont

awesome untuk menghasilkan ef ek gambar minimalis sebagai

perwakilan menu y ang kita masukkan. Kombinasi menu metro ui

dengan font awesome dan Menu metro ui efek modal dialog.

DEMO http://codepen.io/samsurysites/pen/cwEgp

Untuk dapat menggunakan f ungsi tabion menu ini silakan

masukkan kode dibawah ini sebelum kode </head>

<link href ="http://f onts.googleapis.com/css?f amily =Dosis|Open+Sans" rel="sty lesheet" ty pe="text/css">

<link rel="sty lesheet" href ="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/animate-custom.css" ty pe="text/css">

<link rel="sty lesheet" href ="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/tabion-css.css" ty pe="text/css">

<link rel="sty lesheet" href ="css/tabion-css-ie8.css" ty pe="text/css" />

Kemudian untuk markup HTMLny a sepertidi bawah ini :

<div id="mainf orm">

<!-- START TABION -->

<ul class="tabion height-500">

<!-- Start Tab 1 -->

<li>

<!-- Start Tab Button -->

<label f or="tab11" class="tabtile tabtile-small solid-blue-2 hov ershadow-blue light-text">

<i class="f a f a-group f a-3x"></i>

<span class="light-text">Group</span>

</label>

<input ty pe="radio" name="tabion" id="tab11">

<!-- End Tab Button -->

<!-- Start Tab Content -->

<div class="tab-content animated tab-rollIn solid-blue-2 light-text pos-top-100">

<p class="title"><i class="f a fa-group"></i> GROUP CONTENT</p>

<p class="closebt"><label f or="close_tabion"><i class="f a f a-close fa-2x"></i></label></p>

<p>

ISI CONTENT BLA BL A BLA........dan sebagainya.....

</p>

</div >

<!-- End Tab Content -->

</li>

<!-- End Tab 1 -->

<!-- Start Tab 2 -->

<li>

<!-- Start Tab Button -->

<label f or="tab12" class="tabtile tabtile-small solid-red-2 hov ershadow-red light-text pos-left-100">

<i class="f a f a-download f a-3x"></i>

<span class="light-text">Download</span>

</label>

<input ty pe="radio" name="tabion" id="tab12" checked="">

<!-- End Tab Button -->

TAB MENU UI AWESOME

<!-- Start Tab Content -->

<div class="tab-content animated tab-bounceIn solid-red-2 light-text pos-top-100">

<p class="title"><i class="f a fa-download"></i> Download</p>

<p class="closebt"><label f or="close_tabion"><i class="f a f a-close fa-2x"></i></label></p>

<p>

ISI CONTENT BLA BL A BLA........dan sebagainya.....

</p>

</div >

<!-- End Tab Content -->

</li>

<!-- End Tab 2 -->

<!-- Start Tab 3 -->

<li>

<!-- Start Tab Button -->

<label f or="tab13" class="tabtile tabtile-small solid-orange-2 hov ershadow-orange light-text pos-lef t-200">

<i class="f a f a-comments fa-3x"></i>

<span class="light-text">Comments</span>

</label>

<input ty pe="radio" name="tabion" id="tab13">

<!-- End Tab Button -->

<!-- Start Tab Content -->

<div class="tab-content animated tab-f lipInY solid-orange-2 light-text pos-top-100">

<p class="title"><i class="f a fa-comments"></i> Comments</p>

<p class="closebt"><label f or="close_tabion"><i class="f a f a-close fa-2x"></i></label></p>

<p>

ISI CONTENT BLA BL A BLA........dan sebagainya.....

</p>

</div >

<!-- End Tab Content -->

</li>

<!-- End Tab 3 -->

<!-- Start Tab 4 -->

<li>

<!-- Start Tab Button -->

<label f or="tab14" class="tabtile tabtile-small solid-green-2 hov ershadow-green light-text pos-left-300">

<i class="f a f a-male f a-3x"></i>

<span class="light-text">About Me</span>

</label>

<input ty pe="radio" name="tabion" id="tab14">

<!-- End Tab Button -->

<!-- Start Tab Content -->

<div class="tab-content animated tab-lightSpeedIn solid-green-2 light-text pos-top-100">

<p class="title"><i class="f a fa-male"></i> About Me</p>

<p class="closebt"><label f or="close_tabion"><i class="f a f a-close fa-2x"></i></label></p>

<p>

ISI CONTENT BLA BL A BLA........dan sebagainya.....

</p>

</div >

<!-- End Tab Content -->

</li>

<!-- End Tab 4 -->

<!-- Start Tab 5 -->

<li>

<!-- Start Tab Button -->

<label f or="tab15" class="tabtile tabtile-small solid-red hov ershadow-red light-text pos-left-400">

<i class="f a f a-y outube-play f a-3x"></i>

TAB MENU UI AWESOME

<span class="light-text">Play </span>

</label>

<input ty pe="radio" name="tabion" id="tab15">

<!-- End Tab Button -->

<!-- Start Tab Content -->

<div class="tab-content animated tab-f lip solid-red light-text pos-top-100">

<p class="title"><i class="f a fa-y outube-play "></i> Play Video</p>

<p class="closebt"><label f or="close_tabion"><i class="f a f a-close fa-2x"></i></label></p>

<p>

ISI CONTENT BLA BL A BLA........dan sebagainya.....

</p>

</div >

<!-- End Tab Content -->

</li>

<!-- End Tab 5 -->

<!-- Start Tab 6 -->

<li>

<!-- Start Tab Button -->

<label f or="tab16" class="tabtile tabtile-small solid-green hov ershadow-green light-text pos-left-500">

<i class="f a f a-bell f a-3x"></i>

<span class="light-text">Notif ication</span>

</label>

<input ty pe="radio" name="tabion" id="tab16">

<!-- End Tab Button -->

<!-- Start Tab Content -->

<div class="tab-content animated tab-f lipInX solid-green light-text pos-top-100">

<p class="title"><i class="f a fa-bell"></i> Notif ication</p>

<p class="closebt"><label f or="close_tabion"><i class="f a f a-close fa-2x"></i></label></p>

<p>

ISI CONTENT BLA BL A BLA........dan sebagainya.....

</p>

</div >

<!-- End Tab Content -->

</li>

<!-- End Tab 6 -->

<!-- Start Tab 7 -->

<li>

<!-- Start Tab Button -->

<label f or="tab17" class="tabtile tabtile-small solid-black hov ershadow-black light-text pos-lef t-600">

<i class="f a f a-env elope-o f a-3x"></i>

<span class="light-text">Contact</span>

</label>

<input ty pe="radio" name="tabion" id="tab17">

<!-- End Tab Button -->

<!-- Start Tab Content -->

<div class="tab-content animated tab-bounceInRight solid-black light-text pos-top-100">

<p class="title"><i class="f a fa-env elope-o"></i> Contact Me</p>

<p class="closebt"><label f or="close_tabion"><i class="f a f a-close fa-2x"></i></label></p>

<p>

ISI CONTENT BLA BL A BLA........dan sebagainya.....

</p>

</div >

<!-- End Tab Content -->

</li>

<!-- End Tab 7 -->

<!-- Radio is used to close tabion content -->

<input ty pe="radio" name="tabion" class="none" id="close_tabion">

TAB MENU UI AWESOME

</ul>

<!-- END TABION -->

<div class="clearspace"></div >

</div >