JS實現(xiàn)移動端可折疊導(dǎo)航菜單（現(xiàn)代都市風(fēng)）
更新時間：2020年07月07日 11:24:10 作者：陳鶯鶯呀
這篇文章主要介紹了JS如何實現(xiàn)移動端可折疊導(dǎo)航菜單，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
效果圖
1.html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" 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="images/golden-gate-lights.jpg" />
<ul>
<li><a href="">About</a></li>
<li><a href="">Share</a></li>
<li><a href="">Activity</a></li>
<li><a href="">Settings</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="screen">
<div class="navbar"></div>
<div class="list">
<div class="item">
<div class="img"></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="item">
<div class="img"></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="item">
<div class="img"></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="item">
<div class="img"></div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="burger">
<div class="x"></div>
<div class="y"></div>
<div class="z"></div>
</div>
</div>
</div>
</div>
<script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
<script src='js/script.js'></script>
</body>
</html>
2.css部分
/*basic*/
@import "https://fonts.googleapis.com/css?family=Raleway:200,500,700,800";
@font-face {
font-family:icomoon;
src:url(../fonts/icomoon.eot?rretjt);
src:url(../fonts/icomoon.eot?#iefixrretjt) format('embedded-opentype'),
url(../fonts/icomoon.woff?rretjt) format('woff'),
url(../fonts/icomoon.ttf?rretjt) format('truetype'),
url(../fonts/icomoon.svg?rretjt#icomoon) format('svg');
font-weight:400;
font-style:normal
}
[class^=icon-],[class*=" 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實現(xiàn)移動端可折疊導(dǎo)航菜單（現(xiàn)代都市風(fēng)）的詳細(xì)內(nèi)容，更多關(guān)于JS實現(xiàn)折疊導(dǎo)航菜單的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript實現(xiàn)div的鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)div的鼠標(biāo)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
js獲取單選按鈕的數(shù)據(jù)...2006-11-11
本文主要介紹了JavaScript嚴(yán)格模式的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了微信網(wǎng)頁授權(quán)并獲取用戶信息的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
本篇文章主要是對js確認(rèn)刪除對話框效果的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
uni-app是一個使用vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)知識點掌握以及面試題整理的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了js面向?qū)ο笾畬崿F(xiàn)淘寶放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
js為快捷鍵綁定事件，當(dāng)按這個快捷鍵時就會觸發(fā)事先綁定處理函數(shù)，下面以ctrl+k為例與大家分享下具體的實現(xiàn)代碼2014-09-09
JavaScript常用進(jìn)制轉(zhuǎn)換及位運算實例解析
這篇文章主要介紹了JavaScript常用進(jìn)制轉(zhuǎn)換及位運算實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
腳本控制自適應(yīng)高度的縮短問題...2007-10-10