Yii2:创建自定义菜单

时间:2018-08-12 09:13:56

标签: yii2 yii2-widget

我已经构建了一个引导菜单,现在我想使用Yii2 Nav小部件来重现它。因此,这是初始状态:

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

这是它的样子: enter image description here

现在,我想使用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();

问题在于结果不相等。我发现了一些问题:

  1. 窗口小部件生成的下拉链接为<a class="dropdown-toggle" href="/main/#4" data-toggle="dropdown">dropdown menu <span class="caret"></span></a>,如何摆脱data-toggle="dropdown"class="dropdown-toggle"
  2. 搜索表单被包装在<a></a>标签中。这就是导航栏损坏的原因: enter image description here 如何摆脱不必要的标签?

1 个答案:

答案 0 :(得分:1)

这是因为您没有遵循实际的HTML结构,因此您需要在contextlib之后而不是在@contextmanager内添加表单,但是该表单应该是{ {1}},如果您查看定义

  

ul和   NavBar的li调用被视为   导航栏。您可以使用NavBar之类的小部件,也可以使用   \yii\bootstrap\begin()构建此类内容。

因此,只需在调用\yii\bootstrap\end()之后和调用yii\bootstrap\Nav之前将表单移到\yii\widgets\Menu之外。

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

Nav::widget()

编辑

如果您希望完全删除类名NavBar::end(),则可能必须通过扩展窗口小部件来覆盖linkOptions,因为默认情况下它是作为bootstrap类添加的,因此您只需复制<?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(); 到扩展类中,并注释掉行dropdown-toggle,该行在那里添加了类,然后从yii\bootstrap\Nav::renderItems()更改要调用renderItems()的{​​{1}}到Html::addCssClass ( $linkOptions , [ 'widget' => 'dropdown-toggle' ] );

在您的namespace中添加以下类,或者如果您打算将其复制到其他地方,请更新代码中的名称空间

Nav