最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】给wordpress顶部主菜单底部加上指示条表示当前所处页面

WordPress crifan 650浏览 0评论

一个wordpress站点,希望顶部菜单上面 加上指示

表示当前处于哪个页面

现在的情况是:

进了某个页面,比如首页,关于我们,是没有指示条的:

但是任何页面,鼠标移动到菜单上时,会有指示条的:

然后现在需要去研究如何能加上,不同页面有不同的指示条

鼠标移开就没了:

对应的hover的css是:

css 基于不同页面 显示不同

wordpress 主菜单 指示

WordPress入门 之 设置导航菜单 | WordPress大学

WordPress The 7主题使用教程2.7-顶部栏&导航栏设置 | WP花园

WordPress 的导航菜单:注册菜单位置,显示导航,相关参数,还有激活菜单项 – 宁皓网

“WordPress 会在当前页面的菜单项上添加一个 .current-menu-item 类,如果当前页面是某个菜单项的子菜单,那么在这个父菜单项上会添加一个 .current-menu-ancestor 类。你可以根据这两个类在样式表里添加样式,让用户很容易区分出当前所在的位置属于哪个菜单项。”

那就去找找,此处wordpress中是否有这个.current-menu-item

真的有:

所以就可以去添加:

.current-menu-item #menu > ul > li > a:after {

display: block;

content: "";

width: 30%;

height: 2px;

background-color: #0b3ae5;

position: absolute;

bottom: 20px;

left: 35%;

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

-ms-transition: all 0.2s ease;

transition: all 0.2s ease;

opacity: 0;

}

结果没用。

试了:

.current-menu-item{

display: block;

content: "";

width: 30%;

height: 2px;

background-color: #0b3ae5;

position: absolute;

bottom: 20px;

left: 35%;

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

-ms-transition: all 0.2s ease;

transition: all 0.2s ease;

opacity: 0;

}

有用,但是错乱:

用:

.current-menu-item{

    background-color: #0b3ae5;

}

是可以的设置颜色的:

所以要去搞清楚:

这个current-menu-item的class,如何选择后面的li的a 如何设置css

或者说,如何设置某个class的下面的a的after的内容

css set class a after

::after (:after) – CSS: Cascading Style Sheets | MDN

Adding CSS class on pseudo-element – Stack Overflow

css 某个class 后 如何选择元素

css select element after class

CSS element+element Selector

html – CSS how to select first occurring element after another element – Stack Overflow

CSS Select nth element with class – Mate Marschalko – Medium

css select child elements of class

Child combinator – CSS: Cascading Style Sheets | MDN

css selectors – Apply CSS Style to child elements – Stack Overflow

去试试:

.current-menu-item > a::after {

display: block;

content: "";

width: 30%;

height: 6px;

background-color: #0b3ae5;

position: absolute;

bottom: 20px;

}

结果最底部出现了:

然后发现,其实是生效的了:

然后只是如何去调节位置,确保显示在a的下面了

【总结】

最后是,通过wordpress中的:

.current-menu-item

表示哪个菜单是当前所处页面,如此,再去通过css控制:

最后调试了半天,用:

#menu > ul > .current-menu-item > a::after {

    display: block;

    content: "";

    width: calc(100% – 30px) !important;

    height: 3px !important;

    background-color: #0b3ae5;

    position: absolute;

    bottom: 18px !important;

    opacity: 1 !important;

    left: 15px !important;

}

达到了效果:

主页和其他页面都正常了:

且页面向下滚动后,指示器上移后,显示也正常:

转载请注明:在路上 » 【已解决】给wordpress顶部主菜单底部加上指示条表示当前所处页面

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
63 queries in 0.101 seconds, using 18.67MB memory