Day19-Flex属性_超简单制作导览列

今天来介绍运用CSS的flex属性，超简单制作导览列
预想是
电脑版左边有LOGO，右边有nav选单
手机板左边是LOGO，右边会出现汉堡选单的图样，点击後拉开隐藏的nav选单

首先我们先在HTML中加入nav跟一点点内容

<nav>
    <div class="left">
        <div class="logo">LOGO</div>
        <div class="menu-item"  id="ham">
            <i class=" fas fa-bars"></i>
        </div>
    </div>
    <ul class="menu-btn">
        <li>
            <a href="">AA</a>
        </li>
        <li>
            <a href="">BB</a>
        </li>
        <li>
            <a href="">CC</a>
        </li>
    </ul>
</nav>
<div>
    <h1>内容</h1>
</div>

还未放入CSS时长这样

然後我们帮他加上CSS
把li跟连结的样式拔掉，设置汉堡图样隐藏

nav {
    min-height: 40px;
    background-color: cadetblue;
    color: white;
    font-size: 24px;
    padding: 5px;
}

.menu-item {
    display: none;
}

li {
    list-style: none;
    padding: 0 10px;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: white;
}

然後运用CSS的宽度语法，设置当宽度小於320时汉堡图样显示，menu-btn隐藏

@media only screen and (min-width: 0px) and (max-width: 320px) {
    .menu-item {
        display: block;
    }
    .menu-btn {
        display: none;
    }
}

然後我们要设置神奇的flex语法
设下去後便能轻松让nav在电脑版呈现横的排列，手机板呈现直的排列

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-btn {
    display: flex;
}

flex预设为横向排列，设置flex的区块内的东西会被整齐的横向排列
我另外设置了
justify-content: space-between;
align-items: center;
是要让里面的东西照我期望的排版去排，实际作用可以自己google~

先设置好display: flex後，便能看到我们刚刚排直直的nav内容跟menu-btn变成横向的了

然後在宽度小於320的地方把nav跟menu-btn运用flex的相关语法设成直向排列

@media only screen and (min-width: 0px) and (max-width: 320px) {
    nav {
        flex-direction: column;
    }

    .menu-btn {
        flex-direction: column;
        width: 100%;
    }
}

这边先把menu-btn的display: none拔掉了让大家看的到

然後我们来写JS
这边需要先多设一个css

.show {
    display: block;
}

然後运用jquery的addClass跟removeClass加到menu-btn让他打开或关上就可以了

var ham = false;
$(function () {
    $("#ham").click(function () {
        if (!ham) {
            $(".menu-btn").addClass("show");
            ham = true
        } else {
            $(".menu-btn").removeClass("show");
            ham = false
        }
    });
})

先写一个变数当旗帜判别打开或关上，预设是关上的，然後点击汉堡图样时去判别旗帜状态并给予相对应的改变就好

就这样超简单导览列便完成了
这个做法出现的手机板nav选单会把内容往下推，只要另外再去设置position: absolute 或位置之类的就可以做到其他变化罗!!

为什麽我这边是使用addClass跟removeClass而不是直接去设置css呢
因为如果你用
$(".menu-btn").css("display","block")跟$(".menu-btn").css("display","none")
他会被加在HTML的style里面，这样子只要你有点击过一次汉堡标志，让我们的menu-btn有着display:none的话
你再次切换回电脑版时，会发现你看不到他了
因为即使你在css有设置什麽display:block之类的，他会被HTML中更高级的css覆盖掉，无法作用的~