WordPress 子菜单

Question

我想用 wp_nav_menu() 在 wordpress 中创建一个水平子菜单；

现在我用 wp_nav_menu 输出整个菜单，但由于孩子是在他们的父母内部输出的，所以我无法制作子菜单。只是一个下拉菜单。

我希望它看起来像这样。 主页、文章、关于和联系方式是页面，灵感、技术和面试是类别。

首页 文章 关于联系方式
灵感科技专访
（如果我按了文章）

所以这就是它的样子：

<ul class="mainmenu">
  <li>Home</li>
  <li>Articles
    <ul class="submenu">
      <li>Inspiration</li>
      <li>Technology</li>
      <li>Interview</li>
    </ul>
  </li>
  <li>About</li>
  <li>Contact</li>
</ul>

这就是我想要的：

<ul class="mainmenu">
  <li>Home</li>
  <li>Articles</li>
  <li>About</li>
  <li>Contact</li>
</ul>
<ul class="submenu">
  <li>Inspiration</li>
  <li>Technology</li>
  <li>Interview</li>
</ul>

有人有想法吗？ ：） 谢谢

Answer 1

不要修改模板代码，您应该使用 css 来完成此操作。

示例如下： http://jsfiddle.net/2G9dQ/1/

Answer 2

使用 wp_list_pages() 而不是 wp_nav_menu() 这样你就可以拥有像这样的主菜单和子菜单：

<ul id="mainmenu">
    <?php wp_list_pages("title_li=&depth=1"); ?>
</ul>
<ul id="submenu">
    <?php wp_list_pages("title_li=&depth=1&child_of=".$post->post_parent ); ?>
</ul>

Answer 3

很抱歉发布第二个答案，但这是一个完全不同的 jQuery 解决方案（尽管只有一行 js）： http:// /jsfiddle.net/AFC2r/。 CSS 显然只是为了让它看起来更清晰。

$(function() {
    $(".mainmenu .submenu").detach().insertAfter('.mainmenu');
});

根据您的需求，soju 的纯 CSS 解决方案当然可能更好。

Answer 4

最简单的方法就是在 wp-admin 中创建 2 个独立的菜单。