利用 CSS 做出 offcanvas 遮罩效果

文章目的

我們在逛一些具有響應式設計的網站時，在較小裝置點開 offcanvas 的 menu 時會有類似遮罩效果出現在畫面上，此文章將用來記錄如何利用 css 做出一樣的效果。

本次示範 Demo

這邊先附上要呈現的效果圖
點擊漢堡選單前

點擊漢堡選單後

效果分析

其實遮罩並沒有想像中那麼難達成，基本上只需要設置一個佔滿螢幕大小的 div 並利用絕對定位就可以輕鬆達成。
遮罩的顏色我們可以根據背景色不同來做更換。

示範程式碼

遮罩製作

我先做出一個包覆 menu 的區塊元素，並將其寬高設為裝置的寬高，程式碼如下：

<aside class="side min-vh-100 min-vw-100"> 

</aside>

<style>
.side{
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: rgba($color:#696969, $alpha: 0.7);
    transition: all .3s;
    transform: translateX(100vw);
    overflow: hidden;
  }
</style>

另外用絕對定位讓它脫離排版，並且利用 transform 將其隱藏。
步驟進行到這裡我們已經有個覆蓋裝置畫面的遮罩。

接著將 menu 的 ul li 寫入我們剛剛創的遮罩中，程式碼如下：

<aside class="side min-vh-100 min-vw-100">
    <ul class="liststyleNone p-0 m-0 px-2 offcanvas">
        <i class="fas fa-times-circle cancel text-primary fa-2x" @click="closeOffcanvas"></i>
        <li class="mt-5 d-flex justify-content-center p-0 m-0">
            <router-link to="/login" class="mainNavbarBtn pt-2 h3"><i class="fas fa-user mr-2"></i>後台登入</router-link>
        </li>
        <li class="mt-5 d-flex justify-content-center p-0 m-0">
            <a href="#" class="mainNavbarBtn pt-2 h3"><i class="fas fa-ticket-alt mr-2"></i>優惠卷<i class="fas fa-angle-down ml-2"></i></a>
        </li>
        <li class="mt-5 d-flex justify-content-center p-0 m-0">
            <a href="#" class="mainNavbarBtn pt-2 h3"><i class="fas fa-shopping-cart mr-2"></i>購物車<i class="fas fa-angle-down ml-2"></i></a>
        </li>
        <li class="my-5 d-flex justify-content-center p-0 m-0">
            <a href="#" class="mainNavbarBtn pt-2 h3"><i class="fas fa-shopping-bag mr-2"></i>全部商品<i class="fas fa-angle-down ml-2"></i></a>
        </li>
    </ul>
</aside>

<style>
 .offcanvas{
    min-width: 50vw;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba($color: #DCDCDC, $alpha: 0.8);
    overflow: auto  /*加入此屬性才能讓內容改變時跟著自適應*/
  }
</style>

這邊我是設定 menu 的寬度為裝置的一半，同樣的利用絕對定位來決定它在遮罩上的位置。
最後我們只需要設置點擊漢堡選單與叉叉時為遮罩新增與移除 className 即可， class 的部分只需要修改遮罩 transform 的位置就會有出現與隱藏的效果。
這裡有一點要注意的是若我們沒有在新增的 className 中寫入 overflow: auto 這個屬性會導致 offcanvas 不會出現滾動條在內容過多時，會無法順利觀看。

/*遮罩新增的 className*/
.offcanvasShow{
    transform: translateX(0);
    overflow: auto
  }

參考資料

JS CSS實現彈出全屏灰黑色透明遮罩效果的方法

Hao's F2E World