Materializeを使ってハンバーガーメニューを実装してみる(レスポンシブ対応)

14757 ワード
Materialize Web HTML jQuery CSS HTML テキストリンク

プロフィール

学生です(*‘ω‘ *)
普段はhtml,css,javascriptなど主にフロントエンドの勉強をしていて、最近はvue.js使うことが多め。
バックエンドも勉強したいと思ったので、最近は若干phpも勉強しています
学生のうちに少しでも経験を積むことを目標に自分なりに奮闘中

はじめに

最近、materializeというフレームワークを知り合いのエンジニアの方に教えていただいたので、ちょっと使ってみました
materializeを使ってハンバーガーメニューを作る機会があったので、備忘録も兼ねてまとめてみます
公式サイトはこちらから。

そもそもmaterializeって？

簡単に説明すると、Googleが提唱しているマテリアルデザインというものに沿ったwebサイトが簡単に作れるよっていうフレームワークです

CDNで利用する

CDNで利用する場合はheadタグに以下のコードを挿入してください

 <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

今回は、ハンバーガーメニューのアイコンをmaterializeの機能を使って実装したいので、これも必要です

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

JQueryを使うので、こちらのサイトからJQueryのファイルをダウンロードするか、CDNでの利用をお願いします

僕はJQueryをダウンロードしたものを使うので、そちらを推奨します

色の指定

materializeではbootstrapと比較すると、class属性を使って指定できる色(詳しくはこちらへ)が豊富にあります。
例えば、class属性にpink accent-1と指定すると、 このような色に。
deep-purpleと指定すると、このような色になります。

テキストに対して色を使いたい場合は、grey-text text-lighten-3といったようなclassのつけ方をしてあげてください。

まずはシンプルなメニューバー

class="nav-wrapper"で囲めば簡単にメニュー部分を作ることができます。
ちなみに、class属性にrightを指定すると右寄せになります。
逆に、leftと指定することで左寄せになります（デフォルトだと左寄せだったはず）

html

    <nav class="nav-wraper deep-purple">
      <div class="cotainer">
        <ul class="right">
          <li><a href="#" class="grey-text text-lighten-3">Contents1</a></li>
          <li><a href="#" class="grey-text text-lighten-3">Contents2</a></li>
          <li><a href="#" class="grey-text text-lighten-3">Contents3</a></li>
          <li><a href="#" class="grey-text text-lighten-3">Contents4</a></li>
        </ul>
      </div>
    </nav>

ハンバーガーメニューを作る（レスポンシブ対応）

レスポンシブ対応です。念のため補足しておくと、Jqueryで記述した部分はjquery本体を読み込んでから記述してください。そうしないと、jqueryで書いた部分が認識できずにエラー吐きます('ω')

html

<div class=" navbar-fixed">
    <nav class="nav-wraper  deep-purple">
      <div class="cotainer">

　　　　<!--ハンバーガーメニューの開くアイコン-->
        <a href="#" class="sidenav-trigger right" data-target="mobile-links">
          <i class="material-icons">menu</i>
        </a>

        <div class="menu">

          <ul class="right hide-on-med-and-down">
            <li><a href="#" class="grey-text text-lighten-3">Contents1</a></li>
            <li><a href="#" class="grey-text text-lighten-3">Contents2</a></li>
            <li><a href="#" class="grey-text text-lighten-3">Contents3</a></li>
            <li><a href="#" class="grey-text text-lighten-3">Contents4</a></li>
          </ul>
        </div>

      </div>
    </nav>
  </div>

  <ul class="sidenav" id="mobile-links">

　　<!--ハンバーガーメニューの閉じるアイコン-->
    <a href="#" class="sidenav-close " data-target="mobile-links">
      <i class="material-icons close-icon">close</i>
    </a>

    <div class="menu">
      <li><a href="#">Contents1</a></li>
      <li><a href="#">Contents2</a></li>
      <li><a href="#">Contents3</a></li>
      <li><a href="#">Contents4</a></li>
    </div>
  </ul>

<script src="jquery.min.js"></script>
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
     $(document).ready(function () {
      $('.sidenav').sidenav({
        edge: 'right',
      });
    })
  </script>

css

.close-icon {
  font-size: 2.5rem;
  right: 1rem;
  margin: 1rem auto;
  color: rgb(66, 66, 66);
  padding-left: 17rem;
}

1.開く・閉じるアイコン

まず、materializeの機能では豊富なバリエーションのアイコンを簡単に表示することができて、今回はそれを使ってハンバーガーメニューの開くボタンと閉じるボタンを実装しました。
<i class="material-icons">close</i>みたいな感じで記述することでアイコンを使うことができます。
ただ一つ注意したいことがあって、materializeの機能でアイコンを表示する場合、class属性にではなくタグの中にそのままアイコン名を入れる必要があります。

こちらに使えるアイコンの種類が載っているページを貼っておきます。今回使ったもの以外にもたくさんの種類のアイコンが使えるので、ぜひ使ってみてください。

2.hide-on-med-and-downってなにそれおいしいの？

タブレット以下では非表示にするという意味です。残念ながら食べられません('ω')
class属性にhide-on-med-and-downと指定することでスマホ・タブレット表示のときだけハンバーガーメニューが表示されるといった使い方をすることができます。
他にもいくつかコンテンツの表示に関するclassがありますが今回は省略します。

3.ボタンクリック時の動作について

19行目にあるclass="sidenav"という要素に対して、sidenavというmaterialize独自のメソッドを使って、クリックしたらメニュバーを表示させるという動作をさせています。

$('.sidenav').sidenav({
        edge: 'right',
      });

また、ハンバーガーメニューの開くボタンと閉じるボタンの部分に書いてあるclass属性のsidenav-triggerとsidenav-closeはボタンをクリックしたら開く、またクリックしたら閉じるといった動作をさせたい場合に使います。なので、基本は前述のjqueryの部分とセットで使いましょう。

ちなみに、sidenavというメソッドにはさまざまなオプションがあり,
今回はedge:'right'と指定することで右からメニューが飛び出してくるという設定にしています。デフォルトだと左から飛び出してきます。
他にもいろいろオプションがあり便利なので、是非使ってみて下さい。リンクを貼っておきます。
https://materializecss.com/sidenav.html

最後に

最後まで読んでくれてありがとうございました。
githubに今回書いたサンプルコードを載せておきます。
https://github.com/helloworld753315/materialize

materializeって結構いい感じのフレームワークだと僕は思ってるので、僕が書いた記事で少しでも良いところを伝えていけたらいいなと思ってます(*‘ω‘ *)
今回は時間などの都合もありハンバーガーメニューを作るという目的のみに絞ってmaterializeについての記事を書きましたが、好評でしたらmaterializeでのグリッドの使い方など他の機能についてもそのうち投稿する予定です。