简单的jQuery竖向滑动菜单

lyongde

截图效果：

 
Javascript代码：
$(document).ready(function(){$("#menu a, #menu h1").mouseover(function(){$(this).addClass("on");});$("#menu a, #menu h1").mouseout(function(){$(this).removeClass("on");});$("h1").click(function(){$(this).next("div").slideToggle("slow").siblings("div").slideUp("slow");});}); 
 
CSS代码：
.myMenu {width: 200px;border: 1px solid #900;background: #fff;font-family: Arial, Helvetica, sans-serif;}.myMenu h1 {margin: 0 0 1px 0;background: #900;padding: 5px;font-size: 14px;}.myMenu h1.on {background: #C00;color: #fff;cursor: pointer;}.myMenu a {display: block;padding: 3px;background: #666;}.myMenu a.on {display: block;padding: 3px;color: #fff;background: #ff0000;cursor: pointer;}.myMenu .collapse {margin: 0 0 1px 0;display: none;} 
 
HTML代码
<div id="menu" class="myMenu">    <h1>Menu Header01</h1>    <div>        <a>Sub Menu1</a>        <a>Sub Menu2</a>        <a>Sub Menu3</a>        <a>Sub Menu4</a>    </div>   <h1>Menu Header02</h1>    <div class="collapse">        <a>Sub Menu1</a>        <a>Sub Menu2</a>        <a>Sub Menu3</a>        <a>Sub Menu4</a>    </div>    <h1>Menu Header03</h1>    <div class="collapse">        <a>Sub Menu1</a>        <a>Sub Menu2</a>        <a>Sub Menu3</a>        <a>Sub Menu4</a>    </div></div>