WebDesigning 2007年3月号掲載のサンプルです。サンプルスクリプトは掲載されたものとは若干異なります。
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryメニュー</title>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function(){
new Spry.Widget.MenuBar("MenuBar1");
}
// --></script>
</head>
<body>
<h1>Spryメニュー</h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">会社概要</a>
<ul>
<li><a href="#">事業内容</a></li>
<li><a href="#">資本金</a></li>
<li><a href="#">マップ</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">取扱商品</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Fireworks</a></li>
</ul>
</li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryメニュー</title>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function(){
new Spry.Widget.MenuBar("MenuBar1");
}
// --></script>
</head>
<body>
<h1>Spryメニュー</h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">会社概要</a>
<ul>
<li><a href="#">事業内容</a></li>
<li><a href="#">資本金</a></li>
<li><a href="#">マップ</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">取扱商品</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Adobe製品</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">旧Macromedia製品</a>
<ul>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Fireworks</a></li>
</ul>
</li>
</ul>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</body>
</html>
【サンプルを実行する】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryメニュー</title>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css"><!--
#MenuBar1 li, #MenuBar1 li ul{
width:200px; /* 横幅の指定 */
border:1px solid #aaa; /* 枠を指定した場合。でも背景画像でやるのが綺麗だしベスト */
}
li a {
font-size:9pt;
}
--></style>
<script src="SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function(){
new Spry.Widget.MenuBar("MenuBar1");
}
// --></script>
</head>
<body>
<h1>Spryメニュー</h1>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu">会社概要</a>
<ul>
<li><a href="#">事業内容</a></li>
<li><a href="#">資本金</a></li>
<li><a href="#">マップ</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">取扱商品</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Adobe製品</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">旧Macromedia製品</a>
<ul>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Fireworks</a></li>
</ul>
</li>
</ul>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</body>
</html>
【サンプルを実行する】
<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Spryメニュー</title>
<link href="SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css"><!--
#MenuBar1 li, #MenuBar1 li ul{
width:200px; /* 横幅の指定 */
border:1px solid #aaa; /* 枠を指定した場合。でも背景画像でやるのが綺麗だしベスト */
}
li a {
font-size:9pt;
}
--></style>
<script src="SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function(){
new Spry.Widget.MenuBar("MenuBar1");
}
// --></script>
</head>
<body>
<h1>Spryメニュー</h1>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#" class="MenuBarItemSubmenu">会社概要</a>
<ul>
<li><a href="#">事業内容</a></li>
<li><a href="#">資本金</a></li>
<li><a href="#">マップ</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">取扱商品</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Adobe製品</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">InDesign</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">旧Macromedia製品</a>
<ul>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Fireworks</a></li>
</ul>
</li>
</ul>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</body>
</html>