HALFWAY

■ 折りたたみ・メニュー

ナビゲーションメニューの折りたたみを実現するの サンプルを試してみる。
元ページのサンプルに CSS設定が 無い為 作ってみたが 使い勝手が悪い。

■ CSS

#sub, #sub ul, #sub li {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

#sub .tree {
	display: none;
}

※ 基本的に Javaは 嫌い！、、、なので、使用したくない。

■ サンプル

• 折たたみ・大項目 ▽
  • 折たたみ・中項目 ▽
    • 小項目1
    • 小項目2
    • 小項目3
    • 小項目4
    • 小項目5

■ ソース (参考：転記)

・Java ソース

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

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