« jQuery 1.6 がリリースされました。 | トップページ | 簡単にスタイリッシュなフォームを表現するjavascript「Niceforms v.2.0」 »

2011年5月 9日 (月)

シンプルな開閉するアコーディオンメニュー #jQuery

Multi_level_accordion_menu

JQuery multi level accordion menu

アコーディオンメニューを作成するjQueryプラグインの導入方法を解説します。

使用するリソース
jQuery
scriptbreaker-multiple-accordion-1.js


head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/scriptbreaker-multiple-accordion-1.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".topnav").accordion({
            accordion:false,
            speed: 500,
            closedSign: '[+]',
            openedSign: '[-]'
        });
    });
</script>


htmlへの記述方法(例)
<ul class="topnav">
    <li><a href="#">home</a></li>
    <li><a href="#">sample</a>
        <ul>
            <li class="active"><a href="#">collection</a></li>
            <li><a href="#">works</a>
                <ul>
                    <li class="active"><a href="#">Unfake Denim</a></li>
                    <li><a href="#">The Different Shining</a></li>
                </ul>
            </li>
            <li><a href="#">textile</a></li>
        </ul>
    </li>
    <li><a href="#">socialmedia</a>
        <ul>
            <li><a href="#">twitter</a></li>
            <li><a href="#">facebook</a> </li>
            <li><a href="#">LinkedIn</a></li>
            <li><a href="#">mixi</a></li>
        </ul>
    </li>
    <li><a href="#">blog</a></li>
</ul>

アコーディオンメニューはリストを使用します。
階層化したい場合はliタグの中にulタグを記述し、項目をliタグにて記述します。
はじめからアコーディオンを開いておきたい場合はliタグに[class="active"]指定をします。


オプションの設定
今回のオプションの設定はhead要素に記述した4個となります。

オプション名 解説
accordion 真偽 他のアコーディオンを開いたときに今まで開いていたメニューの状態を決定します。[true]にて今まで開いていたメニューを閉じます。[false]で開いたままにします。
speed 数値 アコーディオンを開くスピードを決定します。
closedSign 文字列 開いているアコーディオンの表示に使用します。
openedSign 文字列 閉じているアコーディオンの表示に使用します。

|

« jQuery 1.6 がリリースされました。 | トップページ | 簡単にスタイリッシュなフォームを表現するjavascript「Niceforms v.2.0」 »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/39888662

この記事へのトラックバック一覧です: シンプルな開閉するアコーディオンメニュー #jQuery:

« jQuery 1.6 がリリースされました。 | トップページ | 簡単にスタイリッシュなフォームを表現するjavascript「Niceforms v.2.0」 »