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.........完整代码请登录后点击上方下载按钮下载查看