【Adobe Spry TIPS】メニューバー

ひとまず毎日更新はこのエントリーで終了。次回からは不定期更新になります。

Spryでは様々なインタラクティブなメニューの作成も可能になっています。

メニューバーの生成にはSpryMenuBar.jsを利用します。

<script type="text/javascript" src="./includes/SpryDOMUtils.js"></script>
<script type="text/javascript" src="./widgets/menubar/SpryMenuBar.js"></script>

最初に横方向にメニューを並べる場合は

widgetsディレクトリ内のmenubarディレクトリ内のSpryMenuBarHorizontal.cssを読み込みます。

<link href="./widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

MenuBar関数を実行してmenuを作成します。

Spry.Utils.addLoadListener(function(){
var MenuBar1 = new Spry.Widget.MenuBar("メニューのID", {imgDown:"SpryMenuBarDownHover.gif", imgRight:"SpryMenuBarRightHover.gif"});
}

imgDownには最初に階層がある場合に利用される背景画像。imgRightは一階層内から内側に階層がある場合の画像を設定できます。

XHTMLには本体のメニューにMenuBarHorizontalというclass名を付けて、階層メニューと同じ項目には、MenuBarItemSubmenuというclass名をつけます。

<ul id="メニューのID" 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>

サンプル

縦方向のメニュー

widgetsディレクトリ内のmenubarディレクトリ内のSpryMenuBarVertical.cssを読み込みます。

<link href="./widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

横方向と同じようにWidget.MenuBarでspryを実行します。

Spry.Utils.addLoadListener(function(){
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryMenuBarRightHover.gif"})
})

XHTMLには本体のメニューにMenuBarVerticalというclass名を付けて、階層メニューと同じ項目には、MenuBarItemSubmenuというclass名をつけます。

<ul id="メニューのID" class="MenuBarVertical">
	<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>

サンプル

デザインの変更を行う場合は、読み込んだCSSに修正を加えるよりは、カスケーディングを利用してCSSを上書きするほうがよいでしょう。

【Adobe Spry TIPS】 目次

スポンサードリンク

«【Adobe Spry TIPS】 ファイルを読み込み表示するHTMLパネル | メイン | 【Adobe Spry TIPS 番外編】よくある質問っぽいののSpryを使ったサンプル»