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

代码语言:html

所属分类:菜单导航

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

代码标签: 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