截图效果:
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>