【ハンバーガーメニューエリア】メニューが左からスライド

表示デモ

実装コード

HTML

<div class="sample_body">
    <button class="hamburger plus-morph hamburger-nav">
        <span></span><span></span><span></span>
    </button>
    <nav class="header-nav">
        <ul class="header-nav_left">
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
        </ul>
    </nav>
</div>

CSS

@charset "utf-8";
/* サイト共通設定 */
:root {
    --primary-text-color: #2A3140;
    --primary-accent-color: #D97F30;
}
html {
    font-size: 62.5%;
}
a {
    color: var(--primary-text-color);
}
.demo-wrap {
    display: flex;
    justify-content: center;
    padding: 50px;
}

/* ハンバーガーメニュー共通設定 */
.hamburger {
  display: inline-block;
  cursor: pointer;
  width: 34px;
  height: 20px;
  position: relative;
  border: none;
  background-color: transparent;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-text-color);
  border-radius: 2px;
  transition: all .25s ease;
}
.hamburger span:nth-child(1) {
    top: 0;
}
.hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
.hamburger span:nth-child(3) {
    bottom: 0;
}
.sample_body {
    padding: 10px;
}
.hamburger-nav {
    display: flex;
    z-index: 2;
}
.header-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 100%;
    background-color: var(--primary-accent-color);
    position: absolute;
    top: 0;
    left: 0;
    transition: .3s;
    z-index: 1;
}
/* メニューの動き */
.header-nav ul.header-nav_left {
    transform: translateX(-100%);
}
.header-nav .active ul {
    transform: translateX(0);
}

JavaScript

"use strict";

// buttonにclass付与、ハンバーガーボタンを開閉
function toggleHamburger(el) {
  el.classList.toggle('open');
}
// navにclass付与
function toggleNav() {
  const nav = document.querySelector('.header-nav');
  if (nav) {
    nav.classList.toggle('active');
  }
}
// イベント登録
function initHamburger() {
  const hamburgers = document.querySelectorAll('.hamburger');
  hamburgers.forEach(el => {
    el.addEventListener('click', () => {
      toggleHamburger(el);
      toggleNav();
    });
  });
}
/* ---- まとめて呼び出し ---- */
document.addEventListener('DOMContentLoaded', () => {
  initHamburger();
});

ポイント

画面外からシュッと出現するメニュー。JavaScriptの記述は上下左右で同じ。

参考リンク

【準備中】