Yii2:创建自定义菜单

Yii2:创建自定义菜单,yii2,yii2-widget,Yii2,Yii2 Widget,我已经构建了一个引导菜单,现在我想用yii2nav小部件复制它。这里是初始状态: <nav class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="c

我已经构建了一个引导菜单,现在我想用yii2nav小部件复制它。这里是初始状态:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">BrandLogo</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" aria-expanded="true">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#1" class="current">simple menu</a>
                </li>
                <li class="dropdown">
                    <a href="#4">dropdown menu <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#2">Submenu#1</a>
                        </li>
                        <li>
                            <a href="#3">Submenu#2</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" action="/action_page.php">
                <div class="form-group has-feedback search">
                    <input type="text" class="form-control" placeholder="Search" />
                    <i class="glyphicon glyphicon-search form-control-feedback"></i>
                </div>
            </form>
        </div>
    </div>
</nav>

切换导航
下面是它的样子:

现在我想用Nav小部件做同样的菜单。代码如下:

NavBar::begin([
    'brandLabel' => 'BrandLogo',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar-inverse',
    ],
]);

$menuItems = [
    [
        'label' => 'simple menu',
        'url' => ['#1']
    ],
    [
        'label' => 'dropdown menu',
        'url' => ['#4'],
        'items' => [
            [
                'label' => 'Submenu#1',
                'url' => ['#1'],
            ],
            [
                'label' => 'Submenu#2',
                'url' => ['#2'],
            ],
        ]
    ],
    [
        'label' => '
            <form class="navbar-form navbar-left" action="/action_page.php">
                <div class="form-group has-feedback search">
                    <input type="text" class="form-control" placeholder="Search" />
                    <i class="glyphicon glyphicon-search form-control-feedback"></i>
                </div>
            </form>',
        'encode' => false,
        'url' => false,
    ],
];


if (count($menuItems)) {
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav'],
        'items' => $menuItems,
    ]);
}

NavBar::end();
导航栏:开始([ “brandLabel”=>“BrandLogo”, 'brandUrl'=>Yii::$app->homeUrl, “选项”=>[ “类”=>“导航条反向”, ], ]); $menuItems=[ [ “标签”=>“简单菜单”, 'url'=>['#1'] ], [ “标签”=>“下拉菜单”, 'url'=>['#4'], '项目'=>[ [ “标签”=>“子菜单#1”, 'url'=>['#1'], ], [ “标签”=>“子菜单#2”, 'url'=>['#2'], ], ] ], [ '标签'=>' ', 'encode'=>false, 'url'=>false, ], ]; 如果(计数($menuItems)){ echo导航::小部件([ '选项'=>['类别'=>'导航栏导航'], 'items'=>$menuItems, ]); } NavBar::end(); 问题是结果并不相等。我发现了一些问题:

  • 小部件生成下拉链接,如
    如何摆脱
    数据切换=“dropdown”
    类=“dropdown toggle”
  • 搜索表单被包装到
    
    我怎样才能去掉不必要的标签

  • 这是因为您没有遵循实际的HTML结构,根据这一点,您需要在
    ul
    之后添加表单,而不是在
    li
    中添加表单,但是该表单应该是
    NavBar
    的一部分,并且如果您查看定义的话

    包含在
    \yii\bootstrap\begin()
    \yii\bootstrap\end()
    导航栏。您可以使用诸如
    yii\bootstrap\Nav
    \yii\widgets\Menu
    来构建此类内容

    因此,在调用
    Nav::widget()
    之后和调用
    NavBar::end()
    之前,只需将表单移到
    $items
    之外

    您可以使用
    linkOptions
    自定义或删除类或与链接相关的任何其他属性

    <?php
    NavBar::begin([
        'brandLabel' => 'BrandLogo',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-inverse',
        ],
    ]);
    
    $menuItems = [
        [
            'label' => 'simple menu',
            'url' => ['#1']
        ],
        [
            'label' => 'dropdown menu',
            'url' => ['#4'],
            'linkOptions' => [
                'class' => 'my-class',
                'data' => [
                    'toggle' => ''
                ]
            ],
            'items' => [
                [
                    'label' => 'Submenu#1',
                    'url' => ['#1'],
                ],
                [
                    'label' => 'Submenu#2',
                    'url' => ['#2'],
                ],
            ]
        ],
    ];
    
    
    if( count($menuItems) ){
        echo Nav::widget([
            'options' => ['class' => 'navbar-nav'],
            'items' => $menuItems,
        ]);
    }
    ?>
    <form class="navbar-form navbar-left" action="/action_page.php">
        <div class="form-group has-feedback search">
            <input type="text" class="form-control" placeholder="Search" />
            <i class="glyphicon glyphicon-search form-control-feedback"></i>
        </div>
    </form>
    <?php
    NavBar::end();
    

    你能添加实际工作的
    html
    结构吗?你必须使用Yii2 NavIt创建/转换导航。第一个代码块名为“初始状态”。如果有人问我为什么要摆脱
    数据切换
    下拉切换
    ,我的第二个问题就完全解决了!非常感谢。不幸的是,我仍然在输出html中获得了
    下拉切换
    类<代码>
    。现在我可以添加我自己的类,但仍然无法删除现有的类。如果您希望从中完全删除该类,您可能需要覆盖
    yii\bootstrap\Nav::renderItems()
    ,因为该类是由小部件添加的,我已经更新了答案,请参见编辑部分@GHopper
    <?php
    
    /*
     * To change this license header, choose License Headers in Project Properties.
     * To change this template file, choose Tools | Templates
     * and open the template in the editor.
     */
    
    namespace common\components;
    
    use yii\bootstrap\Nav as BaseNav;
    use yii\bootstrap\Html;
    use yii\helpers\ArrayHelper;
    use yii\base\InvalidConfigException;
    
    class Nav extends BaseNav {
    
        /**
         * Renders a widget's item.
         * @param string|array $item the item to render.
         * @return string the rendering result.
         * @throws InvalidConfigException
         */
        public function renderItem($item) {
            if( is_string($item) ){
                return $item;
            }
            if( !isset($item['label']) ){
                throw new InvalidConfigException("The 'label' option is required.");
            }
            $encodeLabel = isset($item['encode']) ? $item['encode'] : $this->encodeLabels;
            $label = $encodeLabel ? Html::encode($item['label']) : $item['label'];
            $options = ArrayHelper::getValue($item, 'options', []);
            $items = ArrayHelper::getValue($item, 'items');
            $url = ArrayHelper::getValue($item, 'url', '#');
            $linkOptions = ArrayHelper::getValue($item, 'linkOptions', []);
    
            if( isset($item['active']) ){
                $active = ArrayHelper::remove($item, 'active', false);
            } else{
                $active = $this->isItemActive($item);
            }
    
            if( empty($items) ){
                $items = '';
            } else{
                $linkOptions['data-toggle'] = 'dropdown';
                Html::addCssClass($options, ['widget' => 'dropdown']);
    //            Html::addCssClass ( $linkOptions , [ 'widget' => 'dropdown-toggle' ] );
                if( $this->dropDownCaret !== '' ){
                    $label .= ' ' . $this->dropDownCaret;
                }
                if( is_array($items) ){
                    $items = $this->isChildActive($items, $active);
                    $items = $this->renderDropdown($items, $item);
                }
            }
    
            if( $active ){
                Html::addCssClass($options, 'active');
            }
    
            return Html::tag('li', Html::a($label, $url, $linkOptions) . $items, $options);
        }
    
    }