Programming

CSSとJavaScriptで作るハンバーガーメニュー

Published: 2020/07/25
CSSJavaScript

ハンバーガーメニューとは

スマホなどで、ホームページを表示した時に見える3本線のこと。

この3本線が、ハンバーガーのように見えることから、ハンバーガーメニューと呼ばれています。

ハンバーガーメニュー

クリックすると、メニューが表示されます。 ハンバーガーメニュー

参考サイト:The Virginia

【ハンバーガーメニューのメリット】

  • スマホなどの小さい画面で、コンテンツの表示エリアを確保できる。
  • コンテンツとは別に、メニューエリアを確保できるので、メニューをクリックしやすい。

【ハンバーガーメニューのデメリット

  • スマホに慣れていない人は、3本線がメニューだと分からない
  • 一度メニューボタンを押さないと、メニューの中身が見れない

今回は、ハンバーガーメニューの作り方をメモしておきます。

ハンバーガーメニューの作り方

DEMO

サイズを×0.5にして、横幅を広くすると、PC用の表示になります。 PC版では、メニューボタンがなくなり、左側にロゴ、右側にメニューが並びます。

メニューボタン

#navbtn{
  position: fixed;
  top: 15px;
  right: 15px;
  padding: 0;
  outline: none;
  border: none;
  background: none;
  width: 30px;
  height: 20px;
  cursor: pointer;
}
/* 高さ1pxの線を上下に表示 */
#navbtn::before,
#navbtn::after{
  content : '';
  display: block;
  height: 1px;
  background-color: #333333;
  transform: translateY(10px);
  transition: 0.3s ease-in-out;
}

#navbtn::beforeで上の線、#navbtn::afterで下の線を作っています。

高さ1pxの線をtransform: translateY(10px)で上下に10px移動させています。

transitionをつけているので、切り替わる際にアニメーションがつきます。

/* 高さ1pxの線を中央に表示 */
#navbtn::before{
  transform: translateY(-10px);
  box-shadow: 0 10px #333333;
}

#navbtn::beforebox-shadowをつけることで、中央の線を表示させています。(上の線の陰が真ん中の線になります。)

閉じるボタン

.open #navbtn{
  z-index: 100;
}
.open #navbtn::before{
  transform: rotate(-45deg);
  box-shadow: none;
}
.open #navbtn::after{
  transform: rotate(45deg);
  box-shadow: none;
}

もともとあった3本線のメニューから、beforeとafterの上下線を45度ずつ傾けて、×にしています。

box-shadowをnoneにすることで、中央線を一本なくしています。

メニュー部分

.nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

flexにして、中央表示をしています。

メニューの表示切り替え

.nav{
  /* 初期は非表示 */
  visibility: hidden;
  opacity: 0;
  /* ふわっと表示 */
  transition: 0.5s ease-in-out;
}
.open .nav{
  visibility: visible;
  opacity: 1;
}

JavaScriptでopenクラスを付与

メニューボタンを押すと、htmlにopenクラスが付与されるようにします。

document.getElementById("navbtn").onclick = function(){
  document.querySelector('html').classList.toggle('open');
}

いろいろなハンバーガーメニュー実装サンプル

ボタンのアニメーション

右上にボタン+右からスライド

【解説】 画面右の外側(left:100%)にメニューを配置しておきます。

.nav{
  left: 100%;
  transition: left 0.5s;
}

transition:leftで leftの値にアニメーションをつけて変化させます。

メニューを開いた時に、leftを0にして、画面左端に持ってきます。

.open nav{
  left:0;
}

初期で、画面外に配置したオーバーレイが表示されないようにしています。

html,body{
    overflow-x: hidden;
}

左上にメニュー+左からスライド

【解説】 画面左の外側(left:-100%)にメニューを配置しておきます。

.nav{
  left: -100%;
  transition: left:0.5s;
}

中央にボタン+上からスライド

WordPressでハンバーガーメニューを実装するには??

WordPressでは、グローバルメニュー用のHTMLコードに合わせて、CSSを設定する必要があります。

詳しくは【WordPress】プルダウンメニューのデザインを整えるをどうぞ。


Written by Emi

マイペースにWebサイトやWebアプリの制作をしています