Question

我使用wp_nav_menu提供了以下输出的简单菜单。我想输出以下类型之一：

<ul class="clearfix">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Movies <span class="arrow">&#9660;</span></a>

        <ul class="sub-menu">
            <li><a href="#">In Cinemas Now</a></li>
            <li><a href="#">Coming Soon</a></li>
            <li><a href="#">On DVD/Blu-ray</a></li>
            <li><a href="#">Showtimes &amp; Tickets</a></li>
        </ul>
    </li>
    <li><a href="#">T.V. Shows</a></li>
    <li class="current-item"><a href="#">Photos</a></li>
    <li><a href="#">Site Help</a></li>
</ul>

我真正关心的部分是能够在下拉菜单中对所有菜单项进行<span class="arrow">▼</span>。

注意：菜单中只有两个级别。

Answer 1

您可以将css选择器::after与css属性content: ""结合使用

 .menu__dropdown::after {
    content: " ▼"
}

现在只需将类.menu__dropdown添加到任何具有子菜单的菜单a。观看现场演示：http://jsfiddle.net/8vndhv3j/

Answer 2

您可以使用班级MyClass添加带有CSS的箭头图标。

如果您需要在菜单中添加.menu-item-has-children，可以使用javascript：

<span class="arrow">&#9660;</span>

您还可以创建一个自定义walker类，它将提供有关菜单HTML结构的所有控件，但更复杂。请参阅codex：https://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_custom_Walker_class

具有Walker类的自定义菜单结构

2 个答案: