我正在使用一个自定义导航漫游器来呈现主菜单,在此期间,我想将第二级导航项存储在页面的一个单独区域中,以便稍后使用/呈现。
我希望这些二级导航项目显示块,如果您当前在该部分(即,如果您在“服务”或“服务”的子页面上,则子菜单将显示块)。此外,如果我将鼠标悬停在“服务”上,我希望显示子菜单。
目前,我已经在一个单独的自定义导航步行器中完成了子菜单,但导航仅在您位于该部分时显示,而不是在您将鼠标悬停在主菜单项上时显示。此外,根据当前的设置方式,它会在没有子菜单的页面上显示菜单背景/样式
这是我现有的导航助行器,仅用于子菜单:
class MainSubmenuCustomWalker extends \\Walker_Nav_Menu
{
function start_lvl(&$output, $depth=0, $args=array())
{
if ($depth == 0) {
return;
}
parent::start_lvl($output, $depth, $args);
}
function end_lvl(&$output, $depth=0, $args=array())
{
if ($depth == 0) {
return;
}
parent::end_lvl($output, $depth,$args);
}
// Don\'t print top-level elements
public function start_el(&$output, $item, $depth=0, $args=array(), $id=0)
{
if ($depth == 0) {
return;
}
parent::start_el($output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth=0, $args=array())
{
if ($depth == 0) {
return;
}
parent::end_el($output, $item, $depth, $args);
}
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output)
{
$current_element_markers = array( \'current-menu-item\', \'current-menu-parent\', \'current-menu-ancestor\' );
$current_class = array_intersect( $current_element_markers, $element->classes );
$ancestor_of_current = !empty($current_class);
if (0 == $depth && !$ancestor_of_current) {
return;
}
$id = $element->ID;
if (($max_depth == 0 || $max_depth > $depth+1) && isset($children_elements[$id])) {
foreach ($children_elements[$id] as $child) {
if (!isset($newlevel)) {
$newlevel = true;
//start the child delimiter
$cb_args = array_merge(array(&$output, $depth), $args);
call_user_func_array(array($this, \'start_lvl\'), $cb_args);
}
parent::display_element($child, $children_elements, $max_depth, $depth + 1, $args, $output);
}
unset($children_elements[$id]);
}
if (isset($newlevel) && $newlevel) {
//end the child delimiter
$cb_args = array_merge(array(&$output, $depth), $args);
call_user_func_array(array(&$this, \'end_lvl\'), $cb_args);
}
}
}
从此处调用,即使没有子菜单项,也会呈现菜单容器:(
<div class="main-submenu-navbar navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#main-submenu-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<?php Menu::submenus(); ?>