超级菜单WordPress沃克

时间:2016-08-22 11:53:33

标签: wordpress twitter-bootstrap menu

这是我的菜单结构,我如何建立一个超级菜单步行器,我是怎么做到的?

<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>

1 个答案:

答案 0 :(得分:0)

您可以将您的菜单结构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;