【コピペ可】Alpine.jsでハンバーガーメニューを実現する

軽量JavaScriptであるAlpine.jsをつかってハンバーガーメニューを実装する方法を紹介します。Alpine.JSではJavaScriptファイルにロジックを記述するのではなく、HTMLの属性としてJavaScriptのロジックを書いていくことになります。VueやAngularに近い書き方ですね。jQueryを使わずとも簡単にハンバーガーメニューが実現できるので是非取り入れてみてください。

ハンバーガーメニューの完成デモ

まずはハンバーガーメニューのデモになります。HTMLとCSSとAlpineJSで実装しています。デモのボタンをクリックするとメニューが開き、もう一度押すとメニューが閉じます。スマホサイトでは頻出する定番のUIになります。

See the Pen 最もシンプルなハンバーガーメニュー実装方法０1 by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen.

Alpine.jsの実装内容を解説

Alpine.jsのCDNを読み込みます。

Alpine.jsのプログラムをCDN経由で読み込んでいきます。これを読み込まないと動作しないので注意してください。

<script src="//unpkg.com/alpinejs" defer></script>

AlpineJSのソースコード

HTML内にAlpineJSのコードを記述していきます。bodyタグにx-data="{ open: false }"、ボタンにx-on:click="open=!open" という属性を追加しています。また、メニューにはx-bind:class="{'is-active' : open }" という属性を追加しています。記述はこれだけです。

<body x-data="{ open: false }">
<buton type="button" class="menu-btn" x-on:click="open=!open">
      <i class="fa fa-bars" aria-hidden="true"></i>
</button>
<div class="menu" x-bind:class="{'is-active' : open }">
      <div class="menu__item">TOP</div>
      <div class="menu__item">ABOUT</div>
      <div class="menu__item">BLOG</div>
      <div class="menu__item">CONTACT</div>
</div>
</body>

x-dataでコンポーネント（要素）にプロパティ（データ）を持たせます。

今回は、一番親のbodyタグを大きなコンポーネント（要素）として、そのbodyタグにopenという名前のキーを持たせます。キーの値はfalseです。オブジェクト形式（{key: value})でコンポーネントにはデータを持たせていきます。openはメニューの閉じ開きの状態を保存させておくデータです。falseは閉じている状態、trueは開いている状態です。

x-on:click=”open=!open”でボタンをクリックするたびにopenの状態を切り替えます。

x-onはjavascriptのaddEventListener、jQueryでいうonメソッドと同等です。コロン（:）でつなぐことでその後にイベント名を記述できます。今回はclickイベントです。属性の値にopen=!open を入れて現在のopenの真偽値をいれかえます。toggle処理と同じことをしています。

x-bind:class=”{‘is-active’ : open }”でopenの値に応じてメニューにクラスを付与します。

x-bindはHTMLの属性をAlpineJSのデータ処理と紐づけることができます。コロン（:）でつなぐことでその後にHTMLの属性名を記述できます。今回はclass属性です。{'is-active' : open } はopenの値がtrueの時にis-activeがclass属性に適用されるという意味です。falseの時は適用されません。コンポーネントのデータと連動して属性を切り替えています。