一直想给导航菜单加一个这样的功能:点击导航菜单后使导航菜单突出显示目前所在类,起初想用Jquery的addClass去实现,奈何Jquery也是半吊子水平,弄了半天还是没成功。今天无意中发现点击WordPress导航以后,菜单列表项所在类会自动增加一个Class:.current-menu-item,即<li class="current-menu-item ">...</li>。下面就很简单了,使用CSS对li下的a进行修饰。如下:

li.current-menu-item a{
border-top:4px solid #555;
background:#ED83ED;
line-height:34px !important;
}

这个是我目前列表项突出显示的CSS,你可以任意点击一个菜单查看效果。

用力找方法,却不知道方法就在眼前,其实WordPress还是挺好的,很多默认的功能我们都没有发掘出来,多看官方文档还是有好处的。

如果想查看关于菜单项的另一个小技巧,那么请移步《用CSS单独修饰WordPress中的菜单项》。

Last modification:April 11th, 2020 at 09:18 pm
如果觉得我的文章对你有用,请随意赞赏