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 .section input[type='radio']:checked ~ .content {
	padding:15px
}
ul {
	width:100%;
	padding:0;
	margin:0;
	list-style:none
}
ul li {
	padding:10px
}
ul li i {
	font-size:13px;
	width:15px;
	margin-right:15px
}
ul li:hover {
	cursor:pointer
}
ul li:hover i {
	color:#21CCFC
}
.logo {
	padding:30px 10px;
	width:200px;
	text-align:center;
	color:#FFF;
	font-size:20px
}
.logo i {
	font-size:70px;
	color:#21CCFC
}

</style>
</head>

<body>

    <div class="left-menu">
        <div class="logo"><i class="fa fa-align-justify"></i>
            <div>Accordion Nav</div>
        </div>
        <div class="accordion">
            <div class="section"><input type="radio" name="accordion-1" id="section-1" checked="checked"><label for="section-1"><span>Messages</span></label>
                <div class="content">
                    <ul>
                        .........完整代码请登录后点击上方下载按钮下载查看