詳細講解請訂閱六角學院的教材，以下只放畫面和原始碼：
PC版面：
Mobile版面：
HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/all.css"> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/all.js"></script> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <div class="wrap"> <div class="header"> <div class="logo"></div> <ul class="menu"> <li><a href="#">選單一</a></li> <li><a href="#">選單二</a></li> <li><a href="#">選單三</a></li> <li><a href="#">選單四</a></li> <li><a href="#">選單五</a></li> <li><a href="#" target="_blank">選單六</a></li> <li><a href="#">選單七</a></li> </ul> <a href="#" class="showmenu">menu</a> </div> <div class="content"> <p> 其際出後心術者，風高動；自觀民發富面大年了夜使開懷布，福大會士是全：軍傷子頭新：已起職別客晚方好沒感她是預學。能的陽話經是他麼行五河進計分學嗎都了王創想？片始現化主反過家你與；顯理所名角車下化當影城士有：展很進全色獨水久人，式著斷給，海希手林心立軍、運取早集在港家外隊平有青，們得打形心的了以城為不即小去型，力的道……因不上字失起要易國助可和個觀高的又春非雄只法年個字。有是只我上都道化體、旅黨小綠天洲領般，一任標綠來起，制試安一國……視對與喜名度說，你的不這修配輕！ </p> <p> 一笑馬臺動，一越曾間持青排的爭為但道性。住出子。了這等呢組羅我；更記好。價了望要最，文上老類電來近雄好是電帶也生理不，產在各器解是西小不理再統老以的；預操和來愛月企什較大其來來下了，對師同，在成程舉我？ </p> <p> 望樣斯溫園長，體是確所。在白管，快樹員義油方係係？操那中還一。期之加個然少去說身會草，跑比向女孩情業王多，向以不音人不個向，想加山轉時：師小級觀？發過這重同書，跟試場消麼裡外什所影在名就檢特藥去表談同電聞期不題之。 </p> </div> </div> </body> </html>
css code:
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body{ background: #0F222B; color: #69CA62; } a{ color: #69CA62; text-decoration: none; } .wrap{ max-width: 960px; margin: 0 auto; } .header{ height: 80px; border-bottom: 1px solid #69CA62; position: relative; } .logo{ float: left; width: 50px; height: 50px; background: #69CA62; border: 3px solid green; } .menu{ float: right; } .menu li{ float: left; } .menu li a{ display: block; color: #69CA62; padding: 1em; text-decoration: none; } .content{ padding: 1em; line-height: 1.8; } .content p{ margin-bottom: 1em; } /*在PC上隱藏漢堡選單*/ .showmenu{ display: none; } @media (max-width: 767px){ .menu { /*隱藏選單開始*/ max-height: 0px; overflow: hidden; /*隱藏選單結束*/ transition: max-height 2.3s; margin-top: 1px; /*絕對定位疊在網頁上*/ position: absolute; z-index: 100; /*header 80px+1px boder 線條*/ top: 81px; left: 0; right: 0; background: #0F222B; } .menu li{ float: none; border-bottom: 1px dashed #69CA62; } .menu li a{ transition: all 0.3s; } .menu li a:hover{ background: #69CA62; color: #fff; } .showmenu{ display: block; float: right; margin: 1em; } /*jQ點擊後動態在 body 加上 class */ .menu-show .menu{ max-height: 500px } }
js code:
$(document).ready(function() { $('.showmenu').on('click', function(e){ e.preventDefault(); $('body').toggleClass('menu-show'); }); });
