SPで下に固定メニューがあるパターンです。いつでもアクションできて便利ですね！
目次
フッターのコーディングFixed編 HTML
フッターの更に下にメニューを作っていきます。ナビゲーションなのでnav要素を使います。その中にインナーを作り3つのメニューを作ります。メニューのひとつ一つはアイコンとテキストです。2つまとめてaタグで括ります。
フッターのコーディングFixed編 CSS
ほとんどbase.scssと同じなので共通部分は省略します。変更・追加のある部分のみ解説します。
.footer
SP版で下パディングを広く空けてコピーライトがメニューに隠れないようにします。
.footer-fixed-menu
ボタン3つを包むボックス。display: none;でPC版では非表示にします。position: fixed;で下に固定。bottom、leftそれぞれ0でぴったり下につけます。z-indexの値を大きくして、上へ戻るボタンの次に来るようにします。
SP版ではflexにし、メニューを横並びにします。
.footer-fixed-menu__link
メニューひとつひとつ。widthは3等分の値を入れます。右ボーダーを引き白背景に。文字を中央寄せにします。パディングをとって余裕を持たせます。高さは継承。
最後のメニューのみボーダーをなしにします。
aタグはdisplay: block;に。テキストの装飾はなしにします。文字色をベースカラーに。line-heightを狭めにしてボタンと文字が離れすぎないようにします。
.footer-fixed-menu__icon
メニューのアイコン。img要素に幅をpx指定します。
.footer-fixed-menu__title
メニューの文字。フォントサイズを小さめに、太字にします。上マージンを少しあけ、アイコンとの間隔をとります。
以上で終わりです。お疲れ様でした！最後にPerfectPixelでズレチェックをします。
コメント