YII2小部件NavBar三级类下拉的实现方法
YII2小部件NavBar三级类下拉的实现方法本文关键字词：
YII2,小部件,NavBar,三级菜单
效果截图：
以下为演示代码：
CSS: <style type="text/css">
.dropdown:hover .menu-top{display:block;}
.dropdown-submenu{position:relative;}
.dropdown-submenu > .dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover > .dropdown-menu{display:block;}
.dropdown-submenu > a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover > a:after{border-left-color:#ffffff;}
.dropdown-submenu .pull-left{float:none;}
.dropdown-submenu.pull-left > .dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
</style>
PHP： <?php
NavBar::begin([
'brandLabel' => '我的网站',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => [
['label' => '首页', 'url' => ['/site/index'],
'items' => [
['label' => '二级1', 'url' => ['#'],
'items' => [
['label' => '三级1', 'url' => ['#']],
],
],
['label' => '二级2', 'url' => ['#']],
],
],
['label' => '关于', 'url' => ['/site/about']],
['label' => '表单', 'url' => ['/site/contact']],
Yii::$app->user->isGuest ?
['label' => '登陆', 'url' => ['/site/login']] :
['label' => '退出 (' . Yii::$app->user->identity->username . ')',
'url' => ['/site/logout'],
'linkOptions' => ['data-method' => 'post']],
],
]);
NavBar::end();
?>
页:
[1]