yii html 添加下拉框,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添加导航条区域。

//其他代码

NavBar::begin([

'brandLabel' => 'easyapp',

'brandUrl' => Yii::$app->homeUrl,

'options' => [

'class' => 'navbar-default navbar-fixed-top',

],

]);

//导航条项目区域

NavBar::end();

= $content ?>

//其他代码

添加导航项目

使用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']]

) : (

'

'

. '

' . Yii::$app->user->identity->username . '

• 账户信息
• 我的订单
• 系统消息
• 退出系统

'

)

],

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

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

全部导航项目

use yii\bootstrap\Nav;

use yii\bootstrap\NavBar;

---其他代码

<?php $this->beginBody() ?>

$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']]

) : (

'

'

. '

' . Yii::$app->user->identity->username . '

• 账户信息
• 我的订单
• 系统消息
• 退出系统

'

)

],

]);

NavBar::end();

?>

= $content ?>

---其他代码

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