JS实现移动端可折叠导航菜单的方法

2025-01-07 技术教程

小编给大家分享一下JS实现移动端可折叠导航菜单的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

效果图

1.html部分

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" 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 h3 { 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 h2 { 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 h2 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 h4 { font-family:microsoft yahei,sans-serif}.related a h4 { 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 h2 { font-size:2em}}@media screen and (max-width:40em) { .htmleaf-header h2 { font-size:1.5em}}@media screen and (max-width:30em) { .htmleaf-header h2 { 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实现移动端可折叠导航菜单的方法有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！