今回は「JavaScript」と「CSS」を使ったハンバーガーメニューの実装方法を紹介していきたいと思います。

Webサイトにハンバーガーメニューを実装したいと考えている方、よかったら覗いて見てください。

ハンバーガーメニューの実装

今回は左上にあるハンバーガーメニューをタップすると、左側からナビメニュー が出てくる仕組みでコードを組みます。

サンプルを用意したのでそちらをご覧ください。

ハンバーガーメニュー:サンプル

HTML、CSS、JavaScript、順に見ていきましょう。

HTML

HTMLはサクッと説明していきます。

ナビメニュー

ハンバーガーメニューの中に表示される、ナビメニューの骨組みです。

後でJSでID名を取得したいので、navタグにはidでクラス名を与えるのを忘れないようにしてください。

よくあるナビの構成ですね!サクッといきます!

<!-- ナビメニュー -->
<nav id="nav">
  <ul>
    <li><a href="#">SUMPLE1</a></li>
    <li><a href="#">SUMPLE2</a></li>
    <li><a href="#">SUMPLE3</a></li>
  </ul>
</nav>

ハンバーガーメニューのアイコン

よくあるハンバーガーメニューになる、横棒3本線を表現するための骨組みです。

今回はspanタグを使います。

ナビメニュー 同様に、JSでID名を取得するためにspanタグを囲ったdivタグにクラス名を与えます。CSSで高さを設定するので、spanタグそれぞれにもクラス名を与えておきます。

<!-- ハンバーガーメニューのアイコン -->
<div id="hamburger">
 <!-- 1番上の線 -->
  <span class="inner_line" id="line1"></span>
 <!-- 真ん中の線 -->
  <span class="inner_line" id="line2"></span>
 <!-- 1番下の線 -->
  <span class="inner_line" id="line3"></span>
</div>

h1とh2に関しては特に説明することないので飛ばします。

次はCSSで装飾していきます。

CSS

まずはハンバーガーメニューが開く前の状態(閉じた状態)の画面をCSSで装飾していきます。

ページ全体とヘッダー部

ここら辺はさっくりと。

ページ全体とヘッダーの色を決め、ヘッダーの高さ・幅を指定し、ヘッダーを固定します。

* {
  margin: 0;
  padding: 0;
  }
body {
  /*ページ全体の背景色*/
  background: #b4ada9;
}
header {
  /*ヘッダーを固定*/
  position: fixed;
  width: 100%;
  height: 90px;
  background: #000000;
}

ナビメニュー

ナビニューの装飾をしていきます。

widthでナビメニュー の幅を決めて、left: -40%;を指定するおかげで、ナビメニュー は左側に隠れた状態になります。この幅はお好みで変えてください。

#nav{
  position: absolute;
 top: 0;
 /*ナビメニューを左に隠した状態になる*/
  left: -40%;
  width: 40%;
  height: 100vh;
  background: #ffffff;
 /*0.7秒かけてナビメニューがスライドする*/
  transition: .7s;
}
#nav ul{
  padding-top: 80px;
}
#nav ul li{
  list-style-type: none;
  font-size: 20px;
}
#nav a{
  display: block;
  text-decoration: none;
  color: #000000;
  margin: 0 15px;
  padding: 10px;
  transition: .5s;
}
#nav li a:hover{
  color: #ffffff;
  background: #cd5c5c;
  border-bottom: none;
}

ハンバーガーメニューのアイコン

横棒3本線の設定をします!

親要素の#hamburgerでアイコンの位置と幅・高さを決めます。

#hamburger {
  display: block;
  position: absolute;
  top: 20px;
  left: 30px;
  width: 50px;
  height: 44px;
  cursor: pointer;
  transition: 1s;
}

線の縦幅・色などを指定していきます。

.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #ffffff;
  transition: 1s;
  border-radius: 4px;
}

それぞれの線の位置を指定します。

これで横棒3本線の形になります。

#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  bottom: 0px;
}

ハンバーガーメニューの動き

アイコンをクリックした時の動作のCSSを指定します。

クラス名を指定し、色や動きをお好みで指定してください。

.in{
  transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  background: #000000;
}
.line_1 {
 /*-45度回転させる*/
  transform: rotate(-45deg);
  top: 0;
}
.line_2 {
  opacity: 0;
}
.line_3 {
  /*45度回転させる*/
  transform: rotate(45deg);
  bottom: 0;
}
 

次はJSで動きをつけていきます。

JavaScript

hamburgerという関数を宣言します。

getElementByIdでHTML(document)からID名を取得し、CSSで指定した動きの動作のクラス名をclassList.toggleで与えます。

function hamburger() {
  document.getElementById('line1').classList.toggle('line_1');
  document.getElementById('line2').classList.toggle('line_2');
  document.getElementById('line3').classList.toggle('line_3');
  document.getElementById('nav').classList.toggle('in');
}
document.getElementById('hamburger').addEventListener('click' , function () {
  hamburger();
} );

getElementByIdでHTMLからIDhamburgerを取得し、addEventListenerでイベント処理を指定します。

ここで最初に宣言した関数hamburgerを呼び起こします。

これでアイコンをクリックしたら、ナビメニュー が出てきたり閉じたりする動きがつきます!

最後に

今回は「JavaScript」と「CSS」を使ってハンバーガーメニューの実装をしてみました。

他にも「jQuery」や「CSS」のみで作る方法などもあります。

そのサイトの雰囲気に合った形や色、動き、実装方法など色々試してみてください!

作者情報
都会に憧れて上京してきた田舎者。 都会での暮らしは刺激でいっぱいです。趣味は動画鑑賞とカフェ巡りです。