メニューバー Widget の概要と構造
メニューバー Widget は、ボタンの 1 つにマウスポインタを置いたときにサブメニューが表示される、ナビゲーションメニューボタンのセットです。 メニューバーを使用すると、わずかなスペースに多くのナビゲーション情報を表示できるだけでなく、ユーザーに長い距離をブラウズさせることなくサイト上の情報の全体像を把握させることができます。
次に水平メニューバー Widget の例を示します。この例では 3 番目のメニュー項目が展開されています。
メニューバー Widget の HTML コードは、外側の ul タグと、最上位レベルのメニュー項目ごとにこのタグに含まれる li タグで構成されます。 一方、最上位レベルのメニュー項目 (li タグ) には、各項目のサブメニューを定義する ul タグおよび li タグが含まれます。同様に、サブメニューにサブメニューを含めることもできます。 最上位レベルのメニューでもサブメニューでも、追加できるサブメニュー項目数は無制限です。
メニューバー Widget の HTML コードには、ドキュメントのヘッド内とメニューバー Widget の HTML コードの後に script タグも含まれます。 これらのタグでは、メニューバーをインタラクティブにする JavaScript オブジェクトを作成します。 メニューバー Widget を垂直にするか水平にするかは、メニューバーのメインコンテナの ul タグで定義します。 水平メニューバー Widget の HTML コードを次に示します。
<head>
...
<!--Link the Spry Manu Bar JavaScript library-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!--Link the CSS style sheet that styles the menu bar. You can select between horizontal and vertical-->
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Create a Menu bar widget and assign classes to each element-->
<ul id="menubar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<!--Initialize the Menu Bar widget object-->
<script type="text/javascript">
var menubar1 = new Spry.Widget.MenuBar("menubar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
このコードでは、new JavaScript 演算子によって、メニューバーオブジェクトが初期化され、ul コンテンツが menubar1 の ID を使用して静的 HTML コードからインタラクティブなページエレメントに変換されます。 Spry.Widget.MenuBar メソッドはメニューバーオブジェクトを作成する Spry フレームワークのコンストラクタです。このオブジェクトを初期化するために必要な情報は、ドキュメントのヘッド内でリンクした MenuBar.js JavaScript ライブラリに格納されています。
Widget を作成する a タグの多くには、CSS クラスが格納されています。 このクラスはメニューバー Widget のスタイルを制御し、対応する CSS ファイル、つまり選択に応じて "SpryMenuBarHorizontal.css" か "SpryMenuBarVertical.css" のいずれかのファイルに存在します。
メニューバー Widget の特定の部分の外観を変更するには、HTML コードでその部分に割り当てられたクラス名に対応する CSS ルールを編集します。 たとえば、メニューバーの最上位レベルのメニュー項目の背景色を変更するには、"SpryMenuBarHorizontal.css" ファイルの対応する CSS ルールを編集します。 "SpryManuBarHorizontal.css" ファイルの CSS コードを変更すると、そのファイルにリンクされているすべてのメニューバーが影響を受けます。
HTML コードに表示されているクラスに加えて、メニューバー Widget には、Widget に関連付けられた特定のデフォルトのビヘイビアもあります。 このビヘイビアは Spry フレームワークの組み込み部分で、"SpryMenuBar.js" JavaScript ライブラリファイルに格納されています。 このライブラリファイルには、マウスオーバー関連のビヘイビアが格納されています。
メニューバーの外観を変更してこのビヘイビアに関連付けるには、いずれかの CSS ファイルの適切なクラスを編集します。 何らかの理由で特定のビヘイビアを削除する場合は、そのビヘイビアに対応する CSS ルールを削除できます。