WordPress自定義菜單（三級嵌套問題）

Question

我在使用似乎無法解決的自定義WordPress菜單時遇到了一個問題，因此在進行了很多搜索並在過去幾天中未能解決此問題后，我決定看看是否有人在這里在StackOverflow上可以提供幫助。

請注意：為此，我將使用Walker函數，但是我現在對代碼和設計工作方式的了解已遠遠不夠，我必須以這種方式構建菜單。

我的下拉列表的片段： http : //pastebin.com/8Stfs90c （可以發布，但會釘在屏幕上）。

我在下拉菜單的第3級上遇到了麻煩。 在此圖像中： http : //s13.postimg.org/lxhslt0lz/image.png您可以看到我突出顯示了一個<li></li> （頁面，關於我，關於我們）。 結構如下

Pages (Parent)
    About Me (Parent: Pages)
        About Us (Parent: About Me)

這些很好，但是當轉到第三個下拉列表時，它會剪裁<li>並將其余的Pages子級保留下來，然后將它們放入一個單獨的容器中，而不是將其放入Pages的<li>中。

所以它應該像這樣工作：

Pages (Parent)
    About Me (Parent: Pages)
        About Us (Parent: About Me)
    Right Sidebar (Parent: Pages)
    Left Sidebar (Parent: Pages)
    Our Process (Parent: Pages)

而且，盡管在下拉菜單中看起來像這樣（在視覺上），但正如您在代碼中看到的那樣，它並沒有由此表示。 我認為我遇到的問題是我為關閉</li>所做的檢查是錯誤的。 我遇到這個問題已經有幾天了，但似乎無法解決。 我本打算在基於WordPress的論壇上發布此消息，但它比任何其他問題更多是PHP錯誤。

這是我將鼠標懸停在Pages中應該位於的元素上的快速屏幕截圖： http : //s23.postimg.org/ef4ame6m3/image.png-如您所見，它們與<li>分開了。

要復制此內容，我只是在WordPress中創建了一個菜單結構，並使用了摘錄中的代碼（基本上我只是將其粘貼到index.php文件中）以顯示其表示方式。

我真的希望有人能對此有所幫助，因為這讓我發瘋了，並且在過去幾天停止了我的項目。

對於上面的鏈接表示歉意，我將其直接發布在（屏幕截圖和代碼）中，但我不想擺脫實際的問題。

如果有人設法為我提供解決方案，我很樂意為您購買一兩杯虛擬咖啡！

Answer 1

出於好奇，我可能會遺漏要點，是否有原因為什么不想使用wp_nav_menu（）處理所有這些？

如果在上下文中應用，下面的Ex將為您的主題輸出正確的結構作為您的屏幕截圖？

wp_nav_menu( array( 'container' => 'nav', 'container_class' => 'your-class', 'fallback_cb' => 'wp_page_menu', 'theme_location' => 'primary-menu' ) );

謝謝。

Answer 2

快速瀏覽一下代碼，我想第100-130行正在處理第三個下拉列表。 實際上發生的事情是您在第105行上已經有一個ol，然后通過第122行上的循環再次調用它。

echo "<ol><li><a href='" . $link . "'>" . $t->title . "</a></li></ol>";

我認為問題出在第128行上，您必須從頭刪除ol並為此創建一個新條件。

抱歉，如果我沒有任何幫助，但很難在不看到整個代碼的情況下將其描述出來。 如果您真的被卡住，請在聊天中發送ftp詳細信息，我可以看看。

Answer 3

您好，嘗試使用此CSS代碼創建多個嵌套菜單創建。

header.php中菜單的WP代碼

<nav class="photoshoot-menu">
   <?php wp_nav_menu(array('theme_location'  => 'primary','container' => ' ')); ?>
</nav>

CSS代碼添加您的樣式。

 .photoshoot-menu { float: right; width: auto; padding-left: 0px; padding-right: 0px; } .photoshoot-menu ul { padding-left: 0px; margin: 0px; } .photoshoot-menu > ul li { display: inline-block; position: relative; text-transform: uppercase; margin: 3px 2px; position: relative; } .photoshoot-menu > ul > li > a { color: #212121; display: inline-block; padding: 8px 20px; border: 1px solid #4f4f4f; border-radius: 4px; } .photoshoot-menu > ul > li > a:hover, .photoshoot-menu > ul > li > a:focus, .photoshoot-menu > ul > li.current_page_item > a { background-color: #343434; color: #f45c06; } .photoshoot-menu ul ul { border-radius: 4px; border: 1px solid #4f4f4f; background-color: rgba(38, 38, 38, 0.95); opacity: 0; position: absolute; top: 42px; width: 100%; min-width: 170px; z-index: 1; visibility: hidden; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; } .photoshoot-menu ul li:hover > ul { opacity: 1; visibility: visible; } .photoshoot-menu ul ul li { width: 100%; } .photoshoot-menu ul ul li a { display: inline-block; line-height: 16px; padding: 5px; color: #FFF; width: 100%; } .photoshoot-menu ul ul li a:hover, .photoshoot-menu ul ul li a:focus { color: #f45c06; } .photoshoot-menu ul ul ul { left: 99%; top: 0px; } 

 <nav class="photoshoot-menu"> <ul class="menu" id="menu-all-pages"> <li><a href="#">Home</a> </li> <li><a href="#">Level 1</a> <ul> <li><a href="#">Level 2</a> <ul> <li><a href="#">Level 3</a> <ul> <li><a href="#">Lorem Ipsum</a> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Sample Page</a> </li> </ul> </nav>