[Simple jQuery Dropdownsライブラリ] 階層化メニューを表示する
説明
Simple jQuery Dropdownsライブラリで階層化メニューを表示するにはHTMLのulタグを使ってメニューとなるリストを設定しておきます。入れ子になっている場合には、自動的に階層化され表示されます。最初のリストタグ(ul)にはdropdownクラスを指定し、入れ子になる最初のサブメニューのulタグにはsub_menuクラスを指定しておきます。あとは、ライブラリを読み込むだけで自動的にメニューが構築されます。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdownPlain.js"></script>
</head>
<body>
<h1>シンプルなメニュー</h1>
<ul class="dropdown">
<li><a href="#">お知らせ</a>
<ul class="sub_menu">
<li><a href="#">社長から</a></li>
<li><a href="#">総務部から</a></li>
<li><a href="#">製造現場から</a></li>
</ul>
</li>
<li><a href="#">製品リスト</a>
<ul class="sub_menu">
<li><a href="#">液晶テレビ</a></li>
<li><a href="#">洗濯機</a></li>
<li><a href="#">パソコン</a>
<ul>
<li><a href="#">ノート型</a></li>
<li><a href="#">デスクトップ型</a></li>
<ul>
</li>
</ul>
</li>
<ul>
</body>
</html>
【sample.js】
$(function(){
$("img.maximage").maxImage({
topSpace : 120
});
})