jQuery ile Animasyonlu Menü Yapımı

Bu dersimizde jquery ile animasyonlu bir menünün nasıl yapıldığını öğreneceğiz.. Sprite olarak hazırladığımız menüde, background-position değerlerini animasyonlu bir şekilde değiştirerek güzel bir menü oluşturacağız..

Demoyu İnceleyin;
http://prototurk.com/demo/jquery-animate-menu/index.html

Örnek Dosyayı İndirin;
http://yadi.sk/d/I84bfXgk0ME8B

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“jQuery ile Animasyonlu Menü Yapımı” üzerine 9 yorum

  1. hocam farklı tarayıcılardaki sorunu önlemek için position..js dosyasını eklenmeiş halini koyarmısınız.

  2. peki aşağı yukarı kaydırmak yerine sağa yada sola kaydırmak istersek ne şekilde düzenlememiz gerekiyor 🙂

  3. Biz aşağı yukarı kaydırmak için backgroundPosition'da y değeri ile oynadık.. Sağa sola kaydırmak için x değeri ile oynamak lazım.. Ancak sprite dosyasıda ona göre olmalı.. Yani menü yan yana değilde dik bir şekilde listelenek.. Sağ tarafına da hover hali gelecek ki o zaman y pozisyonunda kaydırabilelim 🙂

  4. Merhaba Tayfun Bey,
    Peki ben bu menüyü kendime göre uyarlamaya çalışsam nasıl yapabilirm , çok fazla bir photoshop bilgim yok.
    Resim üzerindeki yazıları nasıl değiştirebilirm ?

  5. @Gökhan Atan, photoshop ya da herhangi bir resim düzenleme programına hakim değilseniz yapmanız zor olacaktır.

  6. “transition” ile bir satır javascript kullanmadan da bu işi yapabilirsiniz.
    Tabiki eski gözatıcılarda sorun çıkartacaktır.
    Eski gözatıcılarda javascript, yenilerinde de “transition” kullanılmasını tavsiye ederim.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir