Reactでハンバーガーメニューを作ろう！ライブラリを簡単に解説

JavaScript

2024.02.12

先日Reactでサイトを作っていたのですが、ハンバーガーメニューを実装したいと思い、ライブラリを探したところ、react-burger-menuというライブラリを見つけました。

今回はreact-burger-menuを使ってハンバーガーメニューを実装する方法やカスタマイズについてかいつまんで説明します。

細かい設定の話などは公式や別サイトに委ねます。

Githubサイト
react-burger-menuのインストール
使い方
CSSの適用
デモ
まとめ

Githubサイト

GitHub - negomi/react-burger-menu: :hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path a...

react-burger-menuのインストール

コマンドでこちらを入力します。(Node.jsがインストールされている前提です）

npm install react-burger-menu --save

古いバージョンのReactを使っている場合は以下のコマンドを使用します。

npm install react-burger-menu@^2.9.2 --save

使い方

公式サイトには色々書いてありますが、よく使いそうなものをピックアップして紹介します。

JSXファイル

import { slide as Menu } from 'react-burger-menu'

class Burger extends React.Component {
  showSettings (event) {
    event.preventDefault();
  }

  render () {
    return (
      <Menu>
        <a id="home" className="menu-item" href="/">Home</a>
        <a id="about" className="menu-item" href="/about">About</a>
        <a id="contact" className="menu-item" href="/contact">Contact</a>
      </Menu>
    );
  }
}
export default Burger;

ここでは、ファイル名はburger.jsとします。

実装

burger.jsをインポートしてヘッダーの一番上あたりに以下のように記述します。

<Burger/>

幅の調整

<Menu width={ '280px' } />
<Menu width={ '20%' } />

widthプロパティに数値を渡すとハンバーガーメニューの幅の調整ができます。

位置の調整

<Menu right />

rightを渡すと右側にハンバーガーメニューを表示できます。初期値はleftになっています。

CSSの適用

GithubのCSSをちょっとだけ書き換えて日本語の説明を軽く足したものです。
適宜調整してください。

/* バーガーメニューのボタン */
.bm-burger-button { 
    position: fixed;
    width: 28px;
    height: 28px;
    right: 20px;/* 右にしたい場合はright,左にしたい場合はleft */
    top: 20px;
  }
  
  /* バーガーメニューのボタンの線 */
  .bm-burger-bars {
    background: #373a47;
  }
  
  /* バーガーメニューのボタンの線（ホバー時）*/
  .bm-burger-bars-hover {
    background: #a90000;
  }
  
  /* 閉じるボタン(Xの周辺） */
  .bm-cross-button {
    height: 24px;
    width: 24px;
  }
  
  /* 閉じるボタンのX */
  .bm-cross {
    background: #bdc3c7;
  }
  
  /*バーガーメニューのwrapper*/
  .bm-menu-wrap {
    position: fixed;
    height: 100%;
  }
  
  /* バーガーメニューのwrapper */
  .bm-menu {
    background: #373a47;
    font-size: 1.15em;
  }
  
  /* bubble or elasticの際に必要 */
  .bm-morph-shape {
    fill: #373a47;
  }
  
  /* アイテムリストのwrapper */
  .bm-item-list {
    color: #b8b7ad;
  }
  
  /* アイテム */
  .bm-item {
    display: inline-block;
    height: 50px;
  }

  .bm-item-list a{ /* メニューの個々のアイテムの設定 */
    display:inline-block;
    border-bottom:1px solid #747272;
    line-height: 50px;
    padding-left: 15px;
    text-decoration: none;
    color: #fff;
  }

  .bm-item-list a:hover{ /* 個々のアイテムのホバー */
    background-color: #8a9195;
    color: aliceblue;
  }
  
  /* Styling of overlay */
  .bm-overlay {
    background: rgba(0, 0, 0, 0.3);
  }