折叠导航菜单

最新推荐文章于 2024-07-23 16:23:26 发布

iteye_12132

最新推荐文章于 2024-07-23 16:23:26 发布

阅读量254

点赞数

分类专栏： DOM 文章标签： CSS IE HTML

DOM 专栏收录该内容

30 篇文章 0 订阅

订阅专栏


<!--[if ie 6]>
<style>
#topNav ul li { float: left; height: 1%; }
#topNav ul li a { height: 1%; }

</style>
<![endif]-->


<body onload="init();">
<div id="topNav">
<ul>
	<li><a href="#">Recipes</a>
	<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li>
	<a href="#">Contact Us</a>
		<ul class="subNav">
		<li><a href="#">Starters</a></li>
		<li><a href="#">Main Courses</a></li>
		<li><a href="#">Desserts</a></li>
	</ul>
	</li>
	<li><a href="#">Articles</a></li>
	<li><a href="#">Buy Online</a></li>
</ul>
</div>
<dir id="other">some other content</dir>
</body>



#topNav ul li ul {
	display: none;
}

/*来自CSS精粹第3版*/
#topNav {
	width: 200px;
}

#topNav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#topNav li {
	border-bottom: 1px solid #ED9F9F;
}

#topNav li a:link,#topNav li a:visited {
	font-size: 90%;
	display: block;
	padding: 0.4em 0 0.4em 0.5em;
	border-left: 12px solid #711515;
	border-right: 1px solid #711515;
	background-color: #B51032;
	color: #FFFFFF;
	text-decoration: none;
}

#topNav li a:hover {
	background-color: #711515;
	color: #FFFFFF;
}

#topNav ul ul {
	margin-left: 12px;
}

#topNav ul ul li {
	border-bottom: 1px solid #711515;
	margin: 0;
}

#topNav ul ul a:link,#topNav ul ul a:visited {
	background-color: #ED9F9F;
	color: #711515;
}

#topNav ul ul a:hover {
	background-color: #711515;
	color: #FFFFFF;
}


function init(){
    $('#topNav ul li').bind('click',{},collapse); 
}
function collapse(event){
    $(this).siblings().find('.subNav').css('display','none');
//     $(this).find('.subNav').css('display','block');
//     $(this).find('.subNav').slideDown('normal');
//     $(this).find('.subNav').fadeIn('slow');
    $(this).find('.subNav').show('normal');
}