效果图
1.html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css" rel="external nofollow" >
<link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body>
<div class="htmleaf-container">
<div id="wrapper">
<!-- 菜单 -->
<div class="menu">
<img id="menu-bg" src="/UploadFiles/2021-04-02/golden-gate-lights.jpg">
2.css部分
/*basic*/
@import "https://fonts.googleapis.com/css";
@font-face {
font-family:icomoon;
src:url(../fonts/icomoon.eot" icon-"] {
font-family:icomoon;
speak:none;
font-style:normal;
font-weight:400;
font-variant:normal;
text-transform:none;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
body,html {
font-size:100%;
padding:0;
margin:0
}
*,*:after,*:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.clearfix:before,.clearfix:after {
content:" ";
display:table
}
.clearfix:after {
clear:both
}
body {
background:#f9f7f6;
color:#404d5b;
font-weight:500;
font-size:1.05em;
font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif
}
a {
color:#2fa0ec;
text-decoration:none;
outline:none
}
a:hover,a:focus {
color:#74777b
}
.htmleaf-container {
margin:0 auto;
text-align:center;
overflow:hidden
}
.htmleaf-content {
font-size:150%;
padding:1em 0
}
.htmleaf-content h2 {
margin:0 0 2em;
opacity:.1
}
.htmleaf-content p {
margin:1em 0;
padding:5em 0 0;
font-size:.65em
}
.bgcolor-1 {
background:#f0efee
}
.bgcolor-2 {
background:#f9f9f9
}
.bgcolor-3 {
background:#e8e8e8
}
.bgcolor-4 {
background:#2f3238;
color:#fff
}
.bgcolor-5 {
background:#df6659;
color:#521e18
}
.bgcolor-6 {
background:#2fa8ec
}
.bgcolor-7 {
background:#d0d6d6
}
.bgcolor-8 {
background:#3d4444;
color:#fff
}
.bgcolor-9 {
background:#ef3f52;
color:#fff
}
.bgcolor-10 {
background:#64448f;
color:#fff
}
.bgcolor-11 {
background:#3755ad;
color:#fff
}
.bgcolor-12 {
background:#3498db;
color:#fff
}
.htmleaf-header {
padding:1em 190px;
letter-spacing:-1px;
text-align:center
}
.htmleaf-header h1 {
color:#fff;
font-weight:600;
font-size:2em;
line-height:1;
margin-bottom:0;
font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif
}
.htmleaf-header h1 span {
font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif;
display:block;
font-size:60%;
font-weight:400;
padding:.8em 0 .5em;
color:#c3c8cd
}
.htmleaf-demo a {
color:#1d7db1;
text-decoration:none
}
.htmleaf-demo {
width:100%;
padding-bottom:1.2em
}
.htmleaf-demo a {
display:inline-block;
margin:.5em;
padding:.6em 1em;
border:3px solid #1d7db1;
font-weight:700
}
.htmleaf-demo a:hover {
opacity:.6
}
.htmleaf-demo a.current {
background:#1d7db1;
color:#fff
}
.htmleaf-links {
position:relative;
display:inline-block;
white-space:nowrap;
font-size:1.5em;
text-align:center
}
.htmleaf-links::after {
position:absolute;
top:0;
left:50%;
margin-left:-1px;
width:2px;
height:100%;
background:#dbdbdb;
content:'';
-webkit-transform:rotate3d(0,0,1,22.5deg);
transform:rotate3d(0,0,1,22.5deg)
}
.htmleaf-icon {
display:inline-block;
margin:.5em;
padding:0 0;
width:1.5em;
text-decoration:none
}
.htmleaf-icon span {
display:none
}
.htmleaf-icon:before {
margin:0 5px;
text-transform:none;
font-weight:400;
font-style:normal;
font-variant:normal;
font-family:icomoon;
line-height:1;
speak:none;
-webkit-font-smoothing:antialiased
}
.htmleaf-footer {
width:100%;
padding-top:10px
}
.htmleaf-small {
font-size:.8em
}
.center {
text-align:center
}
.related {
position:absolute;
top:100%;
left:0;
width:100%;
color:#fff;
background:#333;
text-align:center;
font-size:1.25em;
padding:.5em 0;
overflow:hidden
}
.related>a {
vertical-align:top;
width:calc(100% - 20px);
max-width:340px;
display:inline-block;
text-align:center;
margin:20px 10px;
padding:25px;
font-family:segoe ui,lucida grande,Helvetica,Arial,microsoft yahei,FreeSans,Arimo,droid sans,wenquanyi micro hei,hiragino sans gb,hiragino sans gb w3,fontawesome,sans-serif
}
.related a {
display:inline-block;
text-align:left;
margin:20px auto;
padding:10px 20px;
opacity:.8;
-webkit-transition:opacity .3s;
transition:opacity .3s;
-webkit-backface-visibility:hidden
}
.related a:hover,.related a:active {
opacity:1
}
.related a img {
max-width:100%;
opacity:.8;
border-radius:4px
}
.related a:hover img,.related a:active img {
opacity:1
}
.related h3 {
font-family:microsoft yahei,sans-serif
}
.related a h3 {
font-weight:300;
margin-top:.15em;
color:#fff
}
.icon-htmleaf-home-outline:before {
content:"\e5000"
}
.icon-htmleaf-arrow-forward-outline:before {
content:"\e5001"
}
@media screen and (max-width:50em) {
.htmleaf-header {
padding:3em 10% 4em
}
.htmleaf-header h1 {
font-size:2em
}
}@media screen and (max-width:40em) {
.htmleaf-header h1 {
font-size:1.5em
}
}@media screen and (max-width:30em) {
.htmleaf-header h1 {
font-size:1.2em
}
}
/*demo1*/
* {
margin:0;
padding:0
}
body {
background:#383c55;
width:100%;
height:100%;
font:12px open sans,sans-serif
}
#wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background: #111;
}
div.screen {
width: 100%;
height: 100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
background:#31558a;
-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);
-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);
-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);
-o-transition:all 500ms cubic-bezier(0,.995,.99,1);
transition:all 500ms cubic-bezier(0,.995,.99,1)
}
div.screen.animate {
left:80%;
-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);
-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);
-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);
-o-transition:all 500ms cubic-bezier(0,.995,.99,1);
transition:all 500ms cubic-bezier(0,.995,.99,1)
}
.list {
margin-top: 100px;
text-align: left;
}
.item {
height: 328px;
padding-left: 182px;
clear: both;
}
.item .img,.item span {
background:#214273;
border-radius:3px
}
.item .img {
float: left;
width: 200px;
height: 200px;
margin-left: -93px;
}
.item span {
height: 30px;
width: 62%;
margin-bottom: 48px;
margin-left: 9%;
float: left;
}
.item span:nth-of-type(3) {
width:75px;
margin-botom:0
}
div.burger {
height: 100px;
width: 100px;
position: absolute;
top: 11px;
left: 50px;
cursor: pointer;
}
div.x,div.y,div.z {
position:absolute;
margin:auto;
top:0;
bottom:0;
background:#fff;
border-radius:2px;
-webkit-transition:all 200ms ease-out;
-moz-transition:all 200ms ease-out;
-ms-transition:all 200ms ease-out;
-o-transition:all 200ms ease-out;
transition:all 200ms ease-out
}
div.x,div.y,div.z {
height: 10px;
width: 60px;
-webkit-transition:all 100ms ease-out;
-moz-transition:all 100ms ease-out;
-ms-transition:all 100ms ease-out;
-o-transition:all 100ms ease-out;
transition:all 100ms ease-out
}
div.y.squize {
width:0;
-webkit-transition:all 100ms ease-out;
-moz-transition:all 100ms ease-out;
-ms-transition:all 100ms ease-out;
-o-transition:all 100ms ease-out;
transition:all 100ms ease-out
}
div.y {
top:39px;
}
div.z {
top:80px;
}
div.open div.x,div.open div.z {
top:19px;
-webkit-transition:all 70ms ease-out;
-moz-transition:all 70ms ease-out;
-ms-transition:all 70ms ease-out;
-o-transition:all 70ms ease-out;
transition:all 70ms ease-out
}
div.rotate30 {
-ms-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
transform:rotate(30deg);
-webkit-transition:all 70ms ease-out;
-moz-transition:all 70ms ease-out;
-ms-transition:all 70ms ease-out;
-o-transition:all 70ms ease-out;
transition:all 70ms ease-out
}
div.rotate150 {
-ms-transform:rotate(150deg);
-webkit-transform:rotate(150deg);
transform:rotate(150deg);
-webkit-transition:all 70ms ease-out;
-moz-transition:all 70ms ease-out;
-ms-transition:all 70ms ease-out;
-o-transition:all 70ms ease-out;
transition:all 70ms ease-out
}
div.rotate45 {
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transition:all 100ms ease-out;
-moz-transition:all 100ms ease-out;
-ms-transition:all 100ms ease-out;
-o-transition:all 100ms ease-out;
transition:all 100ms ease-out
}
div.rotate135 {
-ms-transform:rotate(135deg);
-webkit-transform:rotate(135deg);
transform:rotate(135deg);
-webkit-transition:all 100ms ease-out;
-moz-transition:all 100ms ease-out;
-ms-transition:all 100ms ease-out;
-o-transition:all 100ms ease-out;
transition:all 100ms ease-out
}
div.navbar {
height:200px;
background:#385e97
}
div.menu {
height:568px;
width:320px;
margin-left:-190px;
opacity:0;
position:relative;
-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);
-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);
-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);
-o-transition:all 500ms cubic-bezier(0,.995,.99,1);
transition:all 500ms cubic-bezier(0,.995,.99,1)
}
#menu-bg {
position:absolute;
left:-10px;
top:-120px;
opacity:.3;
-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);
-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);
-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);
-o-transition:all 500ms cubic-bezier(0,.995,.99,1);
transition:all 500ms cubic-bezier(0,.995,.99,1)
}
div.menu.animate #menu-bg {
width: 350%;
left: -143px;
-webkit-transition:all 500ms cubic-bezier(0,.995,.99,1);
-moz-transition:all 500ms cubic-bezier(0,.995,.99,1);
-ms-transition:all 500ms cubic-bezier(0,.995,.99,1);
-o-transition:all 500ms cubic-bezier(0,.995,.99,1);
transition:all 500ms cubic-bezier(0,.995,.99,1)
}
div.menu.animate {
width:100%;
margin-left: -110px;
opacity: 1;
-webkit-transition: all 500ms cubic-bezier(0,.995,.99,1);
-moz-transition: all 500ms cubic-bezier(0,.995,.99,1);
-ms-transition: all 500ms cubic-bezier(0,.995,.99,1);
-o-transition: all 500ms cubic-bezier(0,.995,.99,1);
transition: all 500ms cubic-bezier(0,.995,.99,1);
}
div.menu ul {
position: relative;
padding-top: 200px;
}
div.menu ul li {
list-style: none;
width: 100%;
margin-top: 120px;
text-align: left;
padding-left: 300px;
font-size: 50px;
}
div.menu ul li a {
color:#fff;
text-decoration:none;
letter-spacing:1px
}
div.menu.animate ul li {
margin-left: 80px;
-webkit-transition:all 800ms cubic-bezier(0,.995,.99,1);
-moz-transition:all 800ms cubic-bezier(0,.995,.99,1);
-ms-transition:all 800ms cubic-bezier(0,.995,.99,1);
-o-transition:all 800ms cubic-bezier(0,.995,.99,1);
transition:all 800ms cubic-bezier(0,.995,.99,1)
}
div.menu.animate li:nth-of-type(1) {
transition-delay:0s
}
div.menu.animate li:nth-of-type(2) {
transition-delay:.06s
}
div.menu.animate li:nth-of-type(3) {
transition-delay:.12s
}
div.menu.animate li:nth-of-type(4) {
transition-delay:.18s
}
div.menu.animate li:nth-of-type(5) {
transition-delay:.24s
}
3.JS部分
$(document).ready(function() {
if ('ontouchstart' in window) {
var click = 'touchstart';
} else {
var click = 'click';
}
$('div.burger').on(click, function () {
if (!$(this).hasClass('open')) {
openMenu();
} else {
closeMenu();
}
});
$('div.menu ul li a').on(click, function (e) {
e.preventDefault();
closeMenu();
});
function openMenu() {
$('div.burger').addClass('open');
$('div.y').fadeOut(100);
$('div.screen').addClass('animate');
setTimeout(function () {
$('div.x').addClass('rotate30');
$('div.z').addClass('rotate150');
$('.menu').addClass('animate');
setTimeout(function () {
$('div.x').addClass('rotate45');
$('div.z').addClass('rotate135');
}, 100);
}, 10);
}
function closeMenu() {
$('div.screen, .menu').removeClass('animate');
$('div.y').fadeIn(150);
$('div.burger').removeClass('open');
$('div.x').removeClass('rotate45').addClass('rotate30');
$('div.z').removeClass('rotate135').addClass('rotate150');
setTimeout(function () {
$('div.x').removeClass('rotate30');
$('div.z').removeClass('rotate150');
}, 50);
setTimeout(function () {
$('div.x, div.z').removeClass('collapse');
}, 70);
}
});
以上就是JS实现移动端可折叠导航菜单（现代都市风）的详细内容，更多关于JS实现折叠导航菜单的资料请关注其它相关文章！