マウスオーバーでハンバーガー内のメニュー出てくるやつ

youtu.be

もとは別のデザインで、もっと大きいメニューをびろっと出す予定だったんだけど、今のメニューの数なら開く前のヘッダーの高さに収まるんじゃないかと思ってこの案を考えた。CSS だけでできそうだから、というのもある。

• マウスオーバーでハンバーガー内のメニュー出てくるやつ

<nav class="nav">
  <a href="#nav__menu" class="nav__button">≡</a>
  <ul id="nav__menu" class="nav__menu">
    <li class="is--active">showcase</li>
    <li>about</li>
    <li>contact</li>
    <li>blog</li>
  </ul>
</nav>

.nav__button {
  position: relative;
  z-index: 2;
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  text-decoration: none;
  cursor: pointer;
}

.nav__button:hover + .nav__menu {
  left: 3rem;
  transition: .2s;
}

.nav__menu {
  position: absolute;
  top: 0;
  left: 100%;
  width: calc(100vw - 3rem);
  z-index: 1;
  display: flex;
  align-items: center;
  height: 3rem;
  margin: 0;
  padding-left: 0;
  background-color: var(--white);
  list-style: none;
}

これを実際使うにはマウスオーバーじゃなくてクリックにする必要がある。あとはハンバーガーアイコンをバツアイコンに変えたりとかそういうこともしないと。今の倍くらいのコード量になりそうで、さらに width: calc(100vw - 3rem) とかやってるあたりが複雑。もう少しこれで進めるけど、CSS だけで完結させるには実用的ではないかもしれない。