折りたたみ式縦型メニュー

折りたたみ式の縦型メニューをjQueryを使って試してみました。

HTMLとjQueryは次のとおり

<script type="text/javascript">
$(function(){
	$("ul.menu").hide();
	$("div.category").click(function(){
		$("ul.menu").slideUp();
		$("div.category").removeClass("open");
		if($("+ul",this).css("display")=="none"){
			$("+ul",this).slideDown();
			$(this).addClass("open");
		}
	});
	$("ul.menu li").mouseover(function(){
		$(this).addClass("rollover");
	}).mouseout(function(){
		$(this).removeClass("rollover");
	});
});
</script>
</head>
<body>
<div id="container">
	<ul class="navi"> 
		<li>
			<div class="category">和食</div>
 			<ul class="menu"> 
				<li><a href="#11">鮨</a></li> 
				<li><a href="#12">天ぷら</a></li> 
				<li><a href="#13">とんかつ</a></li> 
        <li><a href="#14">お好み焼き</a></li>
        <li><a href="#15">蕎麦・うどん</a></li>
        <li><a href="#16">すき焼き・しゃぶしゃぶ</a></li>
  		</ul> 
		</li> 
		<li>
     	<div class="category">中華</div>
			<ul class="menu"> 
				<li><a href="#21">ラーメン</a></li> 
        <li><a href="#22">チャーハン</a></li> 
				<li><a href="#23">餃子</a></li> 
				<li><a href="#24">マーボ豆腐</a></li> 
        <li><a href="#25">エビチリ</a></li> 
        <li><a href="#26">肉まん</a></li> 
			</ul> 
		</li>
		<li>
     	<div class="category">イタリアン・スペイン</div>
			<ul class="menu"> 
				<li><a href="#31">パスタ</a></li> 
				<li><a href="#32">ピザ</a></li> 
				<li><a href="#33">パエリア</a></li> 
			</ul> 
		</li> 
    <li>
     	<div class="category">ファストフード</div>
			<ul class="menu"> 
				<li><a href="#41">ハンバーガー</a></li> 
				<li><a href="#42">フライドチキン</a></li> 
				<li><a href="#43">カレーライス</a></li> 
				<li><a href="#44">アイスクリーム</a></li>
			</ul> 
		</li> 
	</ul>
</div>
</body>

CSSは次のとおり

#container {
	background:#fff;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-size:12px;
	color: #164158;
}

#container ul.navi {
	width:220px;
	margin:0px;
}

#container ul.navi, ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
#container ul.navi li {
	margin:0px;
}

#container div.category {
	margin-top:5px;
	height: 40px;
	line-height: 40px;
	text-indent:30px;
	background:url("images/category_plus.gif");
	cursor:pointer;
}

#container div.open {
	background:url("images/category_minus.gif");
	color: #fff;
}

#container ul.menu a{
	display:block;
	height: 35px;
	line-height: 35px;
	color: #164158;
}

#container ul.menu li{
	background:url("images/menu.gif");
	text-indent:35px;
  margin-left:0;
}

#container ul.menu li.rollover{
	background:url("images/menu_over.gif");
}

#container a {
	text-decoration:none;
}

サンプル