Html
    Css
    Js

    
                        
body {
	font-family:16px "Micorsoft YaHei",sans-serif;
}
.nav-list li a {
	text-decoration:none;
}
.nav-list ul {
	list-style:none;
	margin:0px;
	padding:0px;
	display:none;
}
.nav-list {
	width:220px;
}
.nav-list h3 {
	position:relative;
	margin:0px;
	padding:10px 20px;
	font-size:16px;
	line-height:20px;
	/* font-weight:normal;
	*/
		color:#fff;
	background-color:#333;
	border-top:1px solid #ccc;
	cursor:pointer;
}
.nav-list h3 span:hover {
	background-color:#222;
}
.nav-list h3 span {
	/* font-weight:normal;
	*/
		position:absolute;
	right:20px;
	top:14px;
	width:12px;
	height:12px;
	background:url("img/off.png") no-repeat;/* 默认时图片推荐12*12px*/
}
.nav-list h3.open span {
	background:url("img/on.png") no-repeat;/* 展开时图片推荐12*12px*/
}
.nav-list li a {
	display:block;
	padding:10px 20px;
	font-size:16px;
	font-weight:normal;
	color:#333;
	background-color:#f5f5f5;
	border:1px solid #ccc;
	border-bottom:none;
}
/* 鼠标划过颜色 */
	.nav-list li a:hover {
	background-color:#ccc;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

jQuery可收缩手风琴菜单

类似于itellyou网站的可以收缩的左(右)菜单条。js代码比较少,用了jquery

0