Roundabout
Oct 20, 2011
Slick Tab View Dengan JQuery
Tab view atau menu tab adalah serangkaian menu yang biasanya dipasang pada sidebar. Tab view ini dibuat untuk mengakali ruang sempit pada layout blog. Contoh kasus : misalnya kamu ingin memasang suatu widget namun sudah tidak ada tempat lagi, maka tab view solusinya.Langsung saja kita buat percobaan :
Pertama kita buat HTML nya dahulu
<ul class="slick"> <li title="tabsatu" class="slick active">Tab Satu </li> <li title="tabdua" class="slick active">Tab Dua </li> <li title="tabtiga" class="slick">Tab Tiga </li> </ul> <div id="tabsatu" class="content-slick"> <!--Isi Tab Satu--> </div> <div id="tabdua" class="content-slick"> <!--Isi Tab Dua-> </div> <div id="tabtiga" class="content-slick"> <!--Isi Tab Tiga--> </div>
Setelah itu masukan CSS-nya
#slick_area {
border:1px solid #585858;
background-color:#141414;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#FFF;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#000;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:1px solid #585858;
}
ul.slick li:hover {
color:#FFFF00;
}
ul.slick li.active {
background-color:#2F2F2F;
border:1px solid #585858;
}
.content-slick {
background-color:#2F2F2F;
border:1px solid #585858;
color:#dedede;
min-height:40px;
padding:7px 13px 5px;
text-align:justify;
}
.content-slick ul {
margin:2px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #585858;
padding:4px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#141414;
}
.content-slick ul li a {
text-decoration:none;
color:#FFF;
display:block;
} Terakhir Jquerynya kita pasang
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#tabdua, #tabtiga').hide();
$("ul.slick li").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>Selamat Mencoba!!!
0 komentar:
Post a Comment