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