css实现左侧多级导航菜单效果代码-html代码-BFW代码库

css实现左侧多级导航菜单效果代码

代码语言：html

代码描述：css实现左侧多级导航菜单效果代码

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

<html lang="en">

<head>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>


	.accordion {
	color:#FFF;
	width:100%
}
.accordion .section {
	width:100%
}
.accordion .section input[type='radio'] {
	display:none
}
.accordion .section input[type='radio']:checked+label {
	background:#363636
}
.accordion .section input[type='radio']:checked+label:before {
	content:" ";
	position:absolute;
	border-left:3px solid #21CCFC;
	height:100%;
	left:0
}
.accordion .section input[type='radio']:checked ~ .content {
	max-height:300px;
	opacity:1;
	z-index:10;
	overflow-y:auto
}
.accordion .section label {
	position:relative;
	cursor:pointer;
	padding:10px 20px;
	display:table;
	background:#222;
	width:100%;
	-webkit-transition:background .3s ease-in-out;
	-moz-transition:background .3s ease-in-out;
	-ms-transition:background .3s ease-in-out;
	transition:background .3s ease-in-out;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none
}
.accordion .section label:before {
	content:" ";
	width:100%;
	position:absolute;
	left:0;
	top:0;
	height:1px;
	border-top:1px solid #363636
}
.accordion .section label:hover {
	background:#363636
}
.accordion .section label span {
	display:table-cell;
	vertical-align:middle
}
.accordion .section:last-of-type {
	border-bottom:1px solid #363636
}
.accordion .section .content {
	max-height:0;
	-webkit-transition:all .4s;
	-moz-transition:all .4s;
	-ms-transition:all .4s;
	transition:all .4s;
	opacity:0;
	position:relative;
	overflow-y:hidden
}
*,*:before,*:after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box
}
body {
	background:#666;
	font-family:'Quicksand',sans-serif
}
.left-menu {
	background:#222;
	width:200px;
	position:absolute;
	top:0;
	bottom:0
}
.accordion {
	font-size:14px
}
.accordion .section .content {
	padding:0 15px
}
.accordion .section input[type='radio'] {
	display:none
}
.accordion .sect.........完整代码请登录后点击上方下载按钮下载查看