沃克類自定義菜單結構

我有一個簡單的菜單，使用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

沃克類自定義菜單結構

回答

相關問題