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>并留下其余的页面子项并将它们放入一个单独的容器而不是<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错误。

这是一个快速截图，我将鼠标悬停在应该位于页面中的元素： http://s23.postimg.org/ef4ame6m3/image.png - 因为您看到它们与{{{ 1}}。

为了复制这一点，我所做的只是在WordPress中创建了一个菜单结构，并使用了代码片段中的代码（基本上我只是将其粘贴到index.php文件中）来显示它是如何＆＃＃39;被代表。

我真的希望有人可以帮忙解决这个问题，因为这让我很生气，过去几天对我的项目表示不满。

对上述链接表示道歉，我会将它们直接发布在（截图和代码）中，但我并不想解决实际问题。

如果有人设法为我提供解决方案，我非常乐意为您购买虚拟咖啡或两个！

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>

WordPress自定义菜单（第3级嵌套问题）

3 个答案: