iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

CSS 讓你的網頁動起來系列 第 28

CSS微動畫 - 手機版下拉選單,兩種效果可以選

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>

nav style

版本一 黑底推出

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

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

nav tramsform

版本二 黑底淡出

這個版本就比較複雜了,由於黑底是要淡出而選單要推出,所以兩個樣式要區分開來!這時候父層的.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>

nav done

謎音:為了不讓畫面全是黑白的,加了點顏色呢~


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


上一篇
CSS微動畫 - 卡片簡約動態效果,翻轉是另一種感覺~
下一篇
CSS微動畫 - Transform不一定是位移的最佳選擇
系列文
CSS 讓你的網頁動起來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言