ナビゲーションメニューの折りたたみを実現する JavaScript

January 28, 2008 11:55 PM

ul 要素と li 要素で構成されたナビゲーションの折りたたみを実現するための JavaScript です。

HTML タグ

以下のような HTML タグが組まれている場合に、折りたたみを実現することを考えます。「大項目」をクリックすれば「中項目」が現れ、現れた「中項目」をクリックすれば「小項目」のリストが表示される、とします。


<ul>
    <li><a href="#">大項目</a>
        <ul>
            <li><a href="#">中項目</a>
                <ul>
                    <li><a href="#">小項目1</a></li>
                    <li><a href="#">小項目2</a></li>
                    <li><a href="#">小項目3</a></li>
                    <li><a href="#">小項目4</a></li>
                    <li><a href="#">小項目5</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

a 要素をクリックした場合に、親要素の li が内包している ul が展開されればよい、と考えることができます。

JavaScript ソ−スコード

あんまり美しくないけど、以下のように書いたとします。


var ulShowHide = {
    showHide: function(element) {
        if (element.parentNode.childNodes.item(2)) {
            if (element.parentNode.childNodes.item(2).nodeName == 'UL') {
                var styleDisplay = element.parentNode.childNodes.item(2).style.display;
                if (styleDisplay == 'block' || styleDisplay == '') {
                    element.parentNode.childNodes.item(2).style.display = "none";
                } else {
                    element.parentNode.childNodes.item(2).style.display = "block";
                }
            }
        }
        return false;
    }
}

HTML タグの編集

a 要素に onclick 属性として ulShowHide.showHide(this);return false; を追加します。return: false を追加するのは、IE で a 要素がクリックされた場合に、表示がページの一番上に戻ってしまうのを防ぐためです。


<ul>
    <li><a href="#" onclick="ulShowHide.showHide(this);return false;">大項目</a>
        <ul style="display: none;">
            <li><a href="#" onclick="ulShowHide.showHide(this);return false;">中項目</a>
                <ul style="display: none;">
                    <li><a href="#">小項目1</a></li>
                    <li><a href="#">小項目2</a></li>
                    <li><a href="#">小項目3</a></li>
                    <li><a href="#">小項目4</a></li>
                    <li><a href="#">小項目5</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

結果

大項目
- 中項目

サンプルのダウンロード

以下のリンクからサンプルをダウンロードできます。各ファイルの格納についてはおれ基準になっていますがご了承ください。

サンプルのダウンロードはこちらから

Movable Type で使う場合

例えばカテゴリ名をクリックすると、そのカテゴリに属するブログ記事を表示するような折りたたみを実現する場合は、以下のようにテンプレートを記述します。


<MTTopLevelCategories>
    <MTSubCatIsFirst><ul></MTSubCatIsFirst>
        <li><a href="#" onclick="javascript:ulShowHide.showHide(this);return false;"><$MTCategoryLabel$></a>
    <MTIfNonZero tag="MTCategoryCount">
            <ul style="display: none;">
        <MTEntries>
                <li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
        </MTEntries>
            </ul>
    </MTIfNonZero>
        <$MTSubCatsRecurse$></li>
    <MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>

Comments