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 Menujika anda ingin melihat contohnya klik
DEMOklik link ini untuk DEMOlangsung saja nggak usah banyak cincong
langkah awal cari code
</head> dan letakkan kode Css, Javascript dan Jquery tepat diatas.
<style type="text/css">
/* Example styles used for this demo */
#tabContainer{
position:relative;
width:400px; /lebar kotak induk/besar
}
#tabMenu{
position:relative;
height:30px; /tinggi pada kotak menu
}
#tabContent{
position:relative;
height:266px; /Tinggi kotak induk/besar
font:12px Verdana, Arial, Helvetica, sans-serif;
color:#444444;
border:4px solid #9fb2d6; /lebar garis beserta warnanya yang ada pada kotak besar
overflow:auto;
}
#tabContent .content{
display:none;
}
#tabContent .active{
padding:5px 10px;
display:block;
}
/* Tab menu styles generated via the horizontal menu builder @ http://blogging-goblog.blogspot.com/ */
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('http://cssmenubuilder.com/tutorial-files/jquery-tabs/topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('http://cssmenubuilder.com/tutorial-files/jquery-tabs/topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('http://cssmenubuilder.com/tutorial-files/jquery-tabs/topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('http://cssmenubuilder.com/tutorial-files/jquery-tabs/topMenuImages.png') 0px -90px no-repeat; color:rgb(82,82,82);}
.menu li a.active span, .menu li a.active:hover span{background:url('http://cssmenubuilder.com/tutorial-files/jquery-tabs/topMenuImages.png') 100% -90px no-repeat;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
initTabs();
});
function initTabs() {
$('#tabMenu a').bind('click',function(e) {
e.preventDefault();
var thref = $(this).attr("href").replace(/#/, '');
$('#tabMenu a').removeClass('active');
$(this).addClass('active');
$('#tabContent div.content').removeClass('active');
$('#'+thref).addClass('active');
});
}
</script>
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.
READ MORE - Tutorial cara membuat Cssmenubuilder
