folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder Jquery İle Sınırsız Açılır (Akordiyon) Menü Örneği



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

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    camarade
    ontedi
    ontedi's avatar
    Kayıt Tarihi: 04/Eylül/2005
    Erkek

    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>

     

    http://www.ontedi.com/javascript/jquery-ile-sinirsiz-acilir-akordiyon-menu-ornegi


    Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    ★★★★★
    Genki
    Genki's avatar
    Kayıt Tarihi: 24/Ağustos/2005
    Erkek

    Çok güzel bir örnek olmuş,bende geçelerde bu tarz acordion menüye açıldığı yerden devam etme özelliği eklemeyle uğraşıyordum.

    jquery cookie kullanarak çözdüm işimi, zor oldu ama güzel oldu 

  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    motka
    motka's avatar
    Kayıt Tarihi: 28/Ekim/2012
    Erkek

    Eline sağlık hocam şu aralar lazımdı bana böyle bir örnek. 

  4. KısayolKısayol reportŞikayet pmÖzel Mesaj
    coder2
    coder2's avatar
    Kayıt Tarihi: 15/Mart/2007
    Erkek

    Ellerine sağlık hocam , iyi paylaşım...


    Önceleri Kızlar Utanınca Kızarırdı Şimdilerde Kızarınca Utanıyorlar..
Toplam Hit: 918 Toplam Mesaj: 4