JavaScriptでハンバーガーメニュー実装の手順

JavaScript
スポンサーリンク

こんにちは!ガストが快適すぎてビビったマダラ蝶です(´・ω・`)

今日のブログはデイトラで模写をしたときにハンバーガーメニューを実装してみたのでその手順を記録していきたいと思います。

今回の備忘録はこんな方におすすめ!

  • JavaScriptでハンバーガーメニューを実装してみたい。
  • ハンバーガーメニューってなに?

ハンバーガーメニューってなに?

まずハンバーガーメニューとはどういった機能なのでしょうか?🍔

三本線のナビゲーションメニュー

ハンバーガーメニューとは、食べ物のハンバーガー屋さんにあるメニュー表ではなく、スマートフォンサイトやタブレットサイト、最近ではPCサイトでもちらほら見かける三本線のナビゲーションメニューです。

実際に僕も模写したサイトを改造して実装してみました。

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

このメニューの長所は、コンテンツの表示エリアを大きく保つことができるところです。特にディスプレイの小さいスマホ画面対応(レスポンシブデザイン)では使用されることが多く画面を有効活用できるというメリットがあります。

反対に短所は初めてスマホ画面を見る人には三本線のアイコンが、メニュータブだとわかりにくいところです。僕らのようなスマホ世代の人間には直感的に理解できることでも、そうではない人にとってはメニューボタンだと識別できないこともあることを理解しておかなければいけません。

アプリ関連のニュースですが、テストを行ったところ、ハンバーガーメニューーを使うとユーザーエンゲージメントが半減するという調査結果も出ていたそうです。

スポンサーリンク

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

JavaScriptでハンバーガーメニューを実装しよう!

実際に僕が書いたとコードはこちらです。

const show = document.getElementById('show');
  const hide = document.getElementById('hide');
  const body = document.querySelector('body');
  const menutab = document.getElementById('menutab');


  show.addEventListener('click', () => {
    body.classList.add('menu-open');
  });

  hide.addEventListener('click', () => {
    body.classList.remove('menu-open');
  });

  menutab.addEventListener('click', () => {
    body.classList.remove('menu-open');
  });

この中のshowとhideはハンバーガーメニューの三本線アイコンとそれを閉じるための✖アイコンです。

このJavaScriptでは三本線アイコンと✖アイコンをクリックすると’menu-open’クラスがついたり外れたりすプログラムを書くことでハンバーガーメニューを再現しています。

このclassListというメソッドによってクラスをつけたり外したりすることができるのでホームページ上に動きをつける際にとても便利です。

まとめ

ハンバーガーメニューの実装の仕方にはいろいろな方法が存在しますが、今回はJavaScriptによって実装してみました。
classListというメソッドはとても便利なので使えるようになるとかけるコードの幅がだいぶ増えます。
このブログを読んで興味を持っていただけたらご自身で更に調べることをおすすめいたします。

ではまた次のブログで会いましょう!

コメント

タイトルとURLをコピーしました