css实现炫酷折叠手风琴菜单展开效果代码-html代码-BFW代码库

css实现炫酷折叠手风琴菜单展开效果代码

代码语言：html

代码描述：css实现炫酷折叠手风琴菜单展开效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
	margin:0;
	padding:0;
	font-family:'lato';
	list-style:none;
	text-decoration:none;
}
body {
	background-color:#fcdc29;
}
.wrapper {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.mainMenu {
	width:250px;
	display:block;
	border-radius:10px;
	overflow:hidden;
}
.item {
	border-top:1px solid #ef584a;
	overflow:hidden;
}
.btn {
	display:block;
	padding:15px 20px;
	background-color:#ff6f61;
	color:#fff;
	position:relative;
}
.btn:before {
	content:'';
	position:absolute;
	width:0;
	height:0;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-top:10px solid #ff6f61;
	right:15px;
	bottom:-10px;
	z-index:9;
}
.btn i {
	margin-right:10px;
}
.subMenu {
	background:#273057;
	overflow:hidden;
	transition:max-height 0.7s;
	max-height:0;
}
.subMenu a {
	display:block;
	padding:15px 20px;
	color:#fff;
	font-size:14px;
	border-bottom:1px solid #394c7f;
	position:relative;
}
.subMenu a:before {
	content:'';
	opacity:0;
	transition:opacity 0.3s;
}
.subMenu a:hover:before {
	content:'';
	position:absolute;
	height:0;
	width:6px;
	left:0;
	top:0;
	opacity:1;
	/* background-color:#d8d824;
	*/    border-top:24px solid transparent;
	border-left:11px solid #fcdc29;
	border-bottom:24px solid transparent;
}
.subMenu a:after {
	content:'';
	opacity:0;
	transition:opacity 0.3s;
}
.subMenu a:hover:after {
	content:'';
	position:absolute;
	height:0;
	width:6px;
	right:0px;
	top:0;
	opacity:1;
	/* background-color:#d8d824;
	*/    border-top:24px solid transparent;
	border-right:11px solid #fcdc29;
	border-bottom:24px solid transparent;
}
.subMenu a:hover {
	background:#273057;
	background:-moz-linear-gradient(top,#273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
	background:-webkit-linear-gradient(top,#273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
	background:linear-gradient(to bottom,#273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#273057',endColorstr='#394c7f.........完整代码请登录后点击上方下载按钮下载查看