沃克类自定义菜单结构

我有一个简单的菜单，使用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>

我在乎真的部分是insewrt在具有在下拉菜单中的所有菜单项<span class="arrow">▼</span>的能力。

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

来源

2015-10-14 JanvierDesigns

它会更好如果你创建一个小提琴演示... –

您可以组合使用CSS选择::after与CSS属性content: ""

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

现在只是类.menu__dropdown添加到其中有一个子任何菜单a。查看演示：http://jsfiddle.net/8vndhv3j/

来源

2015-10-14 17:39:16 TetraDev

您可以使用类.menu-item-has-children添加带有CSS的箭头图标。

如果您需要确切<span class="arrow">▼</span>添加到您可以使用JavaScript菜单：

$('.menu-item-has-children > a').append('<span class="arrow">&#9660;</span>');

您还可以创建自定义学步车类，这将使所有关于菜单的HTML结构的控制，但更复杂。阅读关于在codex：https://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_custom_Walker_class

来源

2015-10-14 18:10:28 ThemesCreator

如果你正确地阅读我的问题，我想用一个沃克类 – JanvierDesigns

是的，对不起，我现在阅读它的标题 – ThemesCreator

但是我不明白你的问题，是什么问题？你已经创建了沃克班吗？你可以把代码？我们无法告诉您如何在不看代码的情况下修改walker类 – ThemesCreator

沃克类自定义菜单结构

回答

相关问题