【JavaScript】とても簡単なハンバーガーメニューの作り方をわかりやすく解説

プログラミング初心者の勉強ブログ #91

ハンバーガーメニューは仕組みさえわかれば簡単にオリジナルを作成することができます。今回は簡易的なハンバーガメニューを簡単に作る方法を、実際のコードとともに紹介していきます。ほんの少しのJSを書き込むだけで、あとはCSSでオリジナルのデザインを作ることができます。positionプロパティも解説してます。

 

目次

[toc]

 

実装内容

バーガーメニュー

 

上の画像のような、「バーガーアイコンをクリックしたら、横からメニューが出る」表示を実装していきます。

 

バーガーメニュー作成の流れ

バーガーメニューを作成する流れは以下の通りです。

  1. HTMLで「バーガーアイコンdiv」と「表示されるメニューdiv」を作成
  2. JavaScriptでバーガーアイコンのクリックアクションを定義
  3. 2のクリックアクションでそれぞれのdivにclassを加えたり消したりする
  4. 3のclassの有無でdivのCSSが変化し、メニューの表示・非表示が行われる

イメージ図1

イメージ図2
メニューのwidthが300pxのとき、上の画像のように「position: absolute;」のrightの値を-300pxから0に変更すると、元々はブラウザ画面外に設置していたメニューが左にずれ、表示される仕組みです。

 

補足、positionプロパティの動きについて

「position: absolute;」とは、「position: relative;」が設定された親要素のオフセットがX軸0、Y軸0(要素の一番左上の座標)の場所を軸として、topやrightなどの値を指定して上下左右の位置を自由に変更し固定するプロパティです。

 

positionプロパティの指定が無い場合、divはブロック要素なので下の画像のように上下に積まれていきます。

positionプロパティ1

Aが親要素div、Bが子要素divとしたとき、親要素Aのpositionプロパティを「relative」に変更すると、
positionプロパティ2

画面上特に変化はありませんが、これで親要素Aの子要素たちはAのオフセットを基準としたpositionプロパティとして動くことになります。実際に子要素Bのpositionを「absolute」に変更すると、
positionプロパティ3
このように表示が変化します。これがpositionプロパティの基本となる動きです。正直自分で何回もやらないと動きがつかめませんでした。慣れるまでやるしか無いです。

 

実際のコード

※Railsで作成してます。

index.html.erb(抜粋)

<div class="wrap">
 // バーガーアイコンdiv
 <li id="menu_link">
  <i class="fas fa-bars"></i>
 </li>

 // メニューdiv
 <div class="icon_link_tab">
  <div class="close_btn">
   # バツ印のFontawesome
   <i class="fas fa-times"></i>
  </div>
  <%= link_to 'アプリを探す', advertisements_path %>
  <%= link_to 'ユーザー検索', users_path %>
  <%= link_to 'メッセージ', conversations_path %>
  <%= link_to 'マイページ', user_path(current_user.id) %>
  <%= link_to '編集', edit_user_path(current_user.id) %>
  <%= link_to 'ログアウト', destroy_user_session_path, method: :delete %>
 </div>
</div>

バーガーアイコンdivとメニューdivにそれぞれidやclassをつけておきます。

 

style.js

$(function(){
  $('#menu_link').click(function(){
    $('.icon_link_tab').addClass('open');
  });
  $('.close_btn').click(function(){
    $('.icon_link_tab').removeClass('open');
  });
});

指定したクラスに対し、JSを当てていきます。「addClass」メソッドと「removeClass」メソッドを用いることで、バーガーアイコンのクリック時に「open」というclassを追加で付けたり取り除いたりできます。「open」クラスが追加されることで、あらかじめ「open」につけておいたclassが反映されます。

 

style.css(必要な部分のみ抜粋)

// 親要素にrelative(定型文句みたいなもの。これを基準に子要素のpositionプロパティをいじるよという印)
.wrap {
  position: relative;
}

// メニューdivの初期位置を指定
.wrap .icon_link_tab {
  position: absolute;
  top: 0;
  right: -300px;
  transition: 0.3s ease-out;
}

// バーガーアイコンクリック時の追加CSS
.wrap .icon_link_tab.open {
  right: 0;
  transition: 0.3s ease-out;
}

「transition: 0.3s ease-out;」のよう形でtransitionプロパティを加えて付けることで、メニューdivの位置変更にアニメーションを与えることができます。無いとメニューが突然現れるので、何かしらの「transition」をつけておくと自然になります。

 

まとめ

少しJSが使うだけで自分でオリジナルのメニューを作れるようになるので、覚えておいて損はないです。

以上ありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA