jQuery İmaj Menü

// Mayıs 9th, 2009 // Konuk Yazar, Web İlleti

Merhaba Arkadaşlar!
Yine bir jQuery örneği ile buradayız Bu örneğimizde imajlardan oluşan bir menü yapacağız. Bu menüyü ana menü olarak değil de daha çok ara kısımlarda kullanabilirsiniz.

Adım 1 – Html Kodlarını Eklemek

<h1>jQuery Image Menu – jQuery İmaj Menü</h1>
<div class=”MenuAlani”>
<ul>
<li class=”eleman1″><a href=”#nogo”>Landscapes</a></

li>
<li class=”eleman2″><a href=”#nogo”>People</a></li>
<li class=”eleman3″><a href=”#nogo”>Nature</a></li>
<li class=”eleman4″><a href=”#nogo”>Abstract</a></li>
<li class=”eleman5″><a href=”#nogo”>Urban</a></li>
</ul>
</div&gt

Burada bir div açıp ona sınıf tanımladım ve sınıf ismine MenuAlani ismini verdim. Css dosyamızda bu sınıfa ait özellikleri göreceksiniz. Daha sonra bir de liste oluşturdum. Her bir liste elemanına ayrı sınıf atadım çünkü menü imajları farklı. Ama aynı menü imajını kullanmak isterseniz tek bir sınıf kullanıp hepsine atayabilirsiniz.

.MenuAlani {
position: relative;
width: 670px;
height: 200px;
overflow: hidden;
margin: 25px 0px 0px;
}

.MenuAlani ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1340px;
padding-left:10px;

}

.MenuAlani ul li {
float: left;
}

.MenuAlani ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:78px;
height: 200px;
}

.MenuAlani ul li.eleman1 a {
background: url(images/menu1.jpg) repeat scroll 0%;
}

.MenuAlani ul li.eleman2 a {
background: url(images/menu2.jpg) repeat scroll 0%;
}

.MenuAlani ul li.eleman3 a {
background: url(images/menu3.jpg) repeat scroll 0%;
}
.MenuAlani ul li.eleman4 a {
background: url(images/menu4.jpg) repeat scroll 0%;
}

.MenuAlani ul li.eleman5 a {
background: url(images/menu5.jpg) repeat scroll 0%;
min-width:310px;

}

.clear {
clear: both;
}

<script type=”text/javascript”>
$(document).ready(function () {

// Fare üzerine gelince
$(‘div.MenuAlani ul li a’).hover(function() {

// animasyon başlayınca (easeOut)…
if ($(this).is(‘:animated’)) {
$(this).stop().animate({width: “310px”}, {duration: 450, easing:”easeOutQuad”});
} else {
// geri dönüş
$(this).stop().animate({width: “310px”}, {duration: 400, easing:”easeOutQuad”});
}
}, function () {
// fare üzerinden gidince
if ($(this).is(‘:animated’)) {
$(this).stop().animate({width: “78px”}, {duration: 400, easing:”easeInOutQuad”})
} else {
// geri dönüş
$(this).stop(‘animated:’).

animate({width: “78px”}, {duration: 450, easing:”easeInOutQuad”});
}
});
});
</script>

<!–[if IE]>
<style type=”text/css”>.MenuAlani {position:relative;width:

630px;height:200px;overflow:hidden;margin-left:20px;}</style>
<![endif]–>