编辑导航菜单的(自动)HTML布局

时间：2012-06-20 作者：bryceadams

我在函数中注册了菜单。php，从header调用它。php并在外观>菜单后端进行设置。问题是，我需要手动在周围插入一个div<ul class="sub-menu"> ... </ul> 我的下拉菜单在哪里。

没有办法像将div的类添加到ul中那样解决问题，因为为了使其下拉功能正常工作，必须以这种方式插入，以便我的代码可以：

<div class="dropdown">
    <ul class="sub-menu">
        <li>
        <a href="#">Menu Item</a>
        </li>
    </ul>
</div>
有没有什么简单的方法<div class="dropdown"> 和</div> 轻松参与？或者唯一的方法是写剧本吗？

非常感谢。

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

更新：问题实际上是如何包装子菜单，而不是整个菜单。这里有两个选项：

使用jQuery：

<script type="text/javascript">

// run this before the script that sets up the dropdowns:
jQuery(document.ready(function($){
    $(\'.sub-menu\').wrap(\'<div class="dropdown"></div>\');
})

</script>
使用PHP 5.3+（选项稍微复杂一些，但我想我会发布它）：

<?php
$dom = DOMDocument::loadHTML(wp_nav_menu(array(
    \'menu\' => \'main\', // change this to your theme location
    \'echo\' => false,
)));

// Find all uls
$uls = $dom->getElementsByTagName(\'ul\');

// Find & wrap each sub menu
foreach ($uls AS $ul) 
{
    if ($ul->getAttribute(\'class\') == \'sub-menu\')
    {
        // create the dropdown wrapper div
        $wrapper = $dom->createElement(\'div\');
        $wrapper->setAttribute(\'class\', \'dropdown\');

        // Replace ul with this wrapper div
        $ul->parentNode->replaceChild($wrapper, $ul);

        // Append this ul to wrapper div
        $wrapper->appendChild($ul);
    }
}
echo $dom->saveHTML($dom->getElementsByTagName(\'div\')->item(0));

?>
//旧答案：

查看container_class 选项wp_nav_menu(): http://codex.wordpress.org/Function_Reference/wp_nav_menu

您的菜单ul 将自动包装在div中；可以使用该选项设置div的类：

<?php
wp_nav_menu(array(
    \'theme_location\' => \'my_location\', // change this to your theme location
    \'container_class\' => \'dropdown\',
));
?>

SO网友:Devin

我不知道我是否遗漏了什么，但我知道您需要的是以下简单内容：

<div class="dropdown">
<div class="whatever">
<?php
wp_nav_menu(array(
\'theme_location\' => \'my_location\', // change this to your theme location
\'container_class\' => \'dropdown\',
));
?>
</div>
</div>
但我还是不知道我是否理解你的问题

结束
标签： menus   小码农  

相关推荐

allow editors to edit menus?

我希望能够授予我的编辑更改菜单的权力，这可以做到吗？“外观”选项卡似乎根本不是一个选项，我可以这样做吗？