Exploring and Thinking

漢堡選單

這是六角學院老師提供的範例。主要功能為PC頁面時顯示右上方選單,Mobile頁面時隱藏起來,直至點選menu才會在下面列出選單來。

詳細講解請訂閱六角學院的教材,以下只放畫面和原始碼:

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');
  });
});
Share:

熱門文章