ツリー表示するメニュー
<HTML>
<HEAD>
<TITLE>ツリー表示するメニュー</TITLE>
<SCRIPT language="JavaScript">
<!--
flag = false;
function tree(tName) {
tMenu = document.all[tName].style;
if(tMenu.display == 'none') tMenu.display = "block";
else tMenu.display = "none";
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="javaScript:tree('menu1')"><b>>>リンク1</b></a><br>
<DIV id="menu1" style="display:none">
├ <A href="http://www.salut.ne.jp/">Salut!</A><BR>
├ <A href="http://web.arena.ne.jp/">WebARENA</A><BR>
├ <A href="http://www.nadukete.net/">名づけてねっと</A><BR>
└ <A href="http://www.sphere.ne.jp/">InfoSphere</A><BR>
</DIV>
</BODY>
</HTML>
文字をクリックするとツリー型にメニューが表示されます。
たくさんメニューがあっても、コンパクトにまとめることができます。
<HEAD></HEAD>内に上記JavaScriptを記述します。
ツリーの元になる文言を<A href="javaScript:tree('menu1')"></A>で囲みます。
ここのmenu1は任意の名前で結構です。
その後に、クリックした後に表示させたい部分を<DIV id="menu1" style="display:none"></DIV>で囲みます。
ここのmenu1は先ほど設定した名前に合わせます。
例では文頭に罫線(├など )を置いていますが、・や■など、自由に設定することができます。
また<DIV></DIV>内には画像を置くことも可能です。
カスタマイズして、自分なりのコンパクトメニューを開発してください。
ホームページ作成ガイド
ホームページ作成ガイド