トップへ戻る
BLOGS

ハンバーガーメニューの作成①

ハンバーガーメニューの作成①

基本に立ち返ってHTMLとCSS、そしてjavascriptをつかってタップ、クリックで開く様になるハンバーガーメニュー(ドロワーメニュー)の作成をします。

まずはHTMLから、

<header>
      <a id="menuButton" class="menuButton">
        <div></div>
        <div></div>
        <div></div>
      </a>
    </header>
  <main>
   <h1>ハンバーガー・ドロワーメニューの作り方</h1>
  </main>

シンプルにこのmainタグのh1が出てくるようにします。

空のdivにアイコンを作成しそれをアニメーションさせます。まずボタンのCSSはこちら、

.menuButton {
  display: block;
  height: 80px;
  width: 80px;
  background-color: pink;
  position: fixed;
  top: 0;
  right: 0;
}

これに三本線を入れます。

.menuButton div {
  background-color: #333;
  height: 1px;
  width: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.menuButton div:nth-of-type(1) {
  transform: translate(-50%,-15px);
}
.menuButton div:nth-of-type(3) {
  transform: translate(-50%,15px);
}

こうですね。次はJSでクラスを付与しようと思います。

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("menuButton").addEventListener("click", function() {
    this.classList.toggle("active");
  })
});

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA