階層化メニューを設定する

書式

menuObj = new Spry.Widget.MenuBar(menuID)

menuObj : メニューオブジェクト
menuID : メニュー全体を囲むulタグのID

説明

階層化メニューを設定するにはSpry.Widget.Accordion()を使います。パラメータにはメニュー全体を囲んでいるulタグのID名を指定します。Adobe Spryでは階層化メニューを実現する場合スクリプトの変更ではなくHTMLタグのclass属性に特定のスタイルシートを設定します。階層化したい部分にclass="MenuBarItemSubmenu"を指定することで自動的に階層化メニューとして表示されます。

逆引きAdobe Spryリファレンス

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/SpryMenuBarHorizontal.css" type="text/css" media="all">
<script src="js/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function() {
new Spry.Widget.MenuBar("MenuBar1");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : Menuサンプル</h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">はじめに</a>
<ul>
<li><a href="#">お知らせ</a></li>
<li><a href="#">見学について</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">商品一覧</a>
<ul>
<li><a href="#">お菓子</a></li>
<li><a href="#">清涼飲料</a></li>
<li><a href="#">和菓子</a></li>
<li><a href="#">氷菓子</a></li>
</ul>
</li>
</ul>
</body>
</html>