Question

使用wp_nav_menu Wordpress创建了一个易于维护的漂亮导航。目前，导航具有子菜单和子菜单。当您将鼠标悬停在链接2上时，将打开一个大子菜单，其中包含5个子菜单及其下方的子菜单（这样您就可以看到菜单下的内容）。

原始菜单的JSFiddle示例 http://jsfiddle.net/tSLqV/1/

通常.sub菜单将是postion：absolute，因为它必须挂起一些元素。但由于某些原因，jsfiddle没有以这种方式正确显示.sub.menu。所以在示例中它是position：relative now。

=====

JSFiddle示例，我让它为一部分工作 http://jsfiddle.net/HYBA7/5/

=====

有什么问题？那么我可以显示子菜单，包括子子菜单，但我希望它是流畅的。如果子子菜单不适合，它将落在其他子菜单下面，浮动：左;然后子菜单将调整高度。

通常我会这样做：最大宽度：940px; 宽度：100％;

问题是这个ul是嵌套的。当我使用100％时，由于li父级，它将显示25％的所有元素。不知道为什么它与第二个JSFiddle一起工作......

然后我考虑给ul宽度为400％（4 x 25％使得100％）但是这也不起作用。

=====

在这个ul li li li li mess乱花了2天之后，我一直在寻找一种不同的方法。如果我可以摆脱所有这些ul li怎么办？而且有一个div（不确定这是否是一个好方法）。然后div不会有父的宽度问题？看看Wordpress Codex，我发现可以删除第一个ul并更改一些类，但这就是它。

我不确定第4.7部分是通过向菜单项添加条件类，因为它仍然具有ul li，宽度将取决于父ul li的含义。

我已经阅读过有关Walkers的内容，但我没有设法让ul.sub-menu变换为div元素。

=====

我知道可以加载一个带子子菜单的5个子菜单的额外菜单，然后让它用jQuery插入，但我喜欢在没有javascript帮助的情况下使用它并使其成为css。

任何人都可以帮我解决这个问题吗？

Answer 1

好的，我已经设法使子菜单流畅。

我发现Walker为每个子菜单添加了一个类（level-0，level-1）。

 class UL_Class_Walker extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"level-".$depth."\">\n";
  }      
}

然后我再次研究了400％的想法。唯一需要的是左边的属性也需要一个％的值。所以我做了-100％（因为有4个父菜单项 - 它需要在整个菜单上对齐）

li#menu-item-23 ul.level-0 {
position: absolute;
display: none;
/*width: 940px;*/
max-width: 960px;
width: 400%;
left: -100%;
background: #fff;
z-index: 100;

}

稍后会在IE中测试，但Firefox和Safari会正确显示所有内容。

流体子子菜单比父li |更宽wp_nav_menu

1 个答案: