実装前の参考

以下を参考に作成しています。

ハンバーガーアイコン

ハンバーガーアイコンについては以下を参照して下さい。

参考

ハンバーガーアイコンの動作

transform

transform を使用しています。transform については以下を参考にして下さい。

参考

【CSS】transform translate

overflow

overflow を使用しています。overflow については以下を参考にして下さい。

参考

【CSS】overflow

実装

HTML

    <div class='out'>
        <div id="navi-overlay">
            <nav></nav>
            <div class="hamburger">
                <span> </span>
                <span> </span>
                <span> </span>
            </div>
        </div>
    </div>

CSS

.out {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

/* navigation overlay */
#navi-overlay {
  display: flex;
  height: 100%;
  width: calc(100% + 150px);
  transition: all 0.5s 0s ease;
  transform: translateX(-150px);
}

/* navigation overlay open */
#navi-overlay.open {
  background-color: rgba(0, 0, 0, 0.4);
  transform: translateX(0);
}

/* nav menu */
#navi-overlay nav {
  background-color: #f53838;
  height: 100%;
  width: 150px;
}

/* hamburger icon */
#navi-overlay .hamburger {
  position: relative;
  width: 50px;
  height: 34px;
  margin-left: 10px;
  margin-top: 10px;
}

#navi-overlay .hamburger span {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: black;
  transition: all 0.3s 0s linear;
}

#navi-overlay .hamburger span:nth-child(1) {
  top: 0;
}

#navi-overlay .hamburger span:nth-child(2) {
  top: 15px;
}

#navi-overlay .hamburger span:nth-child(3) {
  bottom: 0;
}

/* hamburger icon click */
#navi-overlay .hamburger.active span:nth-child(1) {
  transform: translateY(15px) rotate(-45deg);
}

#navi-overlay .hamburger.active span:nth-child(2) {
  opacity: 0;
}

#navi-overlay .hamburger.active span:nth-child(3) {
  transform: translateY(-15px) rotate(45deg);
}

JAVASCRIPT

const elements = document.getElementsByClassName('hamburger');
const navigation = document.getElementById('navi-overlay');
for (let element of elements) {
  element.addEventListener('click', function (e) {
    element.classList.toggle('active');
    navigation.classList.toggle('open');
  });
}

最後に

特にありません。