スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。

↑私が10年以上利用している会計ソフト！

このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。

1. メニューを開いた状態を作成

まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定などで、特に変わったことはしていません。

HTML

<header>
  <button class="btn-menu">メニュー</button>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス概要</a></li>
      <li><a href="#">実績紹介</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

CSS

/* 基本装飾 */
header {
  background: #333;
  padding: .5rem;
  text-align: right;
}
a {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
li {
  margin: 2rem 0;
}

/* ボタン */
.btn-menu {
  border: 1px solid #999;
  background: transparent;
  color: #fff;
  padding: .5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
}

/* メニュー */
nav {
  background: #0bd;
  position: absolute;
  z-index: 1;
  top: 3.125rem;
  right: 0;
  overflow-x: hidden;
  text-align: center;
  width: 100%;
}

こんな状態になります。まだボタンを押しても何も起こりません。

2. JavaScriptでボタンをクリックした時にクラスを追加

続いてJavaScriptです。HTMLファイルの </body> タグの直前に script タグで囲んで記述するか、作成したJavaScriptファイルに記述し、HTMLファイルに読み込ませましょう

JavaScript

const btn = document.querySelector('.btn-menu');
const nav = document.querySelector('nav');

btn.addEventListener('click', () => {
  nav.classList.toggle('open-menu')
});

簡単に訳すと、

1. 「btn-menu」ってクラスのついたボタンを「btn」って箱に入れとくよー
2. 「nav」要素のメニュー部分を「nav」って箱に入れとくよー
3. ボタンをクリックすると
4. メニュー部分に「open-menu」ってクラスをつけたり外したりするよー

ってことです。

デベロッパーツールで確認するとわかりやすいですね。ボタンをクリックするたびにメニュー部分に「open-menu」というクラスがついたり外れたりしています。この「open-menu」クラスにメニューが開いたときの装飾を加えることで、ボタンをクリックしたらメニューが開閉する動作を実装します。

3. メニューの幅を変更

手順1ではわかりやすいようにメニューを開いた状態にしていましたが、デフォルトでは非表示にしたいので、メニューの幅を 0 にしておきます。幅がないので見えなくなるわけですね。そしてボタンをクリックした時、つまり「open-menu」クラスがついた時は幅を 100% にして全面に表示させます。

CSS

/* メニュー */
nav {
  background: #0bd;
  position: absolute;
  z-index: 1;
  top: 3.125rem;
  right: 0;
  overflow-x: hidden;
  text-align: center;
  width: 0; /* ←100%から 0 に変更 */
}

/* メニューを開いた時 */
nav.open-menu {
  width: 100%;
}

ボタンをクリックするとメニューが表示・非表示されるようになりました！

4. アニメーションを追加

このままだと「スライド」メニューではないので、CSSでアニメーションを加えましょう。nav 部分に transition プロパティーを一行追加するだけで完了です！.5s は0.5秒の意味。スピードは好みで変更してください。

CSS

nav {
  background: #0bd;
  position: absolute;
  z-index: 1;
  top: 3.125rem;
  right: 0;
  overflow-x: hidden;
  text-align: center;
  width: 0;
  transition: .5s; /* ← 追加 */
}

なめらかに開閉されてる！！

5. ボタンのテキストを変更

基本的な実装は以上ですが、最後にボタンのテキストも変えたいかなと思います。メニューを閉じている時は「メニュー」、開いている時は「閉じる」に変更しましょう。JavaScriptでクリックしたときの動作を追加します。

JavaScript

btn.addEventListener('click', () => {
  nav.classList.toggle('open-menu')
/* ↓ ここから追加 ↓ */
  if (btn.innerHTML === 'メニュー') {
    btn.innerHTML = '閉じる';
  } else {
    btn.innerHTML = 'メニュー';
  }
/* ↑ ここまで追加 ↑ */
});

訳すと

1. ボタンをクリックした時に
2. メニュー部分に「open-menu」ってクラスをつけたり外したりするよー
3. ついでにその時ボタンに「メニュー」って書いてあったら
4. 「閉じる」に変えてねー
5. そうじゃなかったら（＝「閉じる」って書かれてるなら）
6. 「メニュー」に変えておいてねー

という感じです。

うまく切り替わっていますね！

ちなみに if/else の部分は三項演算子を使うとより記述を簡略化できます。意味は同じなので、楽な方で指定するといいでしょう。

btn.innerHTML = btn.innerHTML === 'メニュー' ? '閉じる' : 'メニュー'

完成！

See the Pen
Simple JS Slide Menu by Mana (@manabox)
on CodePen.

こちら完成形です！JavaScriptのコードも短めで実装できました！

jQueryがなくても簡単に作成できましたね！カスタマイズしたい時は基本的にCSSを変更すればいいので、JavaScriptに苦手意識がある人でも取り組みやすいかなと思います。Webサイト制作のヒントになれば幸いです！