-2

这是我要复制的内容：在 brit.co，单击菜单项，文本和图标都从白色变为黑色。在 WordPress 中，我可以将 current-menu-item 设置为 ONE 图标，以便 ONE 图标出现在每个活动页面上，但不能在每个页面上做不同的图标，如 brit.co 所示

显示的代码有效，但同样，每个页面上的活动图标都是相同的。“当前页面项”不尊重我为每个菜单页面设置的样式。我从来没有在 WP 中看到过这种情况，也许不能单独通过 CSS。

#access .menu-style-page-1 a {
background:url('/wp-content/uploads/2012/10/menu-1-white-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}
#access .menu-style-page-2 a {
background:url('/wp-content/uploads/2012/10/menu-2-white-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}
/*** current_page_item styles are below ***/
#access .menu-style-page-1 .menu_bar .current_page_item > a, .menu_bar .current-menu-item > a, .menu_bar .current_page_ancestor > a {
background:url('/wp-content/uploads/2012/10/menu-1-black-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}

#access .menu-style-page-2 .menu_bar .current_page_item > a, .menu_bar .current-menu-item > a, .menu_bar .current_page_ancestor > a {
background:url('/wp-content/uploads/2012/10/menu-2-black-icon.png') no-repeat 0.5em 0.5em transparent;
padding:0 1.2125em 0 2.2em;
}
4

2 回答 2

0

不用太直接地深入研究你的东西，这相当简单。标准菜单类似于

<li id="menu-item-1" class="menu-item menu-item-1"><a></a></li>
<li id="menu-item-2" class="menu-item menu-item-2"><a></a></li>

当你点击一个链接时——它都会添加一个类current-menu-item

你可以在 CSS 中做这样的事情

#menu-item-1.current-menu-item { background: #f00; /*red*/ }
#menu-item-2.current-menu-item { background: #0f0; /*green*/ }

此外，在外观 > 菜单设置中，您可以单击“屏幕选项”并选中“类”框，然后您可以添加自定义类，这样您就可以

.aboutus.current-menu-item { background: #f00; /*red*/ }
.contactus.current-menu-item { background: #0f0; /*green*/ }

您需要在外观 > 菜单中为每个菜单项添加一个类。在你的 CSS 中，你需要做

.your-class.current-menu-item { background-image: icon1.png no-repeat; }
.other-class.current-menu-item { background-image: icon2.png no-repeat; }

在上面的例子中，.current-menu-item 永远不会有背景图像，只有当它涉及另一个类时。

如果它被覆盖，则意味着您有以下内容：

.your-class.current-menu-item { background-image: icon1.png no-repeat; }
.current-menu-item { background-image: BADicon.png no-repeat !important; }

上面的代码将不起作用，因为“CASCADING”样式表规则.current-menu-item覆盖了您上面的各个样式。（并且 !important 帮助它覆盖）。

如果您删除个人的任何实例.current-menu-item并且只有这样做.your-class.current-menu-item才会起作用。

于 2012-10-19T18:58:19.433 回答
-1

解决了。不适用于 current-menu-item，因为后续条目会覆盖，按设计假设，并且看起来必须修改 php.ini 文件。

解决方案很简单：使用菜单 id 添加一种样式，使用页面 id 添加每页样式，因此：

菜单：li#menu-item-26 a {background:url('whiteicon.png') no-repeat; 左填充：2em}

菜单如何按页面显示： .page-id-2 li#menu-item-26 {background:url('blackicon.png') no-repeat; 左填充：2em}

于 2012-10-20T11:44:31.183 回答