jQuery ile Açılır (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ü