Html
    Css
    Js

    
                        
@import url("https://s2.pstatp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css");
@charset "utf-8";
	body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,img {
	padding:0;
	margin:0;
}
body {
	background-color:#3631CC;
	margin:0;
	padding:0;
	font-family:"微软雅黑";
	color:#FFF;
	font-size:0.16rem;
}
img {
	border:none;
}
ol,ul,li {
	list-style:none;
}
fieldset,img,abbr,acronym {
	border:0 none;
}
.nav {
	width:200px;
}
.nav h3 {
	display:block;
	font-size:20px;
	font-weight:normal;
	height:60px;
	line-height:60px;
	background-color:crimson;
	position:relative;
	padding-left:60px;
	cursor:pointer;
	transition:background-color 1s;
}
.nav h3:hover {
	background-color:red;
}
.nav h3 i {
	position:absolute;
	top:24px;
	left:30px;
	font-size:18px;
}
.nav h3 .biao {
	position:absolute;
	top:27px;
	right:30px;
	font-size:18px;
}
.nav .nav_sub li {
	height:50px;
	line-height:50px;
	text-align:center;
	background-color:brown;
	transition:background-color 1s;
	-webkit-transition:background-color 1s;
	cursor:pointer;
}
.nav .nav_sub li:hover {
	background-color:red;
}

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

垂直手风琴折叠菜单(原创)

更新时间:2020-12-20 22:31:06

灵活运用,方便修改样式,加入了css3动画,有耳目一新的感觉

0