JS實(shí)現(xiàn)移動(dòng)端可折疊導(dǎo)航菜單(現(xiàn)代都市風(fēng))
效果圖
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實(shí)現(xiàn)移動(dòng)端可折疊導(dǎo)航菜單(現(xiàn)代都市風(fēng))的詳細(xì)內(nèi)容,更多關(guān)于JS實(shí)現(xiàn)折疊導(dǎo)航菜單的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- 利用Js+Css實(shí)現(xiàn)折紙動(dòng)態(tài)導(dǎo)航效果實(shí)例源碼
- JS+CSS實(shí)現(xiàn)鼠標(biāo)滑過(guò)時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條效果
- javascript實(shí)現(xiàn)的鼠標(biāo)懸停時(shí)動(dòng)態(tài)翻滾的導(dǎo)航條
- JS無(wú)限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法
- vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
- js實(shí)現(xiàn)水平滾動(dòng)菜單導(dǎo)航
- 原生JS實(shí)現(xiàn)導(dǎo)航下拉菜單效果
- 如何使用wheelnav.js構(gòu)建酷炫的動(dòng)態(tài)導(dǎo)航菜單
相關(guān)文章
JavaScript實(shí)現(xiàn)div的鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)div的鼠標(biāo)拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11微信網(wǎng)頁(yè)授權(quán)并獲取用戶(hù)信息的方法
這篇文章主要介紹了微信網(wǎng)頁(yè)授權(quán)并獲取用戶(hù)信息的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07js確認(rèn)刪除對(duì)話(huà)框效果的示例代碼
本篇文章主要是對(duì)js確認(rèn)刪除對(duì)話(huà)框效果的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02uniapp基礎(chǔ)知識(shí)點(diǎn)掌握以及面試題整理
uni-app是一個(gè)使用vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,開(kāi)發(fā)者編寫(xiě)一套代碼,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)知識(shí)點(diǎn)掌握以及面試題整理的相關(guān)資料,需要的朋友可以參考下2023-02-02JavaScript常用進(jìn)制轉(zhuǎn)換及位運(yùn)算實(shí)例解析
這篇文章主要介紹了JavaScript常用進(jìn)制轉(zhuǎn)換及位運(yùn)算實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10