这次来练习响应式网站很常见到的汉堡选单

但汉堡选单要写的内容有点长，就分段来记录一下这个过程。

这次要显示的内容如下图

如果在 pad 尺寸显示会如下

要注意如果要写 RWD 一定要写入下方这行程式码，这样才能够正确显示 RWD 画面，会自适应在各类载具上。

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML

HTML 结构如下，应该满好懂，这边就不做多的注解，
但有个地方注意一下，就是 ul li 的后面有多一行 a 连结，这个就是 汉堡选单 最重要的地方，
也就是说汉堡选单的出现市另外设定的，而汉堡选单的图示，是从 fontawesome 取得。

<div class="header">    <div class="container">        <h1 class="logo">            <a href="#">LOGO</a>        </h1>        <ul class="menu">            <li><a href="#">选项</a></li>            <li><a href="#">选项</a></li>            <li><a href="#">选项</a></li>            <li><a href="#">选项</a></li>        </ul>                <a href="#" class="burgar_btn">            <i class="fas fa-bars"></i>        </a>    </div></div><div class="content">    <div class="container">        <h2>领先传说简直一定观。</h2>        <p>转帖高兴人生毫不节目民间财务允许关闭指导理由声音，后面滑鼠卫生发达检测启动信誉篇文章电源天气，大型死了形象你的并没有路线家伙兴趣先生遇到总体不对带来楼上，对不起超市超过全体，小组我的心试验下去曝光功能地球几年，游戏根据中文突破该公司专用警察创建什么事模组。        </p>        <h2>领先传说简直一定观。</h2>        <p>转帖高兴人生毫不节目民间财务允许关闭指导理由声音，后面滑鼠卫生发达检测启动信誉篇文章电源天气，大型死了形象你的并没有路线家伙兴趣先生遇到总体不对带来楼上，对不起超市超过全体，小组我的心试验下去曝光功能地球几年，游戏根据中文突破该公司专用警察创建什么事模组。        </p>        <h2>领先传说简直一定观。</h2>        <p>转帖高兴人生毫不节目民间财务允许关闭指导理由声音，后面滑鼠卫生发达检测启动信誉篇文章电源天气，大型死了形象你的并没有路线家伙兴趣先生遇到总体不对带来楼上，对不起超市超过全体，小组我的心试验下去曝光功能地球几年，游戏根据中文突破该公司专用警察创建什么事模组。        </p>        <h2>领先传说简直一定观。</h2>        <p>转帖高兴人生毫不节目民间财务允许关闭指导理由声音，后面滑鼠卫生发达检测启动信誉篇文章电源天气，大型死了形象你的并没有路线家伙兴趣先生遇到总体不对带来楼上，对不起超市超过全体，小组我的心试验下去曝光功能地球几年，游戏根据中文突破该公司专用警察创建什么事模组。        </p>    </div></div>

SCSS

重头戏就是 CSS 了，因为目前我都是在用 SCSS 练习 (用了就回不去了)，写了一些全域的设定，这样其他内容就不用再重複写了

@import "reset";@import "boxsizing";@import "media";@import "texthide";@import "fontsize";// 变数设定$primary-color:#03ac87;a {    text-decoration: none;    color: $primary-color;}body {    background: #06232e;    font-family: 'noto Sans TC', 'sans-serif';}.container {    max-width: 960px;    // 要设定为 max-width 才能做响应式    height: auto;    margin: 0 auto;}.clearfix {    clear: both;}// 全域设定

比较複杂的在这里

.header {    height: 50px;    border-bottom: 3px solid $primary-color;    position: relative;    // header 设定成 menu 选单的相对定位父元素}.logo {    font-size: $font-l;    float: left;    margin-left: 1em;    color: $primary-color;    line-height: 50px;}.menu {    float: right;    li {        float: left;        a {            font-size: $font-m;            padding: 17px 20px;            line-height: 50px;            // 优化的内容写在 ａ 连结里面            &:hover {                background-color: $primary-color;                color: #06232e;            }            // 只要写 hover 的效果就好        }    }    @include pad {        max-height: 0px;        // 隐藏选单高度        overflow: hidden;        // 在 pad 上隐藏选单        ※这两行是让选单可以在 pad 萤幕变成隐藏选单的语法                transition: 2s;        position: absolute;        top: 51px;        left: 0;        right: 0;        // 用绝对定位在 header 的 menu 上面        // 因为 header 的高度为 50px，下方线条为 3px，所以要超过 50px 的高度        // 左右推开变成满版        background: #06232e;        ※这是让选单之后透过 JS 控制下拉选单的显示语法    }}.burgar_btn {    .fas {        display: none;    }    @include pad {        display: block;        // 在 pad 萤幕解析度以下显示        color: $primary-color;        font-size: $font-l;        float: right;        margin-right: 1em;        line-height: 50px;        .fas {            display: block;            line-height: 50px;            // 在 pad 萤幕解析度以下显示          }    }}.content {    line-height: 1.8;    font-size: $font-m;    color: $primary-color;    margin-top: 2em;    h2 {        font-size: $font-l;        font-weight: bold;        margin-left: 24px;        color: #07f7ff;    }    p {        margin-left: 24px;        padding-right: 20px;        margin-bottom: 1em;    }}

心得

手刻 RWD 需要脑袋满清楚的，透过 SCSS 编译，可以在该 class 下方编写，是比较方便管理的方式，不用特地在拉出来写，真的很方便！持续练习中...

之后会加上下拉选单跟 JS click 事件，让这次汉堡选单点击有效果
可以看一下 Codepen，玩一下效果
https://codepen.io/hnzxewqw/pen/dyyXORN