Q: 我要下拉選單，黑底跟選單一起推出來呢？還是淡出呢？
A: 前幾章的小技巧有掌握好，一切都好上手

之前常常會看到有些網站手機版的下拉選單，樣式主要分為兩種，黑底淡出或是推出，今天要來針對兩種版本說明一下在程式碼上的差異！

下拉選單！

一樣使用簡易的javascript，並將樣式都切出來，目前的程式碼不論黑底是推出或淡出都是一樣的～

/* 以下每個範例都將使用相同的基礎html、css及javascript，如下：*/
<script>
  function toggle() {
    document.getElementById('nav-container').classList.toggle('is-active');
    document.getElementById('btn-menu').classList.toggle('is-active');
  }
</script>

<style>
  body {
    padding: 0;
    margin: 0;
  }
  .header {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    box-shadow: 0 0 3px 1px Gray;
    background-color: White;
    z-index: 1;
  }
  .btn-menu {
    position: relative;
    height: 15px;
    width: 18px;
  }
  .btn-menu::before,
  .btn-menu::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: DimGray;
    transform-origin: left;
  }
  .btn-menu::before {
    top: 0;
  }
  .btn-menu::after {
    bottom: 0;
  }
  .nav-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 40px;
    background-color: rgba(0, 0, 0, .5); 
  }
  .nav {
    max-height: 70%;
    overflow: auto;
    background-color: White;
  }
  .nav-item {
    line-height: 35px;
    padding: 0 20px;
    border-bottom: 1px solid Gainsboro;
  }
  .is-active.btn-menu::before {
    transform: rotate(45deg);
  }
  .is-active.btn-menu::after {
    transform: rotate(-45deg);
  }
  .btn-menu::before,
  .btn-menu::after,
  .nav-container {
    transition: .3s;
  }
</style>

<div class="header">
  <div class="btn-menu" id="btn-menu" onclick="toggle()"></div>
</div>
<div class="nav-container" id="nav-container">
  <nav class="nav">
    <div class="nav-item" style="color: red">紅 red</div>
    <div class="nav-item" style="color: Orange">橘 Orange</div>
    <div class="nav-item" style="color: Gold">黃 Yellow</div>
    <div class="nav-item" style="color: Green">綠 Green</div>
    <div class="nav-item" style="color: Blue">藍 Blue</div>
    <div class="nav-item" style="color: Purple">紫 Purple</div>
    <div class="nav-item" style="color: Pink">粉 Pink</div>
    <div class="nav-item" style="color: Gray">灰 Gray</div>
  </nav>
</div>

版本一 黑底推出

當沒有開啟選單狀態時，要將選單隱藏，使用transform將選單往上推出去。這樣的寫法要寫的程式碼比較少，輕易就可以做出下拉效果。

<style>
  .nav-container {
    transform: translateY(-100%);
  }
  .is-active.nav-container {
    transform: translateY(0);
  }
</style>

版本二 黑底淡出

這個版本就比較複雜了，由於黑底是要淡出而選單要推出，所以兩個樣式要區分開來！這時候父層的.nav-container就不做位移，而是背景顏色改變。

<style>
  .nav-container {
    background-color: rgba(0, 0, 0, 0);
  }
  .is-active.nav-container {
    background-color: rgba(0, 0, 0, .5);
  }
</style>

而選單的位移則移到子層.nav做～

<style>
  .nav {
    transform: translateY(-100%);
    transition: .3s;
  }
  .is-active .nav {
    transform: translateY(0);
  }
</style>

謎音：為了不讓畫面全是黑白的，加了點顏色呢～

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！