JS实现移动端可折叠导航菜单（现代都市风）

    
 
 
 
 
About
Share
Activity
Settings
Contact
 
 
 
 
 
 
 

 /*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 }

 $(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); } });