mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Saydamlık(Opacity) Kullanarak Menü Hazırlama
Bu yazımda Jquery kullanarak hazırladığım bir menü örneğini sizlere tanıtacağım. Birçok sitede kullanılan bu örneği Jquery ile hazırladım ve elementlerin saydamlıklarıyla oynayarak efektif bir menü yapmaya çalıştım. Sonuçta yaptığım örnek Flash veya Silverlight ile hazırlanan örnekleri andırıyor. Ayrıca jquery kodlamalarımız ile oynayarak örneğimizi daha efektif daha görsel hale getirebiliriz. Sonuçta güzel ve kullanılabilir bir menü sisteminin oluştuğunu düşünüyorum. Şimdi kodlarımıza ve örneğimize göz atalım.

Örneği hazırlarken kullandığım html kodlar ve bu kodlara göre yazdığım Jquery kodlarım şöyle:

  // Html kodlar    
  <div id="menu">
      <a href="#">Anasayfa</a>
      <a href="#">Deneme 1</a>
      <a href="#">Deneme 2</a>
      <a href="#">Deneme 3</a>
      <a href="#">Deneme 4</a>
  </div>
 
  // Jquery kodlarımız
  $(function() {
        $("#menu a").hover(function() {
            $(this).stop().animate({ /* stop() kontrolü*/
                "opacity": "0.3"
            }, 500 /*süre*/);
        }, function() {
            $(this).animate({
                "opacity": "1"
            }, 1000 /*süre*/);
        });
    });

Görüldüğü gibi Jquery içinde yer alan hover fonksiyonu sayesinde istediğimiz elementin veya elementlerin mouseover ve mouseout eventlarını kontrol ediyoruz. Kodlarda ve örnekte en önemli nokta saydamlık değiştirme süreleri ve bunu kontrol eden stop() fonksiyonu. Bu fonksiyon ile saydamlık değişme süreci başlamış olan bir elementin saydamlık değiştirme olayı süre bitmeden tekrarlandığında bir önceki süreci sonlandırıyoruz ve yeni süreç işliyor. Bu işlem görselliğin daha iyi olmasını ve görselliğin Flash ve Silverlight örneklerine benzemesini sağlıyor. Daha iyi anlamak için bu fonksiyonu örnekten kaldırarak deneyebilirsiniz.

Hazırladığım örneği buradan görebilir, buradan da dosyaları indirebilirsiniz.

Örnekte menüleri renklendirmek yerine arka plan için resim kullandım. Bu tür örneklerde genellikle resim tercih ediliyor. Saydamlık değiştirme esnasında renklerin değiştirilmesi pek tercih edilmiyor. Ancak yine de yapılabilir bir yöntem. Ben ise örneğimde bir adet resim kullandım. Ayrıca örneği hem yatay menü hem de dikey menü olarak hazırladım.

İyi Çalışmalar.
Mehmet Duran 18 Haziran Perşembe 2009 3 24146 5,0
Web Tasarım jQuery Jquery Tasarım-Görsellik İndir Opacity Saydam İnternet
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Blog Tutmaya Başlayalı 1 Yıl Oldu Javascript ile Linkleri Renklendirme Jquery ve Ajax ile Hazırladığım Takvim jQuery Ajax ile Filtreleme İşlemlerinde Zamanlama Kullanma Temel Ağ Kavramları
Yorumlar
Yorum Yaz
RSS Yorum Takibi
kenan 18 Haziran Perşembe 2009 19:55 #1
güzelmiş teşekkürler
Hasan Gürsoy 24 Haziran Çarşamba 2009 22:45 #2
Bunun biyerlerinde stop falan yazılıyordu üzerinden sürekli geçilince ilginç efektler oluşmaması için. Ben www.toprakbasim.com`da böyle menüler kullanmıştım. İlk gördüğüm yer dragoninteractive.com
Mehmet Duran 24 Haziran Çarşamba 2009 23:36 #3
Evet dediğini ben de farkkettim ve bunu yazımda da belirttim. En önemli nokta stop() fonksiyonu diye. Bu fonksiyon ile efekti daha çeşitlendirebiliriz. Örneğimde de stop() fonksiyonunu kullandım.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Ne edersen kendine, edersin kendi kendine.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009