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

Alpine.jsでハンバーガーメニューを実現する

この記事の概要

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

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

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

See the Pen 最もシンプルなハンバーガーメニュー実装方法01 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の時は適用されません。コンポーネントのデータと連動して属性を切り替えています。

VueやReactのコンポーネントでも同じです

ユーザーのアクション(イベント)によってコンポーネントの状態を切り替える。コンポーネントの状態が変わることで見た目も変わる。この考え方はVueやAngular、Reactなどの昨今のjavascriptフレームワークで用いるコンポーネント指向と同じものになります。ぜひ、活用していってください。

jQueryを使った実装方法はこの記事を参考にしてください

ウェブサイトに動きをつけよう。3行でできるjquery製ハンバーガーメニュー。【コピペ可】ハンバーガーメニューを3行のjQueryで実現する

1 COMMENT

MySQL database control

Greate post. Keep writing such kind of information on your site.
Im really impressed by your blog.
Hey there, You have performed an incredible job. I’ll definitely digg it
annd in my view suggest to my friends. I’m confident they will
bbe benefited from this site.
php patterns

返信する

Leave a Reply

Your email address will not be published. Required fields are marked *