【jQuery】シンプルなアコーディオンメニュー

Tweet

Category JavaScript / Tagged jQuery 2012/02/20

アコーディオン型のメニューというのはjQueryでよく見るプラグインの１つだと思います。

これを自分のサイトに取り込む場合、よさそうなのを探してくるのも手ですが、余計な機能がついていたり、そのせいで重くなったり、カスタマイズしようにも手を入れにくかったり、導入のためにjsファイルやcssファイル、画像の読み込みが増えたりします。

最低限の機能でいいのに…とか、カスタマイズしやすいのを…という場合を考えて、最低限の機能しかないものを書いてみました。

• 階層は2段まで。
• 親をクリックしたら子分がスライドして開くだけ。
• その他余計な機能なし。

DEMO

• トップ
• 日記
  • 2012/02
  • 2012/01
  • 2011/12
  • 2011/11
• コラム
  • jQuery
  • jQuery UI
  • jQueryMobile
• その他
  • profile
  • Twitter
  • Facebook
• リンク

HTML

    <ul id="menu">
        <li><a href="#">トップ</a></li>
        <li><div>日記</div>
            <ul>
                <li>2012/02</li>
                <li>2012/01</li>
                <li>2011/12</li>
                <li>2011/11</li>
            </ul>
        </li>
        <li><div>コラム</div>
            <ul>
                <li>jQuery</li>
                <li>jQuery UI</li>
                <li>jQueryMobile</li>
            </ul>        
        </li>
        <li><div>その他</div>
            <ul>
                <li>profile</li>
                <li>Twitter</li>
                <li>Facebook</li>
            </ul>        
        </li>
        <li><div>リンク</div></li>
    </ul>

javascript

//プラグインを作って
(function($){  
    $.fn.extend({
        "simpleMenu" : function() {
            return this.each(function() {
                $(this).addClass("simpleMenu");
                $(this).find("li > div").on('click', function(){$(this).next("ul").slideToggle();}).next('ul').hide();
            });
        }
    });
})(jQuery);

//使う
$(function(){
    $('#menu').simpleMenu();
});

CSS

.simpleMenu,.simpleMenu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.simpleMenu > li{
    padding:1px;
    border-top:1px solid #cccccc;
    border-left:1px solid #cccccc;
    border-right:1px solid #cccccc;
    width:150px;
    text-indent:10px;
}
.simpleMenu > li > div{
    cursor:pointer;
}
.simpleMenu > li:first-child{
    border-radius:5px 5px 0px 0px;
}
.simpleMenu > li:last-child{
    border-bottom:1px solid #cccccc;
    border-radius:0px 0px 5px 5px;
}
.simpleMenu ul > li{
    text-indent:30px;
    padding:3px;
}

ライセンス

ライセンスを主張するほどのものではありませんが、書いておくとしたらパブリックドメインでお願いします。

コピー、改変、商用利用特に制限ありません。