Tabbed Content Ini adalah contoh bagaimana cara membuat sebuah javascript tabbed content box dengan menggunakan CSS Menu Builder.
Anda dapat memperoleh kode dengan menyalin / menyisipkan kode dari beberapa tab berikutnya di sini.
Harap dicatat bahwa contoh ini menggunakan javascript jQuery sebagai kerangka.
klik gambar untuk view DEMO Menu
jika anda ingin melihat contohnya klik DEMOklik link ini untuk DEMO
langsung saja nggak usah banyak cincong
langkah awal cari code </head> dan letakkan kode Css, Javascript dan Jquery tepat diatas.
<style type="text/css">
Langkah keduua Letakkan code HTML dibawah yang anda sukai, jika anda masukkan langsung pada template edit HTML sebaiknya parse dulu codenya
<div id="tabContainer"> <div id="tabMenu"> <ul class="menu"> <li><a href="css" class="active"><span>Solusi1</span></a></li> <li><a href="html"><span>Solusi2</span></a></li> <li><a href="js"><span>Solusi3</span></a></li> <li><a href="jquery"><span>Solusi4</span></a></li> TAMBAHKAN MENU A </ul> </div> <div id="tabContent"> <div id="css" class="content active"> <strong>CSS</strong> </div> <div id="html" class="content"> <strong>HTML</strong> </div> <div id="js" class="content"> <strong>Javascript</strong> </div> <div id="jquery" class="content"> <strong>jQuery</strong> <p> <a href="http://jquery.com/" target="_blank">Get jQuery here</a> </p> </div> TAMBAHKAN MENU B </div> </div>
jika anda ingin untuk menambahkan sebuah tab MENU baru lagi, anda harus menghapus tulisan merah TAMBAHKAN MENU A ganti dengan code ini <li><a href="tambah"><span>Solusi4</span></a></li>
setelah itu ganti juga tulisan berwarna merah yang dibawah TAMBAHKAN MENU B dengan code ini <div id="tambah" class="content"> <strong>HTML</strong> </div>
jika masih ingin menambahkan menu lagi anda harus sesuaikan pada href="tambah" yang ada diatas harus sesuai dengan pada code div id="tambah" yang ada pada dibawah, harus berbeda dengan lain.
Anda dapat memperoleh kode dengan menyalin / menyisipkan kode dari beberapa tab berikutnya di sini.
Harap dicatat bahwa contoh ini menggunakan javascript jQuery sebagai kerangka.
jika anda ingin melihat contohnya klik DEMOklik link ini untuk DEMO
langsung saja nggak usah banyak cincong
langkah awal cari code </head> dan letakkan kode Css, Javascript dan Jquery tepat diatas.
Langkah keduua Letakkan code HTML dibawah yang anda sukai, jika anda masukkan langsung pada template edit HTML sebaiknya parse dulu codenya
jika anda ingin untuk menambahkan sebuah tab MENU baru lagi, anda harus menghapus tulisan merah TAMBAHKAN MENU A ganti dengan code ini <li><a href="tambah"><span>Solusi4</span></a></li>
setelah itu ganti juga tulisan berwarna merah yang dibawah TAMBAHKAN MENU B dengan code ini <div id="tambah" class="content"> <strong>HTML</strong> </div>
jika masih ingin menambahkan menu lagi anda harus sesuaikan pada href="tambah" yang ada diatas harus sesuai dengan pada code div id="tambah" yang ada pada dibawah, harus berbeda dengan lain.
aku udah pernah pake itu sobat....
BalasHapuswaduh fun, njlimet banget, musti melotot nih mata kalo yng beginian, besok aja aq nyobanya
BalasHapus