61.ドロワーメニューを作る ～自作か、ライブラリか～
本日はドロワーメニューを作っていきます。
本当はデータ属性について考えていたんですが、
ドロワーメニューは
ハンバーガーアイコン等をクリックすると「にゅるっ」と出てくるあれです。
スマホ表示など表示領域が狭い時などに重宝します。
こんな感じのやつです（雑
では、さっそくやっていきましょう。
drawerライブラリを使う
ライブラリを使って、作っていきましょう。
今回使うdrawerライブラリは「JavaScriptライブラリ」ではなく、
「jQueryライブラリ」です。
何が違うのかと言えば、
jQueryの記述で書かれているから、jQueryを読み込んでから使う必要がある
くらいの簡単なイメージでいいと思います。
あまり難しく考えずにトライしていきましょう。
公式サイトから必要なものを引っ張ってくる
公式サイトへ行くと、
ご丁寧に
STEP1～STEP3
の案内がありますので、それに従っていきましょう。
というか、STEP３で完結は優しいですね。
まずSTEP1
CDNのリンクを設置する
HTMLのヘッドにCSSのリンクを、
bodyの閉じタグの直前にscriptをすべて記述します。
次にSTEP2
HTMLを記述する
bodyタグにクラスが当たっているので、その当たりに注意しながら
コピペしていきます。
最後にSTEP3
jQueryを記述する
すでに自分が用意しているscript.jsなどがあれば、最後に読み込まれる形にして
そこに記述します。
これで、一先ずドロワーメニューの設置は完了です。
必要に応じて調整する
設置が終わったら、動作の確認をして次に調整していきます。
自身のstyle.cssに対して定義済みのクラスを書き、値を上書きしていきます。
どこに何が設定されているかわからないじゃないか！
そうです、調べるんです。
Google検証ツールが役に立ちます。
こんな感じで、要素を選択することで、そこに適用されているセレクタとスタイルがわかります。
このセレクタをコピーして、style.cssに記述を追加していくイメージですね。
例えば、上記の例の中で行くと
ドロワーを開いた時のボタンの位置を変更したい場合は
.drawer--left.drawer-open .drawer-hamburger{
left : 200px;
}
という風に記述すればよいでしょう。
デザイン変更の流れとしては、
①デザインを変えたい要素のセレクターをコピーして、style.cssにペースト
②プロパティを記述してスタイルを上書き
で、適用できると思います。
動きに関する処理はほぼ書かなくて大丈夫なので、だいぶ楽ですよね。
自作するには？
私はライブラリを使わずに作るやり方を試みまして、
ざっくり解説すると
- HTMLでドロワーメニューが開いた状態を作成
- 閉じた状態をpositionプロパティやtranslateプロパティを使って表現
- 要素の重なりはz-indexプロパティを使う
- 切り替え用のクラスを作成し、通常時はdisplay:none;
- 最後にopenとcloseはJavaScriptで管理
こんな流れです。
興味がある方はチャレンジしてみてはいかがでしょうか。
ただ、簡単にできるなら、時間をかけずにササッと作れる方がいいですよね。
今日のまとめ
- ドロワーはスマホ表示など表示領域に制限がある時に重宝する
- jQueryライブラリはjQueryを読み込んでから使用する必要がある
- デザイン変更は検証ツールで調べて適用する
- 自作でも可能、ただしJavaScriptは必要
昨日の時点ではデータ属性について、書いていこうと考えていたのですが
記事のタイトルを書いたら、ドロワーメニューな気分になってしまったので本日はこれで。
では、また。
