◆ツリー内部を表示/非表示


サンプル
クリックして下さい
こちらもクリックして下さい


◆STEP1
<SCRIPT Language="JavaScript">
<!--
function tree(id) {
var disp = document.all(id).style.display;

if(disp != "none" || disp == "") {
document.all(id).style.display = "none";
}
else {
document.all(id).style.display = "block";
}
}
//-->
</SCRIPT>
まず上記スクリプトタグをhead内、もしくはbody内に書き込みます。
メニューのみのシングルツリーはSTEP2、更にサブメニューでツリーを分けるダブルツリーはSTEP3へ。
それぞれツリーを表示させたい部分へ書き込みます。


◆STEP2 シングルツリー
<span style="cursor:hand" onClick="tree('menu')" class="top">メニュー</span>
<ul style="display:none" id="menu">
<li>コンテンツ1
<li>コンテンツ2
<li>コンテンツ3
</ul>



◆STEP3 ダブルツリー
<span style="cursor:hand" onClick="tree('menu')" class="top">メニュー</span>
<ul style="display:none" id="menu">
 <li><span style="cursor:hand" onClick="tree('sub-menu')" class="sub">サブメニュー1</span>
   <ul style="display:none" id="sub-menu">
   <li>1のコンテンツ1
   <li>1のコンテンツ2
   <li>1のコンテンツ3
   </ul>
 <li><span style="cursor:hand" onClick="tree('sub-menu2')" class="sub2">サブメニュー2</span>
   <ul style="display:none" id="sub-menu2">
   <li>2のコンテンツ1
   <li>2のコンテンツ2
   <li>2のコンテンツ3
   </ul>
 <li><span style="cursor:hand" onClick="tree(sub-menu3')" class="sub3">サブメニュー3</span>
   <ul style="display:none" id="sub-menu3">
   <li>3のコンテンツ1
   <li>3のコンテンツ2
   <li>3のコンテンツ3
   </ul>
</ul>



◆例
<html>
<head>
<title>あなたのホームページ</title>
<SCRIPT Language="JavaScript">
<!--
function tree(id) {
var disp = document.all(id).style.display;

if(disp != "none" || disp == "") {
document.all(id).style.display = "none";
}
else {
document.all(id).style.display = "block";
}
}
//-->
</SCRIPT>

</head>

<body>
ホームページ作成中。頑張ります!<BR><BR>
<span style="cursor:hand" onClick="tree('menu')" class="top">メニュー</span>
<ul style="display:none" id="menu">
<li><span style="cursor:hand" onClick="tree('sub-menu')" class="sub">サブメニュー1</span>
<ul style="display:none" id="sub-menu">
<li><a href="http://lolipop.jp/">ロリポップ!</a>
<li>1のコンテンツ2
<li>1のコンテンツ3
</ul>
<li><span style="cursor:hand" onClick="tree('sub-menu2')" class="sub2">サブメニュー2</span>
<ul style="display:none" id="sub-menu2">
<li>2のコンテンツ1
<li>2のコンテンツ2
<li>2のコンテンツ3
</ul>
<li><span style="cursor:hand" onClick="tree('sub-menu3')" class="sub3">サブメニュー3</span>
<ul style="display:none" id="sub-menu3">
<li>3のコンテンツ1
<li>3のコンテンツ2
<li>3のコンテンツ3
</ul>
</ul>

</body>

</html>
あなたのホームページ Internet Explorer
ファイル(F) 編集(E) 表示(V) お気に入り(A) ツール(T) ヘルプ(H)
ホームページ作成中。頑張ります!

メニュー