30.10.2011, Saat: 06:52
Kod:
<div id="tabs">
<div id="tab_basliklar">
<span>Menü Bölümü 1</span>
<span>Menü Bölümü 2</span>
.....
</div>
<div id="tab_menuler">
<div>
<a href="#">Menü 1 - 1</a>
<a href="#">Menü 1 - 2</a>
<a href="#">Menü 1 - 3</a>
<a href="#">Menü 1 - 4</a>
<a href="#">Menü 1 - 5</a>
</div>
<div>
<a href="#">Menü 2 - 1</a>
<a href="#">Menü 2 - 2</a>
</div>
.....
</div>
<div id="tab_goster"></div>
</div>
Buna uygun olarak menüyü oluşturan jquery kodları ;
Kod:
<script type="text/javascript">
$(function() {
tab_menu();
});
var aktif_tab = 0;
function tab_menu() {
tab_degistir(0);
$("#tab_basliklar > span").mouseover(function() {
var index = $("#tab_basliklar > span").index(this);
if (aktif_tab != index) {
tab_degistir(index);
aktif_tab = index;
}
});
}
function tab_degistir(index) {
$("#tab_basliklar > span").stop().animate({opacity:"0.4"}, 500);
$("#tab_basliklar > span:eq(" + index + ")").stop().animate({opacity:"1"}, 500);
$("#tab_goster").html($("#tab_menuler > div:eq(" + index + ")").html());
$("#tab_goster a").css("opacity", "0.4").animate({opacity:"1"}, 500);
}
</script>
Css kullanarak menünün tasarımını ve görselliğini artırabiliriz. Css kodlarda yapacağımız değişiklik ile istediğimiz şekilde tasarımı değiştirebiliriz. Resim editörleri ile hazırlayacağımız resimleri kullanarak daha canlı bir menü haline getirebiliriz.
Never forget me ,But when you forget me ,forget me forever!
The Owner
The Owner