<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="header">
<!-- logo位置 -->
<div class="logo">
<p>logo</p>
</div>
<!-- 导航栏 -->
<div class="headerRight">
</div>
</div>
<!-- 中间内容部分 -->
<div class="center">
<!-- 左菜单 -->
<div class="leftPull">
<ul class="muiList">
<li class="mui" data-n="0">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa-adn fa-1x" aria-hidden="true"></i>
<span>菜单一</span>
</div>
<!-- 箭头 -->
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单一子菜单1</a></li>
<li><a href="#">菜单一子菜单2</a></li>
<li><a href="#">菜单一子菜单3</a></li>
<li><a href="#">菜单一子菜单4</a></li>
</ul>
</li>
<li class="mui" data-n="1">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa-address-card-o fa-1x" aria-hidden="true"></i>
<span>菜单二</span>
</div>
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单二子菜单1</a></li>
<li><a href="#">菜单二子菜单2</a></li>
<li><a href="#">菜单二子菜单3</a></li>
<li><a href="#">菜单二子菜单4</a></li>
</ul>
</li>
<li class="mui" data-n="2">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa-cloud-upload fa-1x" aria-hidden="true"></i>
<span>菜单三</span>
</div>
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单三子菜单1</a></li>
<li><a href="#">菜单三子菜单2</a></li>
<li><a href="#">菜单三子菜单3</a></li>
<li><a href="#">菜单三子菜单4</a></li>
</ul>
</li>
<li class="mui" data-n="3">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa-creative-commons fa-1x" aria-hidden="true"></i>
<span>菜单四</span>
</div>
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单四子菜单1</a></li>
<li><a href="#">菜单四子菜单2</a></li>
<li><a href="#">菜单四子菜单3</a></li>
<li><a href="#">菜单四子菜单4</a></li>
</ul>
</li>
<li class="mui" data-n="4">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa fa-university fa-1x" aria-hidden="true"></i>
<span>菜单五</span>
</div>
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单五子菜单1</a></li>
<li><a href="#">菜单五子菜单2</a></li>
<li><a href="#">菜单五子菜单3</a></li>
<li><a href="#">菜单五子菜单4</a></li>
</ul>
</li>
<li class="mui" data-n="5">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa fa-paw fa-1x" aria-hidden="true"></i>
<span>菜单六</span>
</div>
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单六子菜单1</a></li>
<li><a href="#">菜单六子菜单2</a></li>
<li><a href="#">菜单六子菜单3</a></li>
<li><a href="#">菜单六子菜单4</a></li>
</ul>
</li>
<li class="mui" data-n="6">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa-pie-chart fa-1x" aria-hidden="true"></i>
<span>菜单七</span>
</div>
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单七子菜单1</a></li>
<li><a href="#">菜单七子菜单2</a></li>
<li><a href="#">菜单七子菜单3</a></li>
<li><a href="#">菜单七子菜单4</a></li>
</ul>
</li>
<li class="mui" data-n="7">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa-pie-chart fa-1x" aria-hidden="true"></i>
<span>菜单八</span>
</div>
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单八子菜单1</a></li>
<li><a href="#">菜单八子菜单2</a></li>
<li><a href="#">菜单八子菜单3</a></li>
<li><a href="#">菜单八子菜单4</a></li>
</ul>
</li>
<li class="mui" data-n="8">
<ul class="mui-title">
<div class="mui_left">
<i class="fa fa-codepen fa-1x" aria-hidden="true"></i>
<span>菜单九</span>
</div>
<div class="mui_right">
<i class="fa fa-angle-right dropdown" aria-hidden="true"></i>
</div>
</ul>
<ul class="submenu">
<li><a href="#">菜单九子菜单1</a></li>
<li><a href="#">菜单九子菜单2</a></li>
<li><a href="#">菜单九子菜单3</a></li>
<li><a href="#">菜单九子菜单4</a></li>
</ul>
</li>
</ul>
</div>
<!-- 右内容区 -->
<div class="rightContent">
</div>
</div>
<div class="bottom">
</div>
<script src="./js/demo.js"></script>
<!-- <script src="./js/shell.js"></script> -->
<!-- <script src="./js/Jq.js"></script> -->
</body>
</html>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
/* 头部 */
.header {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
}
.header .logo{
width: 15%;
color: #e0deded6;
font-size: 30px;
line-height: 60px;
text-align: center;
background-color: #2b2b2bd6;
}
.header .headerRight{
width: 85%;
height: 100%;
background-color: #2b2b2bd6;
}
/* 中间部分 */
.center {
width: 100%;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.center .leftPull {
width: 14%;
height: 100%;
overflow: hidden;
}
.center .leftPull ul {
width: 100%;
width: -webkit-fill-available;
height: 100%;
}
.center .leftPull ul .mui {
color: #e7e7e7;
line-height: 30px;
z-index: 9999;
opacity: 1;
background-color: #060606a3;
}
.center .leftPull ul .mui .mui-title{
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #a8a8a8a8;
}
.center .leftPull ul .mui .mui-title .mui_left{
margin-left: 20px;
}
.center .leftPull ul .mui .mui-title .mui_right{
margin-right: 20px;
}
.center .leftPull ul .mui .submenu{
cursor: pointer;
background-color: #676c6f;
animation: soft 1s;
}
.dropdown-list{
transform: rotate(90deg);
}
.dropdown:not(".dropdown-list"){
transform: rotate(00deg);
}
@keyframes soft{
from{
height: 0px;
}
to{
transition: 1s;
height: 172px;
}
}
.center .leftPull ul .mui .submenu:not(.list){
display: none;
}
.center .leftPull ul .mui .submenu li{
padding: 6px 0px;
border-bottom: 1px solid #a8a8a8a8;
}
.center .leftPull ul .mui .submenu li a{
color: #fff;
padding: 0 0 0px 50px;
}
.center .leftPull ul .mui .submenu li:hover{
background-color: #4645426b;
}
.center .leftPull ul .mui .mui-title:hover {
transition: all 0.3s ease;
background-color: #e0365d;
cursor: pointer;
}
.center .leftPull ul .mui span {
margin-left: 10px;
}
@media screen and (max-width: 1396px) and (min-width: 1024px) {
.center .leftPull{
width: 20%;
transition: all 0.6s ease;
}
}
@media screen and (max-width: 878px) and (min-width: 512px) {
.center .leftPull{
width: 40%;
transition: all 0.6s ease;
}
}
@media screen and (max-width: 512px) and (min-width: 307px) {
.center .leftPull{
width: 90%;
transition: all 0.6s ease;
}
.center .leftPull ul .mui .submenu li a{
padding: 0 0 0px 35px;
}
}
.center .rightContent {
width: 88%;
height: 100%;
background-color: lightskyblue;
}
/* 底部 */
.bottom {
height: 100px;
width: 100%;
background-color: bisque;
}
/* 获取全部li */
let muiMenu = document.querySelectorAll(".mui")
/* 获取所有箭头*/
let dropdown = document.querySelectorAll(".dropdown")
/* 子菜单 */
let submenu = document.querySelectorAll(".submenu")
/* ul */
let muiListMenu = document.querySelector(".muiList")
var index = 0;
muiMenu.forEach((item, i) => {
// console.log(item)
index++;
muiMenu[i].addEventListener('click', () => {
if (index = i+1) {
rotate();
submenuList();
}
});
})
/* 箭头方向旋转 / 回正 */
function rotate() {
dropdown.forEach((item, n) => {
if (n === index-1) {
dropdown[n].style.transition = "all 0.3s ease";
dropdown[n].classList.toggle("dropdown-list");
}else {
dropdown[n].classList.remove("dropdown-list");
}
});
}
/* 子菜单显示 / 隐藏 */
function submenuList() {
submenu.forEach((item, j) => {
if (j === index-1) {
submenu[j].style.transition = "all 1s ease";
submenu[j].classList.toggle("list");
}else {
submenu[j].classList.remove("list");
}
});
}
浙公网安备 33010602011771号