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
















网友评论0