jQuery ile Sınırsız Açılır (Akordiyon) Menü Örneği

Yeni bir jQuery makalemizde, sınırsız alt menü ve alt menü tasarım örneğini sizlere aktaracağız.

Yaptığınız tasarımlarda basit ve kullanışlı bir menü örneği yapıyoruz. Öncelikle uygulamamızın tasarımı için CSS kodlarını yazalım


CSS Betikleri
        *{margin:0px;padding:0px;border:0px;font-size:100%;font:inherit;vertical-align:baseline;border-spacing:0px;outline:none;}
        body, html{font-family:'Arial', Helvetica, sans-serif;font-size:12px;color:#444;line-height:20px;background-color:#fff;}
        .menu-kapsul {width:200px;margin:20px auto;}
        .menu-kapsul ul{list-style-type:none;}
        .menu-kapsul ul li{display:block;margin-left:10px;}
        .menu-kapsul ul li a{color:blue;text-decoration:none;}
        .menu-kapsul ul li span{display:block;line-height:20px;background:#e3e3e3;margin-bottom:1px;padding:0px 5px;}
        .menu-kapsul > ul li ul{display:none;}

Şimdi ise jQuery kodlarımızı yazalım
jQuery Betikleri
        $(document).ready(function () {
            $(".menu-kapsul a").click(function () {
                $(this).parent("li").children("ul").slideUp("slow");
                if ($(this).next("ul").css("display") == 'none') {
                    $(this).next("ul").slideDown("slow");
                }
            });
        });

HTML kodlarımızı yazalım
HTML Betikleri
    <div class="menu-kapsul">
        <ul>
            <li>
                <a href="javascript:;"><span>Menü A</span></a>
                <ul>
                    <li><span>A1</span></li>
                    <li><span>A2</span></li>
                    <li>
                        <a href="javascript:;"><span>A3</span></a>
                        <ul>
                            <li><span>A3 - 1</span></li>
                            <li><span>A3 - 2</span></li>
                            <li><span>A3 - 3</span></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:;"><span>Menü B</span></a>
                <ul>
                    <li><span>B1</span></li>
                    <li>
                        <a href="javascript:;"><span>B2</span></a>
                        <ul>
                            <li>
                                <a href="javascript:;"><span>B2 - 1</span></a>
                                <ul>
                                    <li><span>B2 - 1 - 1</span></li>
                                    <li>
                                        <a href="javascript:;"><span>B2 - 1 - 2</span></a>
                                        <ul>
                                            <li><span>B2 - 1 - 2 - 1</span></li>
                                            <li><span>B2 - 1 - 2 - 2</span></li>
                                            <li><span>B2 - 1 - 2 - 3</span></li>
                                        </ul>
                                    </li>
                                    <li><span>B2 - 1 - 3</span></li>
                                </ul>
                            </li>
                            <li><span>B2 - 2</span></li>
                            <li><span>B2 - 3</span></li>
                        </ul>
                    </li>
                    <li><span>B3</span></li>
                </ul>
            </li>
        </ul>
    </div>

Ekran Çıktısı
jQuery ile Sınırsız Açılır (Akordiyon) Menü Örneği
Örnek

Yorumlar

  • Derviş

    Derviş:

    3 yıl önce

    Güzel bir örnek ama sıkıntı şu ki tasarımı değiştiremiyorum. mouseover eventi ile yaptığımda padding verdiğimde problemli çalışıyor. Birde onu halledersem çok iyi olacak :)
    1 cevapla
  • Yönetici Yorumu:

    Çalışmanızı örnek olarak gösterebilirseniz, verdiğiniz örnek üzerinden yardımcı olmaya çalışalım.
  • Gültekin Serinken

    Gültekin Serinken:

    3 yıl önce

    Hocam sağolasın 2 saattir uğraşıyordum yapamamıştım sayende hallettim :)
    1 cevapla
  • Yönetici Yorumu:

    Yardımcı olabildiysek ne mutlu bize.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum