|
 |
|
ツリーメニュー
 |
IE 4.0↑ |
 |
未対応 |
| オススメ度： |
 |
|
設置難易度： |
|
サンプルと機能
→ Sample 1：ツリーメニュー
→ Sample 2：階層付きツリーメニュー
文字をクリックされると、その下にメニューを表示します。
階層はいくつでも増やすことができます。
Netscape Navigatorには対応していません。
サンプルスクリプト
緑の文字が変更箇所で、赤い文字が対応するスクリプトです。
"//"以下はコメントです。削除しても影響ありません。
必要な箇所をコピー＆貼り付けして編集してください。
→ Sample 1：ツリーメニュー
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
a:hover {text-decoration:none;}
</STYLE>
<SCRIPT language="JavaScript">
<!--
// ツリーメニュー
flag = false;
function treeMenu(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:treeMenu('treeMenu1')">■ Yahoo! Japan1</a><br>
<DIV id="treeMenu1" style="display:none">
┣ <A href="http://www.yahoo.co.jp/">Yahoo!</A><BR>
┣ <A href="http://bb.yahoo.co.jp/">Yahoo! BB</A><BR>
┣ <A href="http://shopping.yahoo.co.jp/">Yahoo! Shopping</A><BR>
┗ <A href="http://auctions.yahoo.co.jp/">Yahoo! Auctions</A><BR>
</DIV>
<A href="javaScript:treeMenu('treeMenu2')">■ Yahoo! Japan2</a><br>
<DIV id="treeMenu2" style="display:none">
┣ <A href="http://www.yahoo.co.jp/">Yahoo!</A><BR>
┣ <A href="http://bb.yahoo.co.jp/">Yahoo! BB</A><BR>
┣ <A href="http://shopping.yahoo.co.jp/">Yahoo! Shopping</A><BR>
┗ <A href="http://auctions.yahoo.co.jp/">Yahoo! Auctions</A><BR>
</DIV>
<BR><BR><BR><BR>
</BODY>
</HTML> |
→ Sample 2：階層付きツリーメニュー
Sample 1とほぼ同じですので省略します。
サンプルページより「右クリック」→「ソースの表示」でプログラムを確認できます。 |
解説・注意点など
スタイルシートなどでリンクのアンダーラインを消去すると綺麗にできます。
← JavaScriptに戻る
|
|
|
