-
-
こんにちは！ケンジです。 模写コーディング等でレスポンシブ 対応を行う際に必須となる通称「ハンバーガーメニュー」の実装方法について記事にします。 HTML/CSSだけで実装する事も可能ですが、本記事ではjQueryを使った方法を紹介します。
本記事の目次
- 1.ハンバーガーメニューをJuery で作る方法
ハンバーガーメニューをJQuery で作る方法
ハンバーガーメニューを実装したいけど、簡単に実装する方法が知りたい！ この様な疑問にお答えします。
ハンバーガーメニューはjQueryのライブラリーであるDrawerがオススメです
ハンバーガーメニューとは、WEBサイトをスマホサイズに変更した際にメニューを表示させる三本の横線ですね。
↓この様なボタンで押すと横からメニューが出たりするやつです。
実装するにはjQueryのライブラリーである「Drawer」がオススメです！ 理由はライブラリーなので実装が簡易的だからです。
■ライブラリーとは？
プログラムの便利な部品を集めて、一つにまとめたファイルのこと。
カレーに例えるとカレーのルーがライブラリーですね。
ルーを使わないで作る場合はスパイスから作ることになり、オリジナリティは出ても作る手間は掛かります。
ルーで作る場合は簡単ですが、誰が作っても大体同じ味になりますね。
なので、ライブラリーで実装する場合は「どこかで見た様な」感は拭えませんが簡易的ではあると思います。
実装方法
CDN(ファイルはダウンロードせずにネットワークで取得)で行いますので、まずは下記を入力してください。
↓<head>タグの中に、drawerが読み込むCSSを設定します。
12<!-- drawer.css --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
↓</body>タグの直前にJSを設定します。
12345<!-- jQuery & iScroll --><!-- drawer.js -->簡単ですね！これで「Drawer」を呼び出す準備が完了です。
次はハンバーガーメニュー本体を記載します。
↓こちらが公式サイトから引用したHTMLです。
12345678910111213141516171819<bodyclass="drawer drawer--left"><headerrole="banner"><buttontype="button"class="drawer-toggle drawer-hamburger"><spanclass="sr-only">toggle navigation</span><spanclass="drawer-hamburger-icon"></span></button><navclass="drawer-nav"role="navigation">//ハンバーガーメニューの中身//<ulclass="drawer-menu"><li><aclass="drawer-brand"href="#">Brand</a></li><li><aclass="drawer-menu-item"href="#">Nav1</a></li><li><aclass="drawer-menu-item"href="#">Nav2</a></li></ul></nav></header><mainrole="main"><!-- Page content --></main></body>
【ポイント】
記載されているclass名はなるべく変えない事。drawer.cssがこちらのclassを読み込んでいるので。 あとは、bodyタグやheaderタグ等は適宜変更してください。私はdivタグ等に変えて実装しました。 ハンバーガーメニューの中身の表示はul タグの中身になりますので、こちらに記入しましょう。 「drawer–left」を「drawer—right」に修正する事で左右の位置を切り替える事ができます。あと少しで基本の実装が完了です。
次にjava scriptを記入してdrawerを呼び出します。 ↓下記ですね
123$(document).ready(function() {$('.drawer').drawer();});
以上で、実装が完了となります。
まとめ
基本的にコピペで実装が出来るので簡単ですね！ ハンバーガーメニューで迷った際は参考にされてみてください。 今回の引用元となるdrawerの公式サイトはこちらになります。
