Jquery pluginleri sayesinde artık oldukça gelişmiş menu yapılarına sahip olabilmekteyiz.Ancak bazı ufak görsel efektleri hazırlamak ve bunlar için ufak hesaplar yapmak gerçekten düşünüldüğü kadar zor mu ?
Çoğu görsel jquery efektinin altında güzel bir xhtml/css yapı yatar.Bunun için basit bir Xhtml/Css yapı oluşturarak menümüzü hazırlamaya başlayalım.İlk olarak menümüzün bulunacağı bir taşıyıcı katman oluşturalım.
<body> <div id="tasiyici"></div> </body>
Css kodlarımız;
#tasiyici {
width:900px;
height:300px;
display:block;
background:#e3e3e3;
/* Dikey ve Yatay ortalama islemi */
position:absolute;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-450px;
}
Dikey ve yatay ortalama için position:absolute olarak tanımlanmış katmanımıza yukardan ve soldan 50% değerini verdikten sonra katmanınızın margin-top değerinini katmanınızın yüksekliğinin negatif yarısı olarak vermeniz , margin-left değerinide yine benzer şekilde katman genişliğinin negatif yarısı olarak vermeniz yeterlidir.
Menülerimizi taşıyıcı katmanımız içerisine konumlandıralım ;
<div id="tasiyici"> <div class="menu"></div> <div class="menu"></div> <div class="menu"></div> <div class="menu"></div> </div>
Css Kodlarımız ;
menu {
width:200px;
height:40px;
display:block;
background:red;
float:left;
margin-left:5px;
margin-top:120px;
}
Menü yapımızı biraz daha geliştirip nihayi yapısına ulaştıralım.
<div id="tasiyici"> <div class="menu"> <h1>ANASAYFA</h1> </div> <div class="menu"> <h1>ÖRNEKLER</h1> <ul> <li><a href="#">XHTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JQUERY</a></li> </ul> </div> <div class="menu genis"> <h1>SERVER SIDE</h1> <ul> <li><a href="#">PHP</a></li> <li><a href="#">ASP</a></li> <li><a href="#">RUBY ON RAILS</a></li> <li><a href="#">CGI/PERL</a></li> </ul> </div> <div class="menu"> <h1>İLETİŞİM</h1> </div> </div>
CSS kodlarımız ;
.menu {
width:200px;
height:40px;
display:block;
background:red;
float:left;
margin-left:5px;
margin-top:120px;
overflow:hidden;
text-align:center;
}
.menu h1{
display:block;
width:200px;
height:40px;
font-size:14px;
line-height:40px;
cursor:pointer;
}
.genis {
height:150px;
margin-top:65px;
}
.menu ul li {
text-align:left;
height:20px;
line-height:20px;
padding:0 0 0 20px;
width:180px;
background:#fff;
margin-top:1px;
}
.menu ul li a {
color:#111;
text-decoration:none;
}
Bu aşamada menümüzün açılma konumuna ait .genis class’ının tanımladık.Görüldüğü gibi birkaç hesapla yükseklik ve margin-top değerini değiştiriyoruz.Bu class şimdilik sadece deneme amacıyla oluşturuldu ve bir katmanımıza daha sonra kaldırılmak şartıyla uygulandı.
Örneğimizi incelediysek artık genis class’ımıza ihtiyacımız yok.Bu class’ı kaldırdıktan sonra jquery kodlarımızı yazmaya başlayabiliriz.
Efektimiz menülerimizin üstüne gelinme durumuna göre başlayacak bu yüzden hover() fonksiyonu bizim için yeterli olacaktır.
<script type="text/javascript" >
$(document).ready(function() {
$(‘.menu’).hover(function(){
//Menü’nün üstüne gelindiğinde çalışacak animasyon.
});
});
</script>
Şimdi katmanımızı hareketlendirme zamanı , katmanımızı hareketli kılmak içinse jquery animate() fonksiyonunu kullanacağız.Bu fonksiyon sayesinde menümüzü şimdiki halinden yukarda tanımlamış olduğumuz genis class’ına ait değere ulaştıracağız.
<script type="text/javascript" >
$(document).ready(function() {
$(‘.menu’).hover(function(){
$(this).animate({"height":"150px","margin-top":"65px"});
});
});
</script>
Artık menümüz dilediğimiz gibi açılıyor şimdi menümüzü eski değerlerine getirerek kapanma işlemini gerçekleştirelim.
<script type="text/javascript" >
$(document).ready(function() {
$(‘.menu’).hover(function(){
$(this).animate({"height":"150px","margin-top":"65px"});
},function(){
$(this).animate({"height":"40px","margin-top":"120px"});
});
});
</script>
Dikkat etmeniz gereken husus menümüzün üstünden birkaç sefer geçtiğimizde animasyonumuzun sürekli devam etmesi buda oldukça çirkin bir görünüm oluşturmakta.Bunu engellemek için Jquery’nin stop() ifadesini kullanacağız.
Animate fonksiyonlarımızı aşağıdaki gibi değiştirelim.
$(this).stop().animate({"height":"150px","margin-top":"65px"});
$(this).stop().animate({"height":"40px","margin-top":"120px"});
Böylelikle menülerimiz üstünden ayrıldığımızda animasyonu durdurmaktayız.
Son olarak anamanü ve iletişim kısımlarının açılmasını istemiyoruz bunun için anamenü ve iletişim katmanlarımıza birer id verelim.Anamenü için “anamenu” İletişim bölümü içinse “iletisim” id’sini kullandım.Sonrasında seçili katmanımızın id değerini alalım.
var id=$(this).attr("id");
Animasyonu sadece İletişim ve Anasayfa dışında çalıştırmak için id’leri bu katmanların id’lerine eşit olmayan katmanlara animasyonu uygulamamız gerek.Bunu sağlamak için basit bir if fonksiyonu kullanmamız yeterli.
if(id!=’anamenu’ && id!=’iletisim’) {
$(this).stop().animate({"height":"150px","margin-top":"65px"});
}
Böylellikle ana hatlarıyla menümüz oluşturmuş olduk biraz css değişikliğiyle daha görsel menüler elde edebilirsiniz.
Örneği download edemiyoruz, yeniden yüklerseniz sevinirim.
Maalesef yazılar ile ilgili dosyalar kayboldu yedekler arasında varsa hepsi yüklenecektir.