web制作のしおり

日々の学習をアウトプットします。

61.ドロワーメニューを作る ~自作か、ライブラリか~

本日はドロワーメニューを作っていきます。

 

本当はデータ属性について考えていたんですが、

 

ドロワーメニューは

ハンバーガーアイコン等をクリックすると「にゅるっ」と出てくるあれです。

スマホ表示など表示領域が狭い時などに重宝します。


こんな感じのやつです(雑

 

では、さっそくやっていきましょう。

 

drawerライブラリを使う

ライブラリを使って、作っていきましょう。

今回使うdrawerライブラリは「JavaScriptライブラリ」ではなく、

jQueryライブラリ」です。

何が違うのかと言えば、

jQueryの記述で書かれているから、jQueryを読み込んでから使う必要がある

くらいの簡単なイメージでいいと思います。

あまり難しく考えずにトライしていきましょう。

 

公式サイトから必要なものを引っ張ってくる

git.blivesta.com

公式サイトへ行くと、

ご丁寧に

STEP1~STEP3

の案内がありますので、それに従っていきましょう。

というか、STEP3で完結は優しいですね。

 

まず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は必要

昨日の時点ではデータ属性について、書いていこうと考えていたのですが

記事のタイトルを書いたら、ドロワーメニューな気分になってしまったので本日はこれで。

 

では、また。