メニューバー(横)を設定する

書式

menuObj = new Spry.Widget.MenuBar(menuID)

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

説明

メニューバー(横)を設定するにはSpry.Widget.MenuBar()を使います。パラメータにはメニュー全体を囲んでいるulタグのID名を指定します。また、メニューのためのスタイルシートファイルを読み込む必要があります。メニューバーが横の場合はSpryMenuBarHorizontal.cssファイルを読み込みます。メニューが正常に構築されると、作成されたメニューオブジェクトが返されます。メニューバー処理を行うためには、HTMLの構造とスタイルシートが以下のように定義されている必要があります。

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">項目1</a></li>
<li><a href="#">項目2</a></li>
<li><a href="#">項目3</a></li>
<li><a href="#">項目4</a></li>
</ul>

逆引き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 href="#">はじめに</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">製品リスト</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</body>
</html>