WordPressでは、メニューに副項目としてサブメニューを追加して階層化することができます。固定ページの親・子ページを表示する際や、カテゴリを階層化している場合は、サブメニューを有効に活用しましょう。
今回は、WordPressのメニューにサブメニューを追加しドロップダウンメニューで表示されるようにデザインを追加する方法についてご紹介します。
メニューから副項目を設定する
まずは、サブメニューをデザインするために、WordPress管理画面のメニュー画面から副項目を追加しましょう。
※デモでは、特に親ページや階層等を設定していないので通常のカテゴリの下に副項目として別カテゴリを追加します。
WordPress管理画面→『外観』→『メニュー』から副項目を追加します。通常のメニューを追加する場合と同じように追加し、副項目にしたい項目を少しだけ右にずらすことで一つ下の階層の副項目として追加することができます。
メニューの副項目を有効化したら、ブラウザで確認してみましょう。CSSを設定していない状態では、下記の画像のようにメインメニューの下にサブメニューが追加されデザインが崩れてしまいます。
サブメニューのデザインをCSSで整える
副項目を設定してサブメニューを設定すると、WordPrssではulタグに『sub-menu』というclass名が自動で追加されます。
今回は、スマートフォン用の表示をベースに作成し、PC用の表示を@mediaを使用して調整します。どちらを基準にするかは、お好みで変更してください。
また、ヘッダーナビのみサブメニューを追加するので『.header-nav .sub-menu』とCSSセレクタを指定して記述します。
※『.header-nav』の部分は、各自ヘッダーメニューに指定しているidまたはclass名に変更するか『.header-nav』の記述を全て除外してください。
style.cssに記述※@mediaを使用してCSSをレスポンシブデザインにCSSを調整する場合は、headタグでviewportの設定を行なってください
.header-nav .sub-menu:before {
font-family: 'FontAwesome';
font-size: 2em;
position: absolute;
top: -32px;
left: 10px;
content: '\f0d8';
color: #464646;
}
.header-nav .sub-menu {
position: relative;
z-index: 1;
display: none;
width: 95%;
border-top: none;
}
.header-nav .sub-menu li {
display: block;
float: none;
padding: 0;
}
.header-nav li:hover .sub-menu {
display: block;
}
.header-nav .sub-menu li a:before {
color: #333;
}
.header-nav .sub-menu li a {
font-size: 1em;
font-weight: normal;
margin-left: 10px;
padding: 10px 30px 10px 10px;
text-align: left;
color: #fff;
background-color: #464646;
}
.header-nav .sub-menu li a:hover {
background-color: #000;
}
@media (min-width: 768px) {
#header-nav .sub-menu {
position: absolute;
width: 200px;
border-top: 1px solid #eee;
}
}サブメニューは親メニューをホバー(タップ)したときに、表示されるように通常は『display: none;』で非表示にしておきましょう。
また、PCで表示しているときにサブメニューがメインメニューを押し上げてしまわないように『position: absolute;』で配置してください。
PC表示
スマホ表示
デモのCSSをそのまま反映させると、上記の画像のようにサブメニューが表示されます。サブメニューの表示設定は、CSSのを整えるだけで完成です。色や大きさなどはお好みでデザインを変更してください。
意外と忘れがちですが、サブメニューを使用する場合は忘れずにCSSを追加しましょう！