ツリー表示するメニュー

<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>&gt;&gt;リンク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>内には画像を置くことも可能です。
カスタマイズして、自分なりのコンパクトメニューを開発してください。

ホームページ作成ガイド

© INFI

ホーム | サイトについて | サイトマップ

ホームページ作成ガイド