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

【问题标题】：Fluid sub sub menu that's wider than parent li | wp_nav_menu比父 li 更宽的流体子菜单 | wp_nav_menu
【发布时间】：2012-03-19 20:57:20
【问题描述】：

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

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

.sub-menu 通常是 postion:absolute 因为它必须挂在某些元素上。但由于某种原因，jsfiddle 没有以这种方式正确显示 .sub.menu。所以在这个例子中它现在是 position:relative。

=====

JSFiddle 示例，我得到它的一部分 http://jsfiddle.net/HYBA7/5/

=====

有什么问题？好吧，我可以显示子菜单，包括子子菜单，但我希望它是流畅的。如果一个子子菜单不适合，它将落在另一个子子菜单下，并带有 float:left;然后子菜单将调整高度。

通常我会这样做：最大宽度：940px；宽度：100%；

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

然后我想给 ul 一个 400% 的宽度（4 x 25% 等于 100%）但这也不起作用。

=====

在这个 ul li ul li ul 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。

谁能帮我解决这个问题？

【问题讨论】：

标签： css wordpress menu navigation fluid

【解决方案1】：

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

我找到了一个 Walker，它为每个子菜单添加了一个类（0 级，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% 的想法。唯一需要的是 left 属性也需要一个以 % 为单位的值。所以我做了这个 -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 显示一切正常。

【讨论】：