ツリーメニュー

javascript

試しにやってみたら、思いの外簡単に出来た。
とはいえ、出来たっていうだけで、実際に使うにはもう一工夫も二工夫も要るでしょう。
まぁ、特に装飾を必要としないんであれば使えるとは思う。

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>sample</title>
<style type="text/css">
/* メニューの体裁を整えるcss */
#treemenu li {
	list-style-type: none;
	cursor: pointer;
	border: solid 1px #dcdcdc;
	width: 200px;
	margin-top: -1px;
}
</style>
<script type="text/javascript">

function treeMenu(e) {
	var tgt = e.target || e.srcElement;
	if (tgt.tagName != 'LI') return;
	var elm = tgt.getElementsByTagName('UL');
	if (elm.length) {
		var stat = (elm[0].style.display == 'none') ? 'block': 'none';
		var chgStat = (stat == 'none') ? 'block': 'none';
		elm[0].style.display = stat;
		//display:none時、子ツリーが存在すれば、子ツリーごと非表示にする
		elm = elm[0].getElementsByTagName('UL');
		if (stat == 'none' && elm.length) {
			while (elm.length) {
				elm[0].style.display = stat;
				elm = elm[0].getElementsByTagName('UL');
			}
		}
	}
}
function initialize() {
	var elm = document.getElementById('treemenu');
	if (document.attachEvent) {
		elm.attachEvent('onclick', treeMenu);
	} else if (document.addEventListener) {
		elm.addEventListener('click', treeMenu, false);
	} else return false;
	//onload時は、子ツリーを全て非表示にする
	elm = elm.getElementsByTagName('UL');
	if (elm.length) {
		var i = 0;
		while (elm[i]) {
			elm[i].style.display = 'none';
			i++;
		}
	}
}

if (window.attachEvent) {
	window.attachEvent('onload', initialize); flg = 0;
} else if (window.addEventListener) {
	window.addEventListener('load', initialize, false); flg = 1;
} else { ; }

</script>
</head>
<body>
<div id="menubox">
	<ul id="treemenu">
		<li>はてな
			<ul>
				<li>ダイアリー
					<ul>
						<li>ほげほげ日記
						<li>ふがふが日記
						<li>ぴよぴよ日記
					</ul>
				<li>ブックマーク
				<li>ハイク
				<li>アンテナ
				<li>キーワード
			</ul>
		<li>Google
			<ul>
				<li>ウェブ検索
				<li>イメージ
				<li>Chrome
				<li>ノートブック
				<li>Blogger
				<li>Gmail
			</ul>
		<li>Yahoo
			<ul>
				<li>ウェブ検索
				<li>オークション
				<li>ファイナンス
				<li>メール
			</ul>
		<li>SO NOTE そうのて(；^ω^)
	</ul>
</div>
</body>
</html>

ソースの記述をちゃんとすれば、メニューをいくらでも入れ子にする事が可能。

サンプル

ツリーメニューのサンプル