RWD 汉堡选单练习 toggleClass

这次的汉堡选单练习，是要让选单在手机页面时加上 JS，让选单有互动的效果，

所以需要了解一点 jQuery 的运作方式，可以去找一下相关资料，或许可以也可以来这边看一下课程

首先我们要先载入 jQuery 的程式码与压缩档，
可以到 jQuery 网页上下载，找到 Download the compressed, production jQuery 3.4.1 点选另存连结(如下图)

就可以下载到电脑，在汉堡选单的资料夹中，开立一个新的资料夹，名称设定为 js，
(如下图)

把这个存下来的连结放在里面，并且在编辑器中在新增一个 all.js，等等 jQurey 所写的编译的内容就会在这次的汉堡选单专案中执行啰~~

这次 HTML 上有一点更动，请见下方程式码
首先要在 head 里面加上 script 标籤，导入 jQuery 的压缩档，如下方

   <script src="js/jquery-3.4.1.min.js"></script>    <script src="js/all.js"></script>

这次在 HTML 中有新增加一个 class 名称，

<ul class="menu burgar_btn"> (新增 class)            <li><a href="#">选项</a></li>            <li><a href="#">选项</a></li>            <li><a href="#">选项</a></li>            <li><a href="#">选项</a></li>            <!-- class 加上 burgar_btn 让在载具时，可以点选    -->        </ul>        <a href="#" class="cartBtn"> <i class="fas fa-shopping-cart">购物车</i></a>                <a href="#" class="burgar_btn">            <i class="fas fa-bars"></i>        </a>        <!-- 汉堡选单使用-->

SCSS 增加在menu这个 class 比较多，如下方程式码

.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 {        // 在 pad 尺寸中执行以下内容        max-height: 0px;        // 隐藏选单高度        overflow: hidden;        // 在 pad 上隐藏选单        transition: max-height 1.5s;        // 选单下拉时的时间        position: absolute;        z-index: 100;        top: 53px;        left: 0;        right: 0;        // 用绝对定位在 header 的 menu 上面        // 因为 header 的高度为 50px，下方线条为 3px，所以要超过 50px 的高度        // 左右推开变成满版        background: #06232e;        // 使用背景色才不会突兀        li {            float: none;            // 让选单的 float 移除            border-bottom: 1px dashed $primary-color;            // 使用 dashed 虚线            a {                display: block;                // 在载具中佔满空间                transition: all 0.3s;                // 滑过去的时候有秒差效果                text-align: center;                // 让文字置中                               &:hover {                    background: $primary-color;                    color: #06232e;                }            }        }    }}.burgar_btn-show .burgar_btn {    max-height: 500px;}// JS 点击后会在 body 产生新的 Class 名称

最重要的是这一个部分的 SCSS

汉堡选单这边设定，是在 PC 萤幕底下不要显示 fontawesome 的图示，并不是 class 本身，
这边我之前搞错，结果变成选单在 PC 萤幕底下也无法显示，
也因为再 HTML 里面有设定两个 class 名称， <ul class="menu burgar_btn"> ，
所以如果也在这边写上效果，会影响 PC 时的呈现喔~!!

.burgar_btn {    .fa-bars {        display: none;        // PC 时不显示    }    @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 萤幕解析度以下显示汉堡选单          }    }}

这样汉堡选单在 pad 尺寸以下就可以有这样的效果啰~

可以看一下 codepen ，玩一下效果
https://codepen.io/hnzxewqw/pen/QWWGdmR