どうもー白石です。
今日はヘッダーにあるナビメニューをそのままフッターに移動させる簡単な方法を記します。
ヘッダーにあるナビメニュー、これはこれでいいんですけど、人によっては
「このナビメニューをフッターのほうで表示させたいなあ」
という場合もあるかと思います。
私も先ほどクライアント様からご連絡いただき「なるほど～どうしたらいいかな～」と考えてたんですけど割と簡単にできたので、こちらでもシェアしておきます。
PHPとかは特に触りませんので安心してください。
利用するテーマについて
これ結構重要だと思うんですけど、最近SWELLを利用しているのでここでもSWELL利用のやり方を記します。
（白石はライトニングプロとSWELLが大好きなので、たびたびこの2つが出てきます。）
使いやすい上に買い切りなのでおすすめです。
ヘッダーメニューをフッターに移動させてみよう
これもう簡単です。
chromeさえあればいけます。
まずはサイトを作っておきましょう。
フッターに表示させたいメニューなども現時点ではヘッターに表示させたまま作っておきます。
ので、フッターに表示させたいメニューをヘッダー表示で作る感じ。
このサイトで言えば、↓こんなかんじで作っておきます。
chromeブラウザでヘッダーを移動させたいサイトを開き、右クリックすると下の方に「検証」ってあるのでそれをクリックすると、↓みたいなのが出ますので出してください。
- ①の矢印ついた四角をクリックする（左のページがスマホレビュー画面だった場合、この矢印ついた隣の四角押すとPC画面表示なるんで、PC画面表示にしといてください）
- ①押したことで選択できるようになってますから、②のナビメニューあたりにカーソルあててみてください。
- すると③のとこに②で示した部分のタグを表示してくれるんで、ここからナビメニューのタグ探していきます。
うちのサイトだと、「.-parallel-bottom .l-header__gnav」あたりが該当しそうなタグだとあたりをつけてみました。
- 「.-parallel-bottom .l-header__gnav」でナビメニューいじれそうだな！とあたりをつけましたので、ここに試しにpositionなどのタグいれておきます。※1
- タグいれたら無事、ヘッダーにあったナビメニューが移動してくれました。（見づらかったので背景に白入れてますが、見やすくするためだけに入れたので他に意味は特にないです）
※1↓入れたタグ
.-parallel-bottom .l-header__gnav{
position: fixed; /*場所動かさねえぜ！みたいなやつ*/
bottom: 0; /*下にぴったりつけるぜ！*/
background-color: #fff; /*背景は白色にしたいぜ！*/
}
追加CSSはカスタマイズの一番下あたりにあるかと思いますので、そこにタグいれればOKです。
おつさまでした。
おわりに
最初はphpのナビメニューのとこをフッターに移動させなきゃかなあ。
だるい作業になりそうだ。
とか思ってたんですけど、CSSでだいたいいけちゃうので良かったです。
こういう学びがあるのがウェブデザインの楽しいところ。
ワクワクして楽しいですね。では。
白石
