Sabtu, 10 September 2011

Slide content with jQuery

Mungkin fungsi trik berikut mirip dengan fitur tab (using jQuery) Biasanya tabs memiliki kedudukan tab menu diatas guna menampilkan konten tab's!!! Tab yang kakay gini pokoknya mah sob Make Tab use only CSS 3.
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>

Slide content with jQuery demo
Semoga bermanfaat :)

Tidak ada komentar:

Posting Komentar