jquery+css实现左侧侧边栏下拉多级菜单导航效果代码
代码语言：html
所属分类：菜单导航
代码描述：jquery+css实现左侧侧边栏下拉多级菜单导航效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<!--阿里图标库-->
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1632750_204xwxiwzht.css?1583918713" />
<style>
/*默认样式*/
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
html, body {
min-height: 100%;
}
body {
font-family: "Microsoft YaHei";
font-size: 0.3rem;
color: #333;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
ul, ol {
list-style: none;
}
img {
border: none;
vertical-align: middle;
}
a {
text-decoration: none;
color: #232323;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
input, textarea {
outline: none;
border: none;
}
textarea {
resize: none;
overflow: auto;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: ".";
width: 0;
height: 0;
visibility: hidden;
display: block;
clear: both;
overflow: hidden;
}
.fl {
float: left
}
.fr {
float: right
}
.tl {
text-align: left;
}
.tc {
text-align: center
}
.tr {
text-align: right;
}
.ellipse {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.inline {
display: inline-block;
*display: inline;
*zoom: 1;
}
.body_con{
width: 100%;
height: 100%;
position: relative;
font-size: 0;
}
.body_top{
width: 100%;
height: 60px;
background: #1d8ff0;
color: #fff;
font-size: 24px;
line-height: 60px;
text-align: center;
}
.body_left{
width:200px;
height: 1100px;
display: inline-block;
vertical-align: top;
background:#333951;
position: relative;
font-size: 18px;
color: #fff;
}
.body_right{
width: calc(100% - 200px);
height: 1100px;
display: inline-block;
vertical-align: top;
background:#f3faff;
font-size: 32px;
color: #999;
text-align: center;
line-height: 900px;
}
.body_left_list{
width: 100%;
min-height: 1rem;
position: relative;
}
.body_left_list >li{
width: 100%;
min-height: 1px;
overflow: hidden;
border-bottom: 1px solid #333951;
transition:all 0.5s;
max-height: 1500px;
}
.body_left_list >li >label{
width: 100%;
height: 40px;
line-height: 40px;
position: relative;
color: #fff;
font-size:16px;
background: #292e41;
display: block;
}
.body_left_list >li >label >span{
padding: 0 20px;
width: 150px;
color: #fff;
font-size:16px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.body_left_list >li >label >a{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.body_left_list >li >label >i{
position: absolute;
top: 0;
right:25px;
font-size: 11px;
}
.body_left_list >li >ul{
width: 100%;
min-height: 1px;
position: relative;
}
.body_left_list >li >ul >li{
width: 100%;
max-height: 50px;
overflow: hidden;
transition: all 0.5s;
}
.body_left_list >li >ul >li:hover{
max-height: calc(200 * 8px);
}
.body_left_list >li >ul >li >label{
width: 100%;
height: 50px;
background:#333951;
line-height: 50px;
position: relative;
transition: all 0.5s;
display: block;
}
.body_left_list >li >ul >li:hover >label{
background: #151b32;
border-left: 6px solid #1D8FF0;
}
.body_left_list >li >ul >li:hover >label >i:nth-child(3){
transform: rotate(90deg);
}
.body_left_list >li >ul >li >label >i:nth-child(1){
padding-left: 30px;
font-size: 20px;
display: inline-block;
vertical-align: top;
}
.body_left_list >li >ul >li >label >span{
font-size: 15px;
color: #a1a3ab;
width: 90px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.body_left_list >li >ul >li >label >i:nth-child(3){
position: absolute;
top: 0;
right:25px;
}
.body_left_list >li >ul >li >label >a{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.body_left_list >li >ul >li >ul{
width: 100%;
min-height: 1px;
}
.body_left_list >li >ul >li >ul >li{
max-height: 40px;
transition: all 0.5s;
overflow: hidden;
position: relative;
}
.body_left_list >li >ul >li >ul >li:hover{
max-height: calc(200 * 8px);
}
.body_left_list >li >ul >li >ul >li >label{
width: 100%;
height:40px;
background: #3a3e50;
position: relative;
line-height: 40px;
display: block;
transition: all 0.5s;
}
.body_left_list >li >ul >li >ul >li:hover >label >span{
color: #fff;
}
.body_left_list >li >ul >li >ul >li:hover ul{
display: block;
}
.body_left_list >li >ul >li >ul >li:hover >label >i{
color: #fff;
}
.body_left_list >li >ul >li >ul >li >label >span{
font-size:14px;
padding-left: 70px;
color: #a1a3ab;
width: 150px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.body_left_list >li >ul >li >ul >li >label >i{
position: absolute;
top: 0;
right:25px;
font-size: 14px;
}
.body_left_list >li >ul >li >ul >li >label >a{
width: 100%;
height: 100%;
position: absolute;
top: 2px;
left: 0;
z-index: 1;
}
.body_left_list >li >ul >li >ul >li >ul{
width: 120px;
min-height: 1px;
position: fixed;
top:0;
left: 200px;
display: none;
}
.body_left_list >li >ul >li >ul >li >ul >li{
width: 100%;
min-height: 40px;
position: relative;
transition:all 0.5s;
background: #fff;
}
.body_left_list >li >ul >li >ul >li >ul >li >label{
display: block;
position: relative;
width: 100%;
height: 30px;
}
.body_left_list >li >ul >li >ul >li >ul >li >label >span{
width: 60%;
height: 40px;
font-size: 12px;
line-height: 40px;
padding-left: 20px;
display: block;
color: #999;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition:all 0.5s;
}
.body_left_list >li >ul >li >ul >li >ul >li >label >i{
position: absolute;
top: 13px;
right:25px;
font-size: 14px;
color: #999;
}
.body_left_list >li >ul >li >ul >li >ul >li:hover >label >span{
color: #1D8FF0;
}
.body_left_list >li >ul >li >ul >li >ul >li:hover >label >i{
color: #1D8FF0;
}
.body_left_list >li >ul >li >ul >li >ul >li >label >a{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
</head>
<body>
<div class="body_con">
<div class="body_top">头部</div>
<div class="body_left">
<ul class="body_left_list">
<li>
<label>
<span>宣 传</span>
<i class="iconfont iconxiajiantou"></i>
<a href="javascript:;"></a>
</label>
<ul>
<li>
<label>
<i class="iconfont iconYYGK"></i>
<span>二级栏目1栏目1</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
<ul>
<li>
<label>
<span>三级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
<ul>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
</ul>
</li>
<li>
<label>
<span>三级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
<ul>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
</ul>
</li>
<li>
<label>
<span>三级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
</ul>
</li>
<li>
<label>
<i class="iconfont iconYYGK"></i>
<span>二级栏目2</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
<ul>
<li>
<label>
<span>三级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>三级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>三级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
<ul>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
<li>
<label>
<span>四级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
<label>
<i class="iconfont iconYYGK"></i>
<span>二级栏目3</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
<ul>
<li>
<label>
<span>三级栏目</span>
<i class="iconfont iconyoujiantou"></i>
<a href="javascript:;"></a>
</label>
<ul>
<li>
<label>
<span>四级栏目</span>
<i .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0