SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

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

jQuery'nin kullanım kolaylığı ile yapacağınız web uygulamalarında kullanabileceğiniz akordiyon menü örneği

Web sitelerinin kullanışlı öğelerinden birisi de açılır menüler. jQuery'nin webde getirdiği kolaylık sayesinde açılır menüler çok kısa kodlarla yazılabilmektedir. İşte bu örneğimizin kodlarını sizlere aktaralım.
jQuery
    $(document).ready(function () {
        $(".menu").click(function () {
            $(".alt_menu").slideUp("slow");
            if ($(this).next(".alt_menu").css("display") == 'none') {
                $(this).next(".alt_menu").slideDown("slow");
            }
        });
    });

JavaScript aksiyonunu hazırladık. Sonrasında CSS ile şekillendirelim.
CSS
.menu_kapsul{width:200px;background:#FBF8E9;margin:0px auto;padding:5px;font-family:"Arial", Tahoma, Sans-Serif;}
.menu{display:block;padding-left:5px;padding-right:5px;font-size:14px;line-height:24px;height:24px;text-decoration:none;color:#000;background:#EBE8D9;margin-bottom:3px;}
.alt_menu{list-style-type:none;display:none;font-size:12px;}
.alt_menu li{margin:0px 10px;padding:3px 0px;}
.alt_menu li + li{border-top:1px solid #EBE8D9;}
.alt_menu li a{text-decoration:none;color:#9E0303;}

CSS güzellemesi yapıldı, HTML iskeleti oluşturalım.
HTML
    <div class="menu_kapsul">
        <a class="menu" href="javascript:;">Menü 1</a>
        <ul class="alt_menu">
            <li><a href="#">Alt Menü 1 A</a></li>
            <li><a href="#">Alt Menü 1 B</a></li>
            <li><a href="#">Alt Menü 1 C</a></li>
        </ul>
        <a class="menu" href="javascript:;">Menü 2</a>
        <ul class="alt_menu">
            <li><a href="#">Alt Menü 2 A</a></li>
            <li><a href="#">Alt Menü 2 B</a></li>
            <li><a href="#">Alt Menü 2 C</a></li>
        </ul>
        <a class="menu" href="javascript:;">Menü 3</a>
        <ul class="alt_menu">
            <li><a href="#">Alt Menü 3 A</a></li>
            <li><a href="#">Alt Menü 3 B</a></li>
            <li><a href="#">Alt Menü 3 C</a></li>
        </ul>
    </div>

Ekran Görüntüsü
jQuery ile Açılır (Akordiyon) Menü Örneği
Örnek

Yorumlar

Yorum Yaz

Avatar

REKLAM

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

REKLAM

Çizgi Filmler

REKLAM

Çocuk Etkinlikleri Uygulaması

EN

  • Popüler
  • Yeni
  • Son Yorum