■メニューが増えても大丈夫
クリックするとサブメニューを表示する、折りたたみ式メニューの作り方をご紹介します。
上のリンクをクリックすると、サブメニューが表示されます。これならメニューが増えても、全体をコンパクトに表示することができますね。
まずは<head>〜</head>の間に、次のような記述を追加しましょう。
<script language="JavaScript">
<!--
flag = false;
function TreeMenu(TreeName) {
TreeName = document.all[TreeName].style;
if(TreeName.display == 'none') TreeName.display = "block";
else TreeName.display = "none";
}
//-->
<
/script> |
これで下準備が完了しました。
さっそくメニュー部分を作ってみましょう。今回は、下のようなメニューを折りたたみ式に改造します。
■ メニュー1<br>
・ <a href="***">サブメニュー1-1</a><br>
・ <a href="***">サブメニュー1-2</a><br>
・ <a href="***">サブメニュー1-3</a><br>
<
br>
■ メニュー2<br>
・ <a href="***">サブメニュー2-1</a><br>
・ <a href="***">サブメニュー2-2</a><br>
・ <a href="***">サブメニュー2-3</a><br>
|
この状態では「サブメニュー」部分が表示されています。これを、「メニュー1」と「メニュー2」を残して、クリックするとそれぞれのサブメニューが表示されるように改造します。
■ <a href="javaScript:TreeMenu('MenuName1')">メニュー1</a><br>
<
div id="MenuName1" style="display:none">
・ <a href="***">サブメニュー1-1</a><br>
・ <a href="***">サブメニュー1-2</a><br>
・ <a href="***">サブメニュー1-3</a><br>
< /div>
<
br>
■ <a href="javaScript:TreeMenu('MenuName2')">メニュー2</a><br>
<
div id="MenuName2" style="display:none">
・ <a href="***">サブメニュー2-1</a><br>
・ <a href="***">サブメニュー2-2</a><br>
・ <a href="***">サブメニュー2-3</a><br>
< /div> |
赤字と青字の部分が追加した記述です。MenuName1とMenuName2の部分は自由に名前を付けてもよいのですが、重複しないように注意してください。さらにメニューを増やす場合は、MenuName3、MenuName4のように名前を付けましょう。
「メニュー」部分をクリックするとサブメニューが表示されます。もちろん、サブメニューにリンクを設定しておけば、クリックしたときに指定のページにジャンプします。
サブメニューの冒頭の記号を工夫すれば、ツリー表示っぽく表現することもできます。
画像を使ってもよいでしょう。
|
