简单的jQuery竖向滑动菜单
截图效果：http://www.mei-de.com/____temp/menu.jpg
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>
页:
[1]