创建自填充菜单并向菜单布局添加额外的div

时间:2015-03-08 作者:laura.f

我正在努力实现的目标:

具有一级子菜单的菜单:

PAGE 1<br>
--- Page 1 sub-page 1<br>
--- Page 1 sub-page 2<br>
PAGE 2<br>
--- Page 2 sub-page 1<br>
--- Page 2 sub-page 2<br>
--- Page 2 sub-page 3<br>
PAGE 3<br>
--- Page 3 sub-page 1<br>
--- Page 3 sub-page 2<br>
在第1页时,在顶层页面下方的一节中显示所有第1页子页面。在第1页时(&A);将鼠标悬停在第2页上,在顶层页面下方的一个部分中显示第2页的所有子页面

要在我的网站上正确显示此内容,我需要添加div 内部ul.sub-menu

<ul>
  <li><a>...</a>
    <ul class="sub-menu">
      <div class="container">
        <li><a>...</a></li>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </div>
    </ul>
  </li>
</ul>
为此,我尝试创建一个Walker类,但当我将其添加到wp\\u nav\\u menu()函数中时,它会一起删除菜单。这是我使用的Walker类:

class custom_wp_walker extends Walker_Nav_Menu{
  function start_lvl(&$output, $depth) {
    $output .= \'<ul class="children"> 
                  <div class="container">\';
  }
  function end_lvl(&$output, $depth) {
    $output .= \'
        </div>
        </ul>\';
  }
}
现在,为了让我的菜单能够自我填充,我没有在wordpress后端创建菜单(外观->菜单)。如果我删除walker类,它会添加所有菜单项,包括前端的子项。我就是不能把它做得很好。

但是,如果我在后端创建菜单并手动添加我拥有的项,Walker类就会工作并添加额外的div。问题是子项不会自动添加,我需要它们。Walker类是否需要在后端手动添加页面才能工作?

我为之建立网站的人在技术上有点困难,所以它需要自己填充,因为他们自己做不到。

所以,我的问题是如何在ul.sub-menu 还有一个完全自填充的菜单?除了步行课还有别的路吗?我试着在谷歌上搜索出一个解决方案,但没有找到任何其他方法。

1 个回复
最合适的回答,由SO网友:mrmadhat 整理而成

您的html结构应该如下所示

<ul class="parent-class">
  <li>Page 1</li>
  <li>
    <ul class="child-class">
      <li> Sub menu item 1</li>
      <li> Sub menu item 2</li>
    </ul>
  </li>
</ul>
Wordpress应该自动向活动页面添加一个“活动”类,然后您应该能够使用css设置所有内容的样式。类似于

.parent-class li ul {
   Display:none;
}

.Active li ul {
   display:block;
}

.parent-class:hover > .parent-class li ul {
   display:block

}

结束

相关推荐

自定义Walker_NAV_MENU以在项目为类别时显示帖子

我想定制导航菜单漫游器,这样当它遇到一个类别时,它会自动生成菜单项的5个最新帖子子项。有没有一种方法可以动态地将项目添加到菜单对象,或者在start\\el函数中设置一个条件更好?