デイトラWeb制作コース中級編DAY25 スマホ時のドロワーメニューを作る②

ドロワーのコーディングcover編 jQuery

※厳密には今回作るメニューはドロワーではないですが、便宜上ドロワーと呼びます

前回と全く同じコードなので、ひとつ前の記事をご覧ください。

あわせて読みたい

デイトラWeb制作コース中級編DAY25 スマホ時のドロワーメニューを作る① 色んな作り方がありますが、私はデイトラの回答例の方法で作りました。各種ライブラリを使用する方法については以下のページをご覧ください。 https://haniwaman.com/dr...

ドロワーのコーディングcover編 HTML

こちらも前回の記事とほとんど同じです。違う点は以下の2つです。

• drawer-backgroundは要らない
• その下のボックスにはdrawer-content-coverというクラス名をつける

ドロワーのコーディングbase編 CSS

まず、_variables.scssなどに以下の項目を設定しておきます。

$drawer-bar-space: 4px;
$drawer-bar-width: 22px;
$drawer-bar-height: 4px;

以下もほとんど前回と同じなので違う部分だけ解説します。

.drawer-icon

&.is-checkedが要りません。あとは同じです。

.drawer-bars

前回と同じ。

.drawer-bar

細かい部分になりますが、前回のtransitionの0.3sの部分が0.5sになっています。

.drawer-contentcover

• overflowプロパティは不要
• ボタンがクリックされていない時はvisibilityとopacityで隠す
• transformは最初から0(上記プロパティで操作のため)
• 横幅100％のためleft/rightは不要
• max-widthも100％
• transitionはeaseでなくlinear
• 背景色はメインカラー
• padding-topを広く開ける。
• &.is-checked(メニュー展開時)はvisibilityとopacityで操作
• ulに幅を指定して、margin: 0 auto;で真ん中に持ってくる
• liはpaddingの値をカンプから読み取って入力
• 文字色を白に

以上です。次は「スムーススクロールとフローティングアイテムを作る」です。