jQuery Açılır Menü

Artık çoklu menulerde jquery açılır menu şart oldu bende dilimin döndüğünce şimdi jquery açılır menu yapmayı öğreteceğim. Öncelikle bu adresten jquery dosyamızı indiriyoruz ve css yatay veya dikey menulerimizi oluşturmaya başlıyoruz konu hakında bilgisi olmayanlar için css yatay menü ve dikey menuleri  anlatmıştım o konudan esinlenerek öncelikle css dosyamızı sonra jQuery dosyamızı yazmaya başlıyalım.

Css Dosyamızı yazıyoruz

 

Burada menu kalıplarımızı oluşturduk ve alt menulerin özelliklerine display:none dedik yani görünmez yaptık. Css dosyamızın bu kadar karışık durduğuna bakmayın içine girdikten sonra en fazla 6 ayrı class’a özellik tanımlamışızdır.

jQuery Dosyamızı yazalım

 

Bütün işlemi gerçekleştiren en önemli kısım burası adım adım anlatıyorum.

 

A Taglarından Class’ı Tikla olana tıklanıldığında şunları yap ( … )

Class’ı AltMenu olanların hepsini slideUp yap yani kaldır.

Burada ise Tıklanılan <a> tagında .AltMenu classlı div’i bul ve slideDown yap yani aç.

Dikey Açılır menümüz için yazdığımız js kodları bu kadar arkadaşlar. Yatay menü içinde bu kodlar geçerlidir. slideUp yerine fadeOut slideDown yerine fadeIn komutunu kullandık.

Şimdi ise Html kodlarımızı yazalım.

Html kodlarını yazmadan önce genel mantığımız bir ana menumuz olacak

 

ve bu menudeki <li></li> taglarının arasına açılacak alt menuyü yerleştireceğiz aşağıdaki örnekteki gibi.

 

Tam html kodlarımız :

 

Resim  :

Dikey Menü
Dikey Menü
Yatay Menü
Yatay Menü

Takıldığınız noktaları belirtirseniz elimden geldiğince cevaplamaya çalışacağım.

Html kodlarımızda bu kadar arkadaşlar demo için bu adrese bakabilirsiniz :
jQuery Açılır Menü
Post Views: 12.631

“jQuery Açılır Menü” üzerine 32 yorum

  4. Güzel menü örneği yeni temamda kullanacam bunu footerdan bir link çakarım artık bloguna :p

    Yanıtla

  10. hocam oncelıkle tsk ler. ben bunu asp.net te uyarladımda ordan bır bolume aıt baska bolumler gelcek

    <asp:Label ID="lblKategoriId" runat="server" Text='’ Visible=”false”>


    <%– –%>

    <a rel='sc’>
    <%– –%>

    <%–

    –%>
    <%– –%>

    <%—-%>

    <%—-%>

    css kısmı boyle

    cs kısmındada kod yazarak alt menuye esıtledım ama gozukmuyor.. yardımcı olabılrmısın ?

    Yanıtla

  12. peki açılır menüleri asp ye nasıl uyulayabilrizi yazar arkadaşım örneğin kategori sistemim var ve adminden kategori ve alt kategori eklendikçe otamatik olarak bu kodlaırn içine nasıl bir döngü ile import edebiliriz ?

    Yanıtla

  13. Üstad eline sağlık mükemmel bir çalışma olmuş düşlediğim yazılım açıkçası bir web sitesi kalıbı tasarlıyorum menu konusunda çok fazla içerik olduğunda aşşağıya doğru uzun bir liste olmaması için bu scripti kullanmak istedim fakat başarılı olamadım eğer yardım edebileceksen samet_bicen@hotmail.com.tr adresinden benimle iletişime geçersen çok memnun olurum çalışmalarınızda başarılar.

    Yanıtla

  15. hocam merhabalar ben jquery açılır menüyü uyguladım fakat firefoxta açınca saçmalıyor internet explorer de hiç bir sorun yok neyden kaynaklanıyordur bu sorun sizce ?

    Yanıtla

  17. dikey açılır menulerde 3 veya 4 ncü alt menuler nasıl kontrol edilir

    1. a
    11.aa
    111.aaa
    1111.aaaa(11 in üzerinde iken bu menunün açılmaması içn ne yapmalıyım?
    2222.aaaa
    222.bbb
    22.bb
    33.cc
    2. b
    3. c
    teşekkürler

    Yanıtla

  18. hocam ellerinize sağlık menü çok güzel kullanıyorum fakat bir sorum olucak açık olan menü başlığına tekrar tıklandığında o menünün altmenülerinin kapanmasını nasıl sağlarız ?

    Yanıtla

  19. merhaba bi sorum var:Ben çocuk düğüme bir alt düğüm ekelemek istendiğinde cssden bir alt düğüm içinde display ayarlarını yapmam yeterlimi jquery tarafındada birşey yapmak gerekirmi.

    Yanıtla

  20. Hocam ben şu sitedeki sayfalama şeklindeki menüyü istiyorum nasıl bulabilirim. Teşekkürler.

    sunoyun.com/Yil-Basi-Tatlilari-Oyna-4ef8c5091a237.html

    Bu sayfanın alt kısmında tavsiye et yorumlar gibi açılabilir menüden.

    Yanıtla

  21. hocam
    bu jQuery Dosyamızı yazalım
    demıssın
    onu nereye eklıyoruz
    harıcı bır dosyaysa ana dosyaya nasıl baglıyoruz bır aydınlatırsan sevınırım
    teşekkürler

    Yanıtla

  24. Öncelikle emeğiniz için teşekkürler Yalnız Yaptığım menünün altında slider var z-index veya position ayarlarıylane kadar oynadımsa sliderin üztünde göstermeyi başaramadım.

    Yanıtla

  26. meraba yine ben senden bana dönem ödevimde yardımcı olmanı rica edebilirmiyim 8) öğretmen jQery tabbet sekmeli panel uygulaması hakkında kodlarda dahil araştırma yapmamızı istedi ama yeterli açıklama bulmakta zorlanıyorum eğer bu konu hakkında bilgin varsa lütfen yardım edermisin 🙁

    Yanıtla

  27. Linklere tıklayınca Menü komple kapanıyor. Ne yapmalı ki en üstteki sizin örnekte ‘Aycan.net’ e tıklamadan menü komple KAPANMASIN..
    teşekkürler

    Yanıtla

Bir yanıt yazın

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