テーブルを利用してメニューを表示する

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows × - × ×
Macintosh - - × ×
UNIX - - - - - × ×

解  説  テーブルタグのthead、tbodyを利用すると簡単に折りたたみメニューができます。theadタグでメニュー名を囲んでおき、表示されるメニュー項目一覧はtbodyタグで囲みます。tbodyタグはblockタグなのでスタイルシートのdisplayプロパティを使い表示、非表示を行います。  このメニューはクリックするごとに表示/非表示を切り替えるタイプです。
コード <html> <head> <title>テーブルを利用してメニューを表示する</title> <script language="JavaScript"><!-- vType = ["none","block"]; function tblMenu(tOBJ,dType) { Menu = tOBJ.tBodies[0].style; Menu.display = vType[Menu.display.indexOf("none") + 1]; } // --></script> </head> <body> <table cellspacing="0" cellpadding="0" onClick="tblMenu(this)"> <thead><tr><th><img src="menu.gif"></th></tr></thead> <tbody style="display:none"> <tr><td><a href="http://www.openspc2.org/" ><img src="sub1.gif" border="0"></a></td></tr> <tr><td><a href="http://www.impress.co.jp/"><img src="sub2.gif" border="0"></a></td></tr> <tr><td><a href="http://game.gr.jp/" ><img src="sub3.gif" border="0"></a></td></tr> </tbody> </table> <hr> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!