DAY21:スマホ時のドロワーメニューを作る

スマホ時のグローバルメニューをドロワーメニューで作っていきましょう。

スマホ時のドロワーメニューを作る

以下のようなドロワーメニューを作成してください。「drawer-open」の方が通常時、「drawer-close」の方が開いた時の表示になります。

https://xd.adobe.com/spec/cc0dcc00-8a97-4c8b-6d88-65df7238eea4-ba3c/
※ パスワードはSlackの「#トライアル課題」にピン留めしています。

次で紹介する、画面を覆うタイプの「drawer-js」というライブラリをカスタマイズすることで実装できるはずです!

ドロワーが作れるライブラリ

手軽にドロワーが作れるライブラリを2つ紹介します。

画面を覆うタイプ

ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介!

画面ごとスライドするタイプ

アプリのようなドロワーをWebサイトで実現!jQueryプラグイン「hiraku.js」の使い方

最終的には自作を目指す

最初の入りとしてライブラリを使っていましたが、案件になるとほとんど自作することが多いです。

クリックに応じて横からスラーッと出てくるだけなので、それほど難しい仕組みではありません。自分用に扱えるものを持っておくと、案件に応じて柔軟に使って行けるようになります!

「ドロワー 自作」などで調べて実際に自分で作ってみてください。

例えば、以下のような作り方です。
ドロワーメニューをプラグイン無しで簡単に自作する方法 | マインドステージ

余裕があったら、、、

ドロワーではないですが、スマホ時にこういったメニューの動きもよくあります。画面全体を覆ってメニューだけを選択できるようにする。
https://xd.adobe.com/spec/4b59b30a-b81f-4705-696d-db64931432d2-3d68/

スマホ時のメニュー関連ということで、ドロワーと関係ないですが作ってしまいました…

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事