Yii项目模板导航条添加下拉菜单

Yii提供了两套项目模板，两个的导航条是基于Bootstrap框架的横向风格导航。默认提供的形式很简单，不带下拉菜单。为了更贴合实际项目需要，整理了把默认模板改造成带下拉菜单导航条的步骤方法，完成效果如图。

火狐截图_2017-03-16T08-43-16.771Z.png

注：本文档所有编辑代码都是在layout/main.php中。

准备工作

确保引入下面二个类，Yii项目模板的layout/main.php默认会带。

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;

添加导航条

通过Yii封装的bootstrap\Nav在layout/main.php添加导航条区域。

//其他代码
<body>
NavBar::begin([
        'brandLabel' => 'easyapp',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-default navbar-fixed-top',
        ],
    ]);
//导航条项目区域
NavBar::end();
<?= $content ?>
</body>
//其他代码

添加导航项目

使用Nav::widget创建导航条项目。

echo Nav::widget([
'options' => ['class' => 'nav navbar-nav '],
'items' => [

    ['label' =>  '产品', 'url' => ['/site/product'], 'active' => $productActive],
    ['label' =>  '解决方案', 'url' => ['/site/solution'], 'active' => $solutionActive],
    ['label' =>  '成功案例', 'url' => ['/site/case'], 'active' => $caseActive],
    ['label' =>  '帮助文档', 'url' => ['/site/doc'], 'active' => $docActive],
    ['label' =>  '关于我们', 'url' => ['/site/about'], 'active' => $aboutActive],
  
],
'encodeLabels' => false
]);

上面的active参数控制是否为高亮。变量的定义在下面完整部分代码中。

添加下拉导航项目

 Yii::$app->user->isGuest ? (
    ['label' => '登录', 'url' => ['/site/login']]
    
) : (
    '<li class="dropdown">'
    . '<a href="#" class="dropdown-toggle" data-toggle="dropdown">
    ' . Yii::$app->user->identity->username . '
    <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
    <li><a href="#">账户信息</a></li>
    <li><a href="#">我的订单</a></li>
    <li class="divider"></li>
    <li><a href="#">系统消息</a></li>
    <li class="divider"></li>
    <li><a href="/site/logout">退出系统</a></li>
    </ul></li>'
    )   
],

visible参数判断是否可见，这里是根据是否登录来确认的。

另外一种判断是否登录的方法，下拉菜单写在了else代码块中。实际上把一段html代码放入了items数组中。

全部导航项目

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
---其他代码
<body>
<?php $this->beginBody() ?>
    <?php
    $module = Yii::$app->controller->module->id;
    $controller = Yii::$app->controller->id;
    $action = Yii::$app->controller->action->id;

    $productActive = ($controller == 'product') ? true : false;
    $solutionActive = ($controller == 'solution') ? true : false;
    $caseActive = ($controller == 'case') ? true : false;
    $docActive = ($controller == 'doc') ? true : false;
    $aboutActive = ($controller == 'about') ? true : false;
    
    $consoleActive = ($controller == 'consoleActive') ? true : false;

    NavBar::begin([
        'brandLabel' => 'easyapp',
        'brandUrl' => Yii::$app->homeUrl,
        'options' => [
            'class' => 'navbar-default navbar-fixed-top',
        ],
    ]);
    
    echo Nav::widget([
    'options' => ['class' => 'nav navbar-nav '],
    'items' => [

        ['label' =>  '产品', 'url' => ['/site/product'], 'active' => $productActive],
        ['label' =>  '解决方案', 'url' => ['/site/solution'], 'active' => $solutionActive],
        ['label' =>  '成功案例', 'url' => ['/site/case'], 'active' => $caseActive],
        ['label' =>  '帮助文档', 'url' => ['/site/doc'], 'active' => $docActive],
        ['label' =>  '关于我们', 'url' => ['/site/about'], 'active' => $aboutActive],
      
    ],
    'encodeLabels' => false
]);

    echo Nav::widget([
        'options' => ['class' => 'navbar-nav navbar-right'],
        'items' => [
          
            ['label' => '注册', 'url' => ['/site/signup'],'visible'=>Yii::$app->user->isGuest],
            ['label' => '控制台', 'url' => ['/console/home'],'active' => $consoleActive,'visible'=>!Yii::$app->user->isGuest],
           
            Yii::$app->user->isGuest ? (
                ['label' => '登录', 'url' => ['/site/login']]
                
            ) : (
                '<li class="dropdown">'
                    . '<a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    ' . Yii::$app->user->identity->username . '
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">账户信息</a></li>
                        
                        <li><a href="#">我的订单</a></li>
                        <li class="divider"></li>
                        <li><a href="#">系统消息</a></li>
                        <li class="divider"></li>
                        <li><a href="/site/logout">退出系统</a></li>
                    </ul></li>'
            )   
        ],
    ]);
    NavBar::end();
    ?>
 <?= $content ?>
</body>
---其他代码

该导航条分了两部分菜单，左侧是静态页面导航，右侧导航用户操作导航区域。本文档示例是在用户导航部分添加了下拉菜单，下拉菜单包括账户信息，我的订单，系统消息和退出登录。下拉菜单是在登录后可见。