色んな作り方がありますが、私はデイトラの回答例の方法で作りました。各種ライブラリを使用する方法については以下のページをご覧ください。
https://haniwaman.com/drawer-js/
https://haniwaman.com/hiraku-js/
自作する場合はこちら。
https://mdstage.com/web/jquery/drawer-menu
ドロワーのコーディングbase編 jQuery
jQueryの読み込みはCDNを使いました。以下のコードをHTMLに直書きか別ファイルを用意します。
※こちらは回答例のコード解説です。動画とは書き方が異なります。
以下コードと解説です。
jQuery(".js-drawer").on("click", function(e) { /* .js-drawerがクリックされた時に */
e.preventDefault(); /* aタグの動きを無効に */
let targetClass = jQuery(this).attr("data-target"); /* 変数targetClassに代入⇦thisが指す.js-drawerのdata-target属性の値、for-drawerを取得 */
jQuery("." + targetClass).toggleClass("is-checked"); /* .for-drawerクラスにis-checkedを付与 */
return false; /* 親要素へのイベント伝播を止める */
});ドロワーのコーディングbase編 HTML
ヘッダーとメインビジュアルの間にボタンとメニューを作っていきます。
ハンバーガーボタン＆ドロワーは色んな作り方がありますが、私ははにわまんさんの方法で作りました。
https://haniwaman.com/template/javascript/
↑の.js-drawerの、使用例のところを参照してください。ちょっと違いますが大枠ではこんな感じです。ポイントは、data属性を使うところです。data-targetに値を設定しておくことで、JSに渡すことができます。
ドロワーのコーディングbase編 CSS
まず、_variables.scssなどに以下の項目を設定しておきます。
$drawer-bar-space: 4px;
$drawer-bar-width: 22px;
$drawer-bar-height: 4px;
$drawer-content-width: 200px;.drawer-icon
次にハンバーガーボタン(ハンバーガーアイコン)。SP版だけ表示されるようにしたいのでPC版はdisplay: none;にしておきます。
position: fixed;で位置を固定。rightとtopで位置を調節します。
気をつけないといけないのが要素の重なり順です。最初に作っておいたlayer変数をmap-getで取得します。ポイントはプラス1にしておくことです。こうする事で、ドロワーよりハンバーガーボタンが前面にきます。
text-align:center;で要素を中央寄せにします。カーソルはホバーすると指マークになるようにします。いつも通りtransitionを設定してなめらかに動くようにします、
背景はtransparentにして透過ボタンにします。box-shadowとborderはなしに。paddingは0にしてカツカツにします。
ボタンをクリックした時(is-checkedが付与された時)水平方向左にドロワーの幅分スライドするように、マイナスの値を指定しておきます。最初に定義した変数を使います。
SP版ではdisplay: block;にします。
.drawer-bars
三本の線を束ねるクラス。display: inline-block;にし、幅と高さ、vertical-alignが指定できるようにします。
幅と高さは最初に定義したものを用い、四則計算を使って指定します。ちょっとした頭の使い所ですね。
position: relative;にし、三本の線を乗せる下地を作ります。垂直方向下揃えにします。
.drawer-bar
三本の線の一本一本。ここはクラスを予めtop,middle,bottomなど分けて実装してもいいですし、回答例のように擬似要素を使ってもいいですね。
まず三本共通の指定から。.drawer-barsに対してpositionをabsoluteにします。左右ともに0に。(枠にカッチリハマるようなイメージ)幅は100％にして左右の隙間なく。
高さは最初に定義したものを用います。角丸は付けずにカクカクで。transitionはlinearで変化を一定に。
ここからは擬似要素を使って線の一本ずつを上から順番にスタイリングしていきます。
- nth-of-type(1)⇨topを0に
- nth-of-type(2)⇨隙間と線の高さ分topを空ける
- nth-of-type(3)⇨隙間と線の高さ分×2 topを空ける
ここからがクリックされた時の×マークの表示です。2本の線をクロスさせる動きをつけます。
is-checed(メニューが開いた状態)に入れ子する形で
- nth-of-type(1)⇨topを10に transformでマイナス斜め45度の線に
- nth-of-type(2)⇨透明に
- nth-of-type(3)⇨topを10に transformで斜め45度の線に
.drawer-background
その名の通りドロワーの背景です。PC版ではdisplay: none;にしておきます。positionは固定で追従するようにします。
ここでも重なり順に注意です。今度はドロワーからマイナス1にすることでメニューの背面にレイヤーが来るようにします。
top,leftともに0、widthとheight共に100％にする事で、メニューの背景が隙間なく埋まるようにします。backgroundは黒で、しかしメニューが閉じている状態ではopacity: 0;なので透明状態ですね。transitionはいつも通り滑らかムーブに。
is-checked(メニューが開いた状態)になって初めてその姿が現れます。display:block;にしてブロック要素にチェンジ、opacity: 0.8;にして、黒い半透明のフィルターがかかったようにします。
.drawer-content
これがドロワー(メニュー)本体ですね。縦長の画面になります。
overflow: auto;で、はみだしが生じた時のみスクロールバーを出すようにします。おそらくほとんどの場合大丈夫でしょう。
このブロックも固定します。topとrightを0にする事で、画面右上にくっつくような形にします。bottomとleftはautoに。
transform: translateXの値を105%にする事で右側にメニューが隠れます。イメージが湧かなかったら検証ツールで数値を変えてみてください。
ここでも重なり順が出てきます。ドロワー本体なので最初に定義したdrawerの値を取得します。横幅も最初に定義した変数を使います。max-widthを設定する事で広がりすぎないようにします。高さは100％にし、縦幅を画面いっぱいにします。
背景は白。いつも通り滑らかムーブにします。テキストは左寄せに。文字色はカンプから読み取ったグレーに。
is-checked(メニューが開いた状態)では隠していたメニューを引き出します。translateXを0にする事で、本来の表示位置に戻します。box-shadowが付いてますが、これは差がよく分かりませんでした。後でSlackで質問してみます。
ここからはメニューの文字周りのスタイルです。
ulは先頭のドットを外します。marginとpaddingを0にし、親要素にぴったり被さるようにします。
ここからはボタンのコーディングノックの知識が生きてきますね。liには破線の下線を引きます。a要素は装飾なしに。position: relative;とし、後でアローアイコンを乗せる下地を作ります。paddingをとって高さと幅を出します。色はカンプから読み取ったグレーを。
擬似要素afterでいつもの感じでアローアイコンをつけます。入れ子が5重にもなりますがカッコの過不足のないように。
お疲れ様でした！次は画面全体を覆うタイプのメニューを作成します。
コメント