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 Betiklerimiz.
    $(document).ready(function () {
        $(".menu").click(function () {
            $(".alt_menu").slideUp("slow");
            if ($(this).next(".alt_menu").css("display") == 'none') {
                $(this).next(".alt_menu").slideDown("slow");
            }
        });
    });
CSS Betiklerimiz.
.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;}

HTML betiklerimiz.
    <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>
jQuery ile Açılır (Akordiyon) Menü Örneği
Örnek

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

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