Yii提供了兩套項(xiàng)目模板缝其，兩個(gè)的導(dǎo)航條是基于Bootstrap框架的橫向風(fēng)格導(dǎo)航盗胀。默認(rèn)提供的形式很簡(jiǎn)單，不帶下拉菜單。為了更貼合實(shí)際項(xiàng)目需要外遇，整理了把默認(rèn)模板改造成帶下拉菜單導(dǎo)航條的步驟方法注簿，完成效果如圖。
火狐截圖_2017-03-16T08-43-16.771Z.png
注：本文檔所有編輯代碼都是在layout/main.php中跳仿。
準(zhǔn)備工作
確保引入下面二個(gè)類诡渴，Yii項(xiàng)目模板的layout/main.php默認(rèn)會(huì)帶。
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
添加導(dǎo)航條
通過(guò)Yii封裝的bootstrap\Nav在layout/main.php添加導(dǎo)航條區(qū)域菲语。
//其他代碼
<body>
NavBar::begin([
'brandLabel' => 'easyapp',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-default navbar-fixed-top',
],
]);
//導(dǎo)航條項(xiàng)目區(qū)域
NavBar::end();
<?= $content ?>
</body>
//其他代碼
添加導(dǎo)航項(xiàng)目
使用Nav::widget創(chuàng)建導(dǎo)航條項(xiàng)目妄辩。
echo Nav::widget([
'options' => ['class' => 'nav navbar-nav '],
'items' => [
['label' => '產(chǎn)品', 'url' => ['/site/product'], 'active' => $productActive],
['label' => '解決方案', 'url' => ['/site/solution'], 'active' => $solutionActive],
['label' => '成功案例', 'url' => ['/site/case'], 'active' => $caseActive],
['label' => '幫助文檔', 'url' => ['/site/doc'], 'active' => $docActive],
['label' => '關(guān)于我們', 'url' => ['/site/about'], 'active' => $aboutActive],
],
'encodeLabels' => false
]);
上面的active參數(shù)控制是否為高亮。變量的定義在下面完整部分代碼中山上。
添加下拉導(dǎo)航項(xiàng)目
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="#">系統(tǒng)消息</a></li>
<li class="divider"></li>
<li><a href="/site/logout">退出系統(tǒng)</a></li>
</ul></li>'
)
],
visible參數(shù)判斷是否可見(jiàn)眼耀，這里是根據(jù)是否登錄來(lái)確認(rèn)的。
另外一種判斷是否登錄的方法佩憾，下拉菜單寫在了else代碼塊中哮伟。實(shí)際上把一段html代碼放入了items數(shù)組中。
全部導(dǎo)航項(xiàng)目
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' => '產(chǎn)品', 'url' => ['/site/product'], 'active' => $productActive],
['label' => '解決方案', 'url' => ['/site/solution'], 'active' => $solutionActive],
['label' => '成功案例', 'url' => ['/site/case'], 'active' => $caseActive],
['label' => '幫助文檔', 'url' => ['/site/doc'], 'active' => $docActive],
['label' => '關(guān)于我們', 'url' => ['/site/about'], 'active' => $aboutActive],
],
'encodeLabels' => false
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => '注冊(cè)', 'url' => ['/site/signup'],'visible'=>Yii::$app->user->isGuest],
['label' => '控制臺(tái)', '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="#">系統(tǒng)消息</a></li>
<li class="divider"></li>
<li><a href="/site/logout">退出系統(tǒng)</a></li>
</ul></li>'
)
],
]);
NavBar::end();
?>
<?= $content ?>
</body>
---其他代碼
該導(dǎo)航條分了兩部分菜單鸯屿，左側(cè)是靜態(tài)頁(yè)面導(dǎo)航澈吨，右側(cè)導(dǎo)航用戶操作導(dǎo)航區(qū)域把敢。本文檔示例是在用戶導(dǎo)航部分添加了下拉菜單寄摆，下拉菜單包括賬戶信息，我的訂單修赞，系統(tǒng)消息和退出登錄婶恼。下拉菜單是在登錄后可見(jiàn)。
