Masak nggak ngeuh juga dengan tab-tab. Paham tidak paham, Beben Koben si bloglang anu ganteng kalem tea akan berbagi membuat tab yang sedikit style, dimana keberadaan tab menunya ada disisi kiri ;) Pas diklik akan scroll keatas kebawah menampilkan isi content. Slide content with jQuery merupakan trick plugins, jadi sudah tentu memakai
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>
Select type your add gadget HTML/Javascript. Kemudian masukan saja semua bumbu ajaib berikut kedalamnya yah :D
<style type="text/css">
#content-links {
border: 1px solid #ccc;
border-bottom: none;
float: left;
width: 60px;
}
#content-links a {
border-bottom: 1px solid #ccc;
display: block;
height: 33px;
line-height: 35px;
padding-left: 1px;
}
#content-links a:focus {
outline: 0;
}
#content-links a:hover {
background-color: #ddd;
}
#content-container {
border: 1px solid #ccc;
border-left: none;
height: 169px;
overflow: hidden;
width: 350px;
}
#content-box div {
font-size: 15px;
height: 200px;
padding: 10px;
}
</style>
<div id="content-links">
<a href="#">Title1</a>
<a href="#">Title2</a>
<a href="#">Title3</a>
<a href="#">Title4</a>
<a href="#">Title5</a>
</div>
<div id="content-container">
<div id="content-box">
<div>
YOUR CONTENT 1
</div>
<div>
YOUR CONTENT 2
</div>
<div>
YOUR CONTENT 3
</div>
<div>
YOUR CONTENT 4
</div>
<div>
Beben Koben si bloglang anu ganteng kalem tea!!! Prikitiw...jangan lupa sholat ya^^
</div>
</div>
</div>
<script language="javascript">
$('#content-links a').click(function(){
var index = $("#content-links a").index (this);
$('#content-box').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
return false;
});
</script>
#content-links {
border: 1px solid #ccc;
border-bottom: none;
float: left;
width: 60px;
}
#content-links a {
border-bottom: 1px solid #ccc;
display: block;
height: 33px;
line-height: 35px;
padding-left: 1px;
}
#content-links a:focus {
outline: 0;
}
#content-links a:hover {
background-color: #ddd;
}
#content-container {
border: 1px solid #ccc;
border-left: none;
height: 169px;
overflow: hidden;
width: 350px;
}
#content-box div {
font-size: 15px;
height: 200px;
padding: 10px;
}
</style>
<div id="content-links">
<a href="#">Title1</a>
<a href="#">Title2</a>
<a href="#">Title3</a>
<a href="#">Title4</a>
<a href="#">Title5</a>
</div>
<div id="content-container">
<div id="content-box">
<div>
YOUR CONTENT 1
</div>
<div>
YOUR CONTENT 2
</div>
<div>
YOUR CONTENT 3
</div>
<div>
YOUR CONTENT 4
</div>
<div>
Beben Koben si bloglang anu ganteng kalem tea!!! Prikitiw...jangan lupa sholat ya^^
</div>
</div>
</div>
<script language="javascript">
$('#content-links a').click(function(){
var index = $("#content-links a").index (this);
$('#content-box').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
return false;
});
</script>
Slide content with jQuery demo
Semoga bermanfaat :)
Tidak ada komentar:
Posting Komentar