階層化メニュー表示

説明

階層化メニューを表示するライブラリは、いくつかありますが基本的にはHTMLのタグ構造は同じです。リストタグである<ul>を入れ子にしてライブラリ固有のスタイルシートのクラスを指定します。
サンプルではAdobe Spryフレームワークを使って階層化メニューを実現しています。Adobe Spryではメニュー全体を囲むタグのスタイルシートのクラス名にMenuBarHorizontal、階層化メニューを表示するリストの<a>タグにはMenuBarItemSubmenuクラスを指定するだけで実現することができます。
HTMLの設定が終わったらプログラムではSpry.Widget.MenuBar()としてメニューを構築します。パラメータにはメニュー全体を囲むID名を指定します。

JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" href="SpryMenuBarHorizontal.css" type="text/css" media="all">
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script src="SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>階層化メニュー表示</h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">プログラム言語</a>
<ul>
<li><a href="#">アセンブリ言語とは？</a></li>
<li><a href="#">コンパイラとは？</a></li>
<li><a href="#">インタプリタとは？</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">LL言語</a>
<ul>
<li><a href="#">LL言語とは？</a></li>
<li><a class="MenuBarItemSubmenu" href="#">他言語との比較</a>
<ul>
<li><a href="#">従来の言語</a></li>
<li><a href="#">現在の言語</a></li>
</ul>
</li>
<li><a href="#">Perl</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
</ul>
</body>
</html>
window.onload = function() {
var hMenu1 = new Spry.Widget.MenuBar("MenuBar1");
}