グローバルメニューを簡単にレスポンシブ対応でかっこよく設置できるWordPressプラグイン「Max Mega Menu」

本記事では『賢威7』に「Max Mega Menu」を設置して、サブメニューのデザインを変更した事例をご紹介します。

何もデザインを変更していないデフォルト状態

この画像の段階では、デザイン変更を一切していない状態で、リスト文字の行間が広く、横幅も短いため、大変読みづらいです。

デザイン変更後の完成イメージ

横幅を広くして、リストマークも付けました。スマホで改行しても読みやすい行間の高さに設定しています。

適用したCSSの内容

今回のサンプルでは『賢威』の子テーマで運用しています。そのため、子テーマディレクトリの「base.css」に以下を記述します。

.global-nav-in ul.mega-sub-menu{
	background-color:#FFF !important;
}
.global-nav-in ul.mega-sub-menu li a{
	line-height: 1.25em !important;
	width: 300px !important;
	padding: 10px !important;
	background-color:#FFF !important;
	color:#333 !important;
	margin-left:16px !important;
}
.global-nav-in ul.mega-sub-menu li a:before{
	content: "\f054" !important;
	font-family: FontAwesome !important;
	padding-top: 1px !important;
	color:#FC0 !important;
	margin-left:-16px !important;
}
.global-nav-in ul.mega-sub-menu li:hover,
.global-nav-in ul.mega-sub-menu li a:hover{
	background-color:#FFC !important;
}

横幅を取り急ぎ「300px」に変更して、サブメニューにある程度の文字数があっても改行しないようにしました。

行間も「line-height: 1.25em」として、改行されたとしても読みやすくしています。

また、リストマークは「Font Awesome」というアイコンフォントを利用しています。Font Awesomeについては以下の記事をご参考ください。

関連記事賢威7でWebアイコンフォント「Font Awesome」を実装する方法