TAB MENU UI AWESOME

Teks penuh

(1)

TAB MENU UI AWESOME

Tab Accordion Menu UI Awesome - Dengan memanipulasi ef ek tampilan accordion pada tab menu akan membuat tampilan lebih hidup denga n 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 perwakila n 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/Plug ins/UserPlugins/MC-Ta bs/css/animate-custom.css" ty pe="text/css"> <link rel="sty lesheet" href ="http://002-jbwp.jb- webs.com/02-show/Plug ins/UserPlugins/MC-Ta bs/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 TA BION --> <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-blu e 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></labe l></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 -->

(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="f a fa-downloa d"></i> Downl oad</p >

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

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

<label f or="tab13" class="tabtile tabtile-small solid-orange-2 hov ershadow- orange lig ht-text pos-lef t-200"> <i class="f a f a-comments fa-3x"></i>

<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></labe l></p > <p>

ISI CONTENT BLA BL A BLA...dan sebagain ya... </p>

<label f or="tab14" class="tabtile tabtile-small solid-green-2 hov ershadow-g reen light-text pos-left-300"> <i class="f a f a-male f a-3x"></i>

<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> Abo ut Me</p>

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

ISI CONTENT BLA BL A BLA...dan sebagainya... </p>

(3)

TAB MENU UI AWESOME

<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></labe l></p > <p>

ISI CONTENT BLA BL A BLA...dan sebagainya... </p>

<label f or="tab16" class="tabtile tabtile-small solid-green hov ershadow-g reen light-text pos-left-500"> <i class="f a f a-bell f a-3x"></i>

<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></labe l></p > <p>

ISI CONTENT BLA BL A BLA...dan sebagainya... </p>

<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>

<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></labe l></p > <p>

(4)

TAB MENU UI AWESOME

</ul>

Figur

Memperbarui...

Referensi

Memperbarui...

Related subjects :