Jquery İle Sınırsız Açılır (Akordiyon) Menü Örneği

13/Şub/15 15:07

Kısayol

Şikayet

Özel Mesaj

camarade
ontedi

Kayıt Tarihi: 04/Eylül/2005

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 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>