ロゴ

ハンバーガーメニューをjQuery で作る方法【Drawerを使いましょう】

Programing

こんにちは！ケンジです。 模写コーディング等でレスポンシブ 対応を行う際に必須となる通称「ハンバーガーメニュー」の実装方法について記事にします。 HTML/CSSだけで実装する事も可能ですが、本記事ではjQueryを使った方法を紹介します。

本記事の目次


ハンバーガーメニューをJQuery で作る方法


ハンバーガーメニューを実装したいけど、簡単に実装する方法が知りたい！ この様な疑問にお答えします。



ハンバーガーメニューはjQueryのライブラリーであるDrawerがオススメです


ハンバーガーメニューとは、WEBサイトをスマホサイズに変更した際にメニューを表示させる三本の横線ですね。
↓この様なボタンで押すと横からメニューが出たりするやつです。



実装するにはjQueryのライブラリーである「Drawer」がオススメです！ 理由はライブラリーなので実装が簡易的だからです。

■ライブラリーとは？
プログラムの便利な部品を集めて、一つにまとめたファイルのこと。

カレーに例えるとカレーのルーがライブラリーですね。
ルーを使わないで作る場合はスパイスから作ることになり、オリジナリティは出ても作る手間は掛かります。

ルーで作る場合は簡単ですが、誰が作っても大体同じ味になりますね。
なので、ライブラリーで実装する場合は「どこかで見た様な」感は拭えませんが簡易的ではあると思います。



実装方法


CDN(ファイルはダウンロードせずにネットワークで取得)で行いますので、まずは下記を入力してください。

↓<head>タグの中に、drawerが読み込むCSSを設定します。

<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">

↓</body>タグの直前にJSを設定します。

<!-- jQuery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.11.3/jQuery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

簡単ですね！これで「Drawer」を呼び出す準備が完了です。

次はハンバーガーメニュー本体を記載します。

↓こちらが公式サイトから引用したHTMLです。

<body class="drawer drawer--left">
  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <nav class="drawer-nav" role="navigation">
　　//ハンバーガーメニューの中身//
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
</body>


【ポイント】
記載されているclass名はなるべく変えない事。drawer.cssがこちらのclassを読み込んでいるので。 あとは、bodyタグやheaderタグ等は適宜変更してください。私はdivタグ等に変えて実装しました。 ハンバーガーメニューの中身の表示はul タグの中身になりますので、こちらに記入しましょう。 「drawer–left」を「drawer—right」に修正する事で左右の位置を切り替える事ができます。

あと少しで基本の実装が完了です。

次にjava scriptを記入してdrawerを呼び出します。 ↓下記ですね

$(document).ready(function() {
  $('.drawer').drawer();
});

以上で、実装が完了となります。


まとめ


基本的にコピペで実装が出来るので簡単ですね！ ハンバーガーメニューで迷った際は参考にされてみてください。 今回の引用元となるdrawerの公式サイトはこちらになります。

引用元：https://git.blivesta.com/drawer/

関連記事

プログラミングでコーディングを早く打ちたい【始めたばかりの方...

Programing

HOME >  >  ハンバーガーメニューをjQuery で作る方法【Drawerを使いましょう】