SWELL│フッターのサブメニューを開閉表示する方法

ヘッダーメニューの様にフッターメニューにもサブメニューを表示したい!ということはないでしょうか?

SWELLのデフォルトだとサブメニューも、そのまま表示されてしまいます。

本記事ではフッターのサブメニューをホバーで表示するようにしてみました。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

SWELLでフッターのサブメニューをホバーで表示する方法

SWELLでフッターのサブメニューをホバーで表示する方法はCSSを加えるだけなので、非常に簡単です。

またCSSで表示・非表示するのでGoogleのクローラーもリンクを認識してくれます。

STEP
フッターにサブメニューを作成する

管理画面>外観>メニューからフッターから表示したいリンクを作成します。

このままの状態だと、サブメニューは表示されたままです。

STEP
CSSを挿入する

管理画面>外観>テーマファイルエディタのstyle.css

にCSSを挿入します。

.l-footer {
   z-index: 1;
}
.l-footer__nav > li {
  position: relative;
}
.l-footer__nav li li {
    height: 0;
    overflow: hidden;
}
.l-footer .sub-menu {
    position: absolute;
}
.l-footer__nav> li:hover ul {
    bottom: 1em; /*サブメニューの高さを調整*/
    white-space: nowrap;
    background-color: #f5f5f5;
    padding: 12px 2px 0 2px;
}
.l-footer__nav li:hover > ul > li {
    height: 2rem;
    overflow: visible;
}
@media (min-width: 600px){
	.l-footer__nav .sub-menu a {
		border-right: none;
	}
	.l-footer__nav .sub-menu li:first-child a {
		border-left: none;
	}
}

あとはフッターメニューを確認しましょう。

以上です。

まとめ

フッターにはサイトに直接関係しないけど、リンクしておきたい情報を入れたいですよね。

今回のカスタマイズはそのリンクをさりげなく入れておくことができます。

気になった方は是非、試してみてください。

目次