YII2小部件NavBar三级类下拉的实现方法

admin

YII2小部件NavBar三级类下拉的实现方法

本文关键字词：
YII2,小部件,NavBar,三级菜单

效果截图：
以下为演示代码：

CSS:

1.     <style type="text/css">
   
2.         .dropdown:hover .menu-top{display:block;}
   
3.         .dropdown-submenu{position:relative;}
   
4.         .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;}
   
5.         .dropdown-submenu:hover > .dropdown-menu{display:block;}
   
6.         .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;}
   
7.         .dropdown-submenu:hover > a:after{border-left-color:#ffffff;}
   
8.         .dropdown-submenu .pull-left{float:none;}
   
9.         .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;}
   
10.     </style>

复制代码

PHP：

1.       <?php
   
2.             NavBar::begin([
   
3.                 'brandLabel' => '我的网站',
   
4.                 'brandUrl' => Yii::$app->homeUrl,
   
5.                 'options' => [
   
6.                     'class' => 'navbar-inverse navbar-fixed-top',
   
7.                 ],
   
8.             ]);
   
9.             echo Nav::widget([
   
10.                 'options' => ['class' => 'navbar-nav navbar-right'],
    
11.                 'items' => [
    
12.                     ['label' => '首页', 'url' => ['/site/index'],
    
13.                         'items' => [
    
14.                                 ['label' => '二级1', 'url' => ['#'],
    
15.                                     'items' => [
    
16.                                         ['label' => '三级1', 'url' => ['#']],
    
17.                                     ],
    
18.                                 ],
    
19.                                 ['label' => '二级2', 'url' => ['#']],
    
20.                         ],
    
21.                     ],
    
22.                     ['label' => '关于', 'url' => ['/site/about']],
    
23.                     ['label' => '表单', 'url' => ['/site/contact']],
    
24.                     Yii::$app->user->isGuest ?
    
25.                         ['label' => '登陆', 'url' => ['/site/login']] :
    
26.                         ['label' => '退出 (' . Yii::$app->user->identity->username . ')',
    
27.                             'url' => ['/site/logout'],
    
28.                             'linkOptions' => ['data-method' => 'post']],
    
29.                 ],
    
30.             ]);
    
31.             NavBar::end();
    
32.         ?>

复制代码