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