問題
Wordpressのカスタムメニュー（外観 ＞ メニュー）のアクティブのものにcssを設定するには？
解決策
アクティブ時、メニューのliタグにクラス「current-menu-item」、親のliにはクラス「current-menu-parent」または「current-menu-ancestor」が付与されるので、そのクラスに対してcssの設定を行うことで反映できる。
WordPressのカスタムメニューのアクティブの判定方法
WordPressのカスタムメニューはアクティブ時、メニューのliタグにクラス「current-menu-item」、親のliにはクラス「current-menu-parent」または「current-menu-ancestor」が付与されます。
そのクラスに対してcssの設定を行うことでアクティブ時の設定を反映することができます。
アクティブ時のcssの設定例
実際に使用する記述例は以下になります。
/* アクティブのメニュー */
li.current-menu-item{
font-weight: bold;
}
/* アクティブのメニューの親 */
li.current-menu-parent{
font-weight: bold;
}
/* アクティブのメニューの先祖 */
li.current-menu-ancestor{
font-weight: bold;
}
コメント