RSS

jQuery Yumuşak Animasyonlu Açılır Menu – jQuery Soft Dropdown Menu

Bu yazı 06 Mar 2009 tarihinde yazılmıştır
Menu Kapalı

Menu Kapalı

Adım 1 – Javascript Dosyalarını Sayfaya Eklemek


<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>

Adım 2 – HTML Kodlarını Eklemek


<p>Fare ile menülerin üzerinde gezinin :) </p>

<ul>
<li class="siyah">
<p><a href="#">K</a></p>
</li>
<li class="turuncu">
<p><a href="#">A</a></p>
</li>
<li class="koyumavi">
<p><a href="#">D</a></p>
</li>
<li class="mor">
<p><a href="#">İ</a></p>
</li>
<li class="yesil">
<p><a href="#">R</a></p>
</li>
</ul>

Burada her menu için ayrı bir renk kodu ve sınıfı oluşturdum. Siz isterseniz hepsine aynı sınıfı atayarak tek renk yapabilirsiniz.

Adım 3 – jQuery ile Animasyonu Vermek

En güzel yer :) 


$(document).ready(function(){

$("a").click(function(){
$(this).blur();
});

//Fare Üzerine Gelince
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

//Fare Üzerinden Gidince
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

});

Sayfa yüklendiğinde çalışmaya başla dedikten sonra a tagına tıklandığında o etrafında oluşan çerçeveyi blur(tam olarak ne denir bilmiyor)laştır dedik. Daha sonra li elemanı üzerine gelince yüksekliği 150px yap ve 600 yani 0.6 saniyede işlemi easeOutBounce yani yüksekliğe ulaşınca zıplayarak tamamla dedik. Fare üzerinden gidince yine aynı şekilde 0.6 saniyede 50px yüksekliğe geri dön dedik.

Menu Açılmış

Menu Açılmış

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız

, , , , , ,
CSS, XHTML, jQuery


“jQuery Yumuşak Animasyonlu Açılır Menu – jQuery Soft Dropdown Menu” yazı için 8 Yorum yapılmış.

  1. Kadir GÜNAY 23 Oca 2010 | Cevapla

    gokhan aldığın hata nedir?


  2. gokhan 22 Oca 2010 | Cevapla

    Kadir bey ellerinize sağlık çok iyi olmuş,fakat benım şöyle bir sorunum var.Siteme java desteli resim galerisi eklemek istediğimde menü çalışmışyor.Oluşturmuş oldugunuz menünün js i jquery destekli oldugu için bende jquery destekli birkaç galeriye baktım fakat onlarda da çakışma yaşadım ve çalışmadı.Aynı html de 2 javascript nasıl kullanabilirim?veya sizin menünüz ile çakışma yapmayan bir galeri önerebilirmisiniz?Teşekkürler…


  3. cem 15 Oca 2010 | Cevapla

    ellerinize sağlık çok iyi olmuş,teşekkürler…


  4. Kadir GÜNAY 21 Eki 2009 | Cevapla

    Yukarı yapman için bu şekilde değil de li’ lerin arasına div ya da span atıp onun pozisyonunu değiştirerek aynı şekilde uygulatabilirsin.


  5. Çağrı 15 Eki 2009 | Cevapla

    Peki birşey soracam, efekti aşağı değilde yukarı vermek için nereyi değiştirmemiz lazım? :D


  6. Kadir GÜNAY 18 Tem 2009 | Cevapla

    Lanet işine yaradıysa ne mutlu bana :) yenileri geliyor.


  7. LaNeT 17 Tem 2009 | Cevapla

    Kadir yine güzel bir döküman yayınlamışsın. Çok güzel, eline koluna sağlık. Çalışmalarının devamını bekleriz.


  8. ARTI 17 Nis 2009 | Cevapla

    Süper ve hemen hemen bütün browserlarda çalışıyor. Eline Koluna sağlık kadir.


Yorum Yap!