jQuery Manşet menü sistemi

Merhaba arkadaşlar geçenlerde r10’da bir üye manşet menü sistemi istemişti bende hemen yapayım dedim.  Genelde uygulamara isim bulmaktan zorlanırım ama bu feed’imde bana yardımcı olan arakdaşlara teşekkürler.

Kod yapısına geçelim .

Css kodlarımız ;

Html Kodlarımız ;

jQuery kodlarımız ;

jQuery kodlarımız çok kalabalık duruyor ama %90’ı açıklamadan oluşuyor şimdi kodları satır satır anlatıyorum.

Sayfa yüklendiğinde.

Menü içerisindeki herhangi bir a tagının üzerine gelindiğinde (hover durumu gerçekleştiğinde).

Üzerine gelinen a tagının içinde img yani resim ara (find) sonra resmin display değerini al (css.(‘display’);)

Buradaki if değerimiz açık olan bir menünün üzerine gelindiğinde bir daha o menüye efekt vermesini engellemek.

Önceden açılan resimlerin hepsini kapat (fadeOut(‘fast’);

Önceden açılan resimlerin hepsini kapat (fadeOut(‘fast’);

Bu kadar basit arkadaşlar.

Kullanımı ;
Kullanımı çok basittir
1 – Yukarıda vermiş olduğum css kodlarını sayfanıza entegre edin.
2 – Sayfanızda herhangi bir js dosyası ekli değilse şu iki kodu tagları arası bu iki kodu yapıştırın.

Eğer sayfanızda ekli olan bir js kodu varsa sadece ab-mansetMenuSistemi.js dosyasını sayfanıza ekleyin.
3 – Html taglarını direk sayfanıza ekleyin. (Görünüm açısından tasarım hoş değil ama bunu kendinize göre ayarlaya bilirsiniz.)

“jQuery Manşet menü sistemi” üzerine 30 yorum

  1. Eline Sağlık Kardeşim… Yine her zaman ki gibi çok değerli bir makale olmuş… Arşive aldım inş. iler ki projelerde kullanırım inş…

  2. Yorum satırları kullanmanız anlaşılabilirlik açısından iyi olmuş. Kodlarda gayet güzel. Tebrikler.

  3. @depresan resimleri sağ tarafa left ve right değerleri ile kolay bir şekilde alabiliriz. Bu makalede o değişikliği yaparsam kullanıcıların kafaso karışabilir, ayrıca resimler otomatik boyutlanmıyor sen resimleri o boyutta oraya koyman lazım herhangi bir dil ile.

  4. hocam.. bu resimlerin efekt geçişlerini nasıl normal yapabilirim.. Efektsiz.. teşekkürler ilginiz için.. Görüşmek üzere. Gerçektende çok güzel birşey olmuş.

  5. merhaba

    cevabınız için teşekkürler
    Kodları buraya ekleyemiyorum ekledigimde yarısı gorunuyor nasıl paylasaşa bilirim

  6. As a designer i just wanted to point out that you have a very nice site , I enjoy the style and design, it really looks good.

  7. çok faydali bir içerik olmuş. uzun zamandır düşündüğüm bir sorunu çözmemde bana kaynak oldu. teşekkür ederim.

yazılımevi için bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir