简单的jQuery竖向滑动菜单-优快云博客

本文介绍了一种使用HTML、CSS及jQuery实现的菜单展开与收起效果。通过简单的鼠标悬停操作，即可使一级菜单项背景变化，并通过点击显示或隐藏子菜单。此效果涉及的前端技术包括HTML结构定义、CSS样式美化以及jQuery行为绑定。

截图效果：

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>