如何让步行者做到这一点(在Bootstrap中,我尝试了,但没有工作)

时间:2017-11-27 作者:moses

品牌名称

    <div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
        <ul class="nav navbar-nav">
            <li class="nav-item active"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">About</a></li>
            <li class="nav-item dropdown">
                <a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Services <b class="caret"></b></a>
                    <ul class="dropdown-menu">                  
                        <li><a href="#" class="dropdown-item">Web Design</a></li>
                        <li><a href="#" class="dropdown-item">Web Development</a></li>
                        <li><a href="#" class="dropdown-item">Graphic Design</a></li>
                        <li><a href="#" class="dropdown-item">Digital Marketing</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="#" class="nav-link">Blog</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
            </ul>
            <form class="navbar-form form-inline">
                <div class="input-group search-box">                                
                    <input type="text" id="search" class="form-control" placeholder="Search by Name">
                    <span class="input-group-addon"><i class="material-icons">&#xE8B6;</i></span>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right ml-auto">
                <li class="nav-item"><a href="#" class="nav-link notifications"><i class="fa fa-bell-o"></i><span class="badge">1</span></a></li>
                <li class="nav-item"><a href="#" class="nav-link messages"><i class="fa fa-envelope-o"></i><span class="badge">10</span></a></li>
                <li class="nav-item dropdown">
                    <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle user-action"><img src="https://www.tutorialrepublic.com/examples/images/avatar/2.jpg" class="avatar" alt="Avatar"> Paula Wilson <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="dropdown-item"><i class="fa fa-user-o"></i> Profile</a></li>
                        <li><a href="#" class="dropdown-item"><i class="fa fa-calendar-o"></i> Calendar</a></li>
                        <li><a href="#" class="dropdown-item"><i class="fa fa-sliders"></i> Settings</a></li>
                        <li class="divider dropdown-divider"></li>
                        <li><a href="#" class="dropdown-item"><i class="material-icons">&#xE8AC;</i> Logout</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

1 个回复
SO网友:Mark

我用这个导航器

<?php
class wp_bootstrap_navwalker extends Walker_Nav_Menu {

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat( "\\t", $depth );
    $output .= "\\n$indent<ul role=\\"menu\\" class=\\" dropdown-menu\\">\\n";
}


public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

    if ( strcasecmp( $item->attr_title, \'divider\' ) == 0 && $depth === 1 ) {
        $output .= $indent . \'<li role="presentation" class="divider">\';
    } else if ( strcasecmp( $item->title, \'divider\') == 0 && $depth === 1 ) {
        $output .= $indent . \'<li role="presentation" class="divider">\';
    } else if ( strcasecmp( $item->attr_title, \'dropdown-header\') == 0 && $depth === 1 ) {
        $output .= $indent . \'<li role="presentation" class="dropdown-header">\' . esc_attr( $item->title );
    } else if ( strcasecmp($item->attr_title, \'disabled\' ) == 0 ) {
        $output .= $indent . \'<li role="presentation" class="disabled"><a href="#">\' . esc_attr( $item->title ) . \'</a>\';
    } else {

        $class_names = $value = \'\';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = \'menu-item-\' . $item->ID;

        $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item, $args ) );

        if ( $args->has_children )
            $class_names .= \' dropdown\';

        if ( in_array( \'current-menu-item\', $classes ) )
            $class_names .= \' active\';

        $class_names = $class_names ? \' class="\' . esc_attr( $class_names ) . \'"\' : \'\';

        $id = apply_filters( \'nav_menu_item_id\', \'menu-item-\'. $item->ID, $item, $args );
        $id = $id ? \' id="\' . esc_attr( $id ) . \'"\' : \'\';

        $output .= $indent . \'<li\' . $id . $value . $class_names .\'>\';

        $atts = array();
        $atts[\'title\']  = ! empty( $item->title )   ? $item->title  : \'\';
        $atts[\'target\'] = ! empty( $item->target )  ? $item->target : \'\';
        $atts[\'rel\']    = ! empty( $item->xfn )     ? $item->xfn    : \'\';

        // If item has_children add atts to a.
        if ( $args->has_children && $depth === 0 ) {
            $atts[\'href\']           = \'#\';
            $atts[\'data-toggle\']    = \'dropdown\';
            $atts[\'class\']          = \'dropdown-toggle\';
            $atts[\'aria-haspopup\']  = \'true\';
        } else {
            $atts[\'href\'] = ! empty( $item->url ) ? $item->url : \'\';
        }

        $atts = apply_filters( \'nav_menu_link_attributes\', $atts, $item, $args );

        $attributes = \'\';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( \'href\' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= \' \' . $attr . \'="\' . $value . \'"\';
            }
        }

        $item_output = $args->before;


        if ( ! empty( $item->attr_title ) )
            $item_output .= \'<a\'. $attributes .\'><span class="glyphicon \' . esc_attr( $item->attr_title ) . \'"></span>&nbsp;\';
        else
            $item_output .= \'<a\'. $attributes .\'>\';

        $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
        $item_output .= ( $args->has_children && 0 === $depth ) ? \' <span class="caret"></span></a>\' : \'</a>\';
        $item_output .= $args->after;

        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }
}


public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
    if ( ! $element )
        return;

    $id_field = $this->db_fields[\'id\'];

    // Display this element.
    if ( is_object( $args[0] ) )
       $args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );

    parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}


public static function fallback( $args ) {
    if ( current_user_can( \'manage_options\' ) ) {

        extract( $args );

        $fb_output = null;

        if ( $container ) {
            $fb_output = \'<\' . $container;

            if ( $container_id )
                $fb_output .= \' id="\' . $container_id . \'"\';

            if ( $container_class )
                $fb_output .= \' class="\' . $container_class . \'"\';

            $fb_output .= \'>\';
        }

        $fb_output .= \'<ul\';

        if ( $menu_id )
            $fb_output .= \' id="\' . $menu_id . \'"\';

        if ( $menu_class )
            $fb_output .= \' class="\' . $menu_class . \'"\';

        $fb_output .= \'>\';
        $fb_output .= \'<li><a href="\' . admin_url( \'nav-menus.php\' ) . \'">Add a menu</a></li>\';
        $fb_output .= \'</ul>\';

        if ( $container )
            $fb_output .= \'</\' . $container . \'>\';

        echo $fb_output;
        }
    }
}
然后在菜单数组中调用navwalker,如下所示

<?php /* Primary navigation */
  wp_nav_menu( array(
    \'menu\' => \'top navigation\',
    \'depth\' => 2,
    \'container\' => false,
    \'menu_class\' => \'nav navbar-nav\',
    \'theme_location\' => \'main-nav\',             // where it\'s located in the theme
    //Process nav menu using our custom nav walker
    \'walker\' => new wp_bootstrap_navwalker())
  );
  ?>
代码源代码https://github.com/twittem/wp-bootstrap-navwalker

结束

相关推荐

Making sub-menus exclusive

我真的不知道该怎么解释我在这里找的东西,我在这里找得太露骨了。在我的网站上,我有一个附带菜单,其中包含一系列子类别,每个子类别中都有一些项目。我想知道当我打开另一个子类别时,是否有办法关闭所有其他打开的子类别,例如:1. Animals ----A. Cats ----B. Dogs 2. People ----A. Samantha ----B. Daniel 当我按下“动物”时,我希望“人”关闭,反之亦