• Tidak ada hasil yang ditemukan

TAB MENU UI AWESOME

N/A
N/A
Info
Unduh - Bebas
Protected

Academic year: 2017

Membagikan "TAB MENU UI AWESOME"

Copied!
4
0
0

Memuat.... (Lihat teks lengkap sekarang)

Unduh sekarang ( 4 Halaman )

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>

Referensi

Unduh sekarang ( PDF - 4 Halaman - 149.50 KB )

Dokumen terkait

Implementasi Application Programming Interface (API) Google Calendar Sebagai Reminder Informasi Kegiatan Pondok Pesantren

Sedangkan di Pondok Pesantren ini jadwal kegiatan dan informasi dipublikasikan dengan cara manual yaitu ditempelkan pada papan pengumuman atau disampaikan langsung

DAFTAR PUSTAKA. Agustianto, 2002, Percikan Pemikiran Ekonomi Islam, Respon terhadap Persoalan Ekonomi Kontemporer, Cipta Pustaka Media, Bandung.

Anshori, Abdul Ghofur, 2007, Payung Hukum Perbankan Syariah (UU di bidang Perbankan, Fatwa DSN-MUI dan Peraturan Bank Indonesia), UII Press, Yogyakarta.. Antonio,

PENGARUH KETEBALAN INNER-HELICAL FIN TERHADAP CHARACTERISTIC OF PERFORMANCE PADA HEAD EXCHANGER

Dari hasil penelitian pemasangan inner- helical fin dengan variasi ketebalan ke dalam pipa bagian dalam penukar panas pipa ganda, Gambar 3 menunjukan bahwa

PENGAWASAN INSPEKTORAT DAERAH TERHADAP PENYELENGGARAAN PEMERINTAHAN DESA (Studi Pada Inspektorat Kabupaten Pesawaran)

pengawasan Inspektorat Daerah terhadap penyelenggaraan pemerintahan desa adalah.. pengawasan dan pemeriksaan yang meliputi administrasi pemerintahan desa dan

Pengaruh Iklan, Citra Merek, dan Kepercayaan Merek terhadap Minat Beli Konsumen Smartphone Samsung Galaxy Series (Studi Kasus Mahasiswa/i Universitas Gunadarma, Depok)

Dapat disimpulkan bahwa dalam usaha elektronik yang menjadi sudut pandang adalah pengaruh iklan, citra merek, dan kepercayaan merek terhadap minat beli konsumen

Penggunaan Tameni dan Youni dalam Kalimat bahasa Jepang - Diponegoro University | Institutional Repository (UNDIP-IR)

Setsuzokushi adalah salah satu kelas kata yang termasuk dalam jiritsugo yang tidak mengalami perubahan, setsuzokushi berfungsi menyambungkan kalimat dengan kalimat

Subkultur Hiphop Indie Label di Yogyakarta: Sebuah Alternatif atau Siasat dalam Menciptakan “Pasar” Baru? | Putradarma | Jurnal Pemikiran Sosiologi 28585 64015 1 PB

Kemudian melihat dalam konteks NDX dan D.P.M.B, mereka sama-sama mencoba melihat peluang dari pasar musik lokal (Yogyakarta). D.P.M.B hadir dengan hiphop yang lawas

1 BAB I PENDAHULUAN A. LATAR BELAKANG - PERBEDAAN AKUMULASI PLAK PENGGUNA ORTODONTIK CEKAT BERKUMUR KHLORHEKSIDIN 0,2% DAN MENGUNYAH PERMEN KARET XYLITOL PADA MAHASISWA UNIVERSITAS MUHAMMADIYAH SEMARANG - Repository Universitas Muhammadiyah Semarang

Perbedaan pada penelitian sebelumnya dengan penelitian yang akan dilakukan adalah pada perlakuan yang diberikan dimana penelitian terdahulu membandingkan perlakuan

Image