Tab menu efek with accordion

1. TAB MENU UI AWESOME
Tab Accordion Menu UI Awesome - Dengan memanipulasi efek tampilan accordion pada tab menu akan membuat tampilan lebih hidup dengan css animasi tabion, yang mengusung gaya metro ui ke dalam blog design UI. Baik menggunakan jquery ui maupun css3 efek, seperti artikel sebelumnya Simple Flat UI Css Accordion yang kemudian dikombinasikan dengan font awesome untuk menghasilkan efek gambar minimalis sebagai perwakilan menu yang 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 fungsi tabion menu ini silakan masukkan kode dibawah ini sebelum kode </head>
<link href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/animate-custom.css" type="text/css"> <link rel="stylesheet" href="http://002-jbwp.jb-webs.com/02-show/Plugins/UserPlugins/MC-Tabs/css/tabion-css.css" type="text/css"> <link rel="stylesheet" href="css/tabion-css-ie8.css" type="text/css" /> Kemudian untuk markup HTMLnya sepertidi bawah ini : <div id="mainform"> <!-- START TABION --> <ul class="tabion height-500"> <!-- Start Tab 1 --> <li> <!-- Start Tab Button --> <label for="tab11" class="tabtile tabtile-small solid-blue-2 hovershadow-blue light-text"> <i class="fa fa-group fa-3x"></i> <span class="light-text">Group</span> </label> <input type="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="fa fa-group"></i> GROUP CONTENT</p> <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p> <p> ISI CONTENT BLA BLA BLA........dan sebagainya..... </p> </div> <!-- End Tab Content --> </li> <!-- End Tab 1 --> <!-- Start Tab 2 --> <li> <!-- Start Tab Button --> <label for="tab12" class="tabtile tabtile-small solid-red-2 hovershadow-red light-text pos-left-100"> <i class="fa fa-download fa-3x"></i> <span class="light-text">Download</span> </label> <input type="radio" name="tabion" id="tab12" checked=""> <!-- End Tab Button -->

2. 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="fa fa-download"></i> Download</p> <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p> <p> ISI CONTENT BLA BLA BLA........dan sebagainya..... </p> </div> <!-- End Tab Content --> </li> <!-- End Tab 2 --> <!-- Start Tab 3 --> <li> <!-- Start Tab Button --> <label for="tab13" class="tabtile tabtile-small solid-orange-2 hovershadow-orange light-text pos-left-200"> <i class="fa fa-comments fa-3x"></i> <span class="light-text">Comments</span> </label> <input type="radio" name="tabion" id="tab13"> <!-- End Tab Button --> <!-- Start Tab Content --> <div class="tab-content animated tab-flipInY solid-orange-2 light-text pos-top-100"> <p class="title"><i class="fa fa-comments"></i> Comments</p> <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p> <p> ISI CONTENT BLA BLA BLA........dan sebagainya..... </p> </div> <!-- End Tab Content --> </li> <!-- End Tab 3 --> <!-- Start Tab 4 --> <li> <!-- Start Tab Button --> <label for="tab14" class="tabtile tabtile-small solid-green-2 hovershadow-green light-text pos-left-300"> <i class="fa fa-male fa-3x"></i> <span class="light-text">About Me</span> </label> <input type="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="fa fa-male"></i> About Me</p> <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p> <p> ISI CONTENT BLA BLA BLA........dan sebagainya..... </p> </div> <!-- End Tab Content --> </li> <!-- End Tab 4 --> <!-- Start Tab 5 --> <li> <!-- Start Tab Button --> <label for="tab15" class="tabtile tabtile-small solid-red hovershadow-red light-text pos-left-400"> <i class="fa fa-youtube-play fa-3x"></i>

3. TAB MENU UI AWESOME
<span class="light-text">Play</span> </label> <input type="radio" name="tabion" id="tab15"> <!-- End Tab Button --> <!-- Start Tab Content --> <div class="tab-content animated tab-flip solid-red light-text pos-top-100"> <p class="title"><i class="fa fa-youtube-play"></i> Play Video</p> <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p> <p> ISI CONTENT BLA BLA BLA........dan sebagainya..... </p> </div> <!-- End Tab Content --> </li> <!-- End Tab 5 --> <!-- Start Tab 6 --> <li> <!-- Start Tab Button --> <label for="tab16" class="tabtile tabtile-small solid-green hovershadow-green light-text pos-left-500"> <i class="fa fa-bell fa-3x"></i> <span class="light-text">Notification</span> </label> <input type="radio" name="tabion" id="tab16"> <!-- End Tab Button --> <!-- Start Tab Content --> <div class="tab-content animated tab-flipInX solid-green light-text pos-top-100"> <p class="title"><i class="fa fa-bell"></i> Notification</p> <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p> <p> ISI CONTENT BLA BLA BLA........dan sebagainya..... </p> </div> <!-- End Tab Content --> </li> <!-- End Tab 6 --> <!-- Start Tab 7 --> <li> <!-- Start Tab Button --> <label for="tab17" class="tabtile tabtile-small solid-black hovershadow-black light-text pos-left-600"> <i class="fa fa-envelope-o fa-3x"></i> <span class="light-text">Contact</span> </label> <input type="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="fa fa-envelope-o"></i> Contact Me</p> <p class="closebt"><label for="close_tabion"><i class="fa fa-close fa-2x"></i></label></p> <p> ISI CONTENT BLA BLA BLA........dan sebagainya..... </p> </div> <!-- End Tab Content --> </li> <!-- End Tab 7 --> <!-- Radio is used to close tabion content --> <input type="radio" name="tabion" class="none" id="close_tabion">

4. TAB MENU UI AWESOME
</ul> <!-- END TABION --> <div class="clearspace"></div> </div>