超级菜单 WordPress 步行者答案

【问题标题】：Mega menu WordPress walker超级菜单 WordPress 步行者
【发布时间】：2016-12-28 23:11:10
【问题描述】：

这是我的菜单结构，我如何构建一个大型菜单步行器，我是如何做到的？

<nav>
    <ul class="main-nav navbar-right">
        <li class="active dropdown"><a href="#">Home</a>
            <div class="sub-menu">
                <ul class="home">
                    <li><a href="index.html">Home</a></li>
                    <li><a class="last" href="index-2.html">Home2</a></li>
                </ul>
            </div>
        </li>
        <li class="dropdown"><a href="#">Pages</a>
            <div class="mega-menu pages">
                <span class="mega-menu-list">
                    <a href="">Blog1</a>
                    <a href="">Blog2</a>
                    <a href="">Blog3</a>
                </span>
                <span class="mega-menu-list">
                    <a href="">Single Blog 1</a>
                    <a href="">Single Blog 2</a>
                    <a href="">Single Blog 3</a>
                    <a href="">Single Blog 4</a>
                </span>
                <span class="mega-menu-list">
                    <a href="">404 Page</a>
                    <a href="">Contact Us</a>
                </span>
            </div>
        </li>
        <li class="dropdown"><a href="#">Sport</a></li>
        <li><a href="#">Travel</a></li>
        <li><a href="#">Lifestyle</a></li>
        <li><a href="#">Tech</a></li>
        <li><a href=">Contact Us</a></li>
    </ul>
</nav>

【问题讨论】：

请向我们展示您已经尝试过的内容。

标签： wordpress twitter-bootstrap menu

【解决方案1】：

您可以将您的菜单结构 HTML 放入此代码中。

/* Drop Down Menu */
class ik_walker extends Walker_Nav_Menu{
function start_lvl(&$output, $depth) {
    if($depth == 0){
        $output .= 'HTML Start Here for Parent Menu
                    ';
    }
    if($depth == 1){
        $output .= '<ul class="sub-child"> Start Here for child Menu';
    }
}
function end_lvl(&$output, $depth) {
    if($depth == 0){
        $output .= 'End For Parent Menu

                    ';
    }
    if($depth == 1){
        $output .= '</ul> End for child';
    }
}
}

并在菜单中使用此功能。

if ( has_nav_menu( 'primary' ) ) :
                    wp_nav_menu( array(
                        'theme_location' => 'primary',
                        'menu_class'     => 'horizontal_links navigations',
                        'container' => '',
                        'depth'           => 3,
                        'walker' => new ik_walker()
                     ) );
                endif;

【讨论】：