PHPIN.NET

 找回密码
 立即注册
查看: 6891|回复: 0

[基础应用] YII2小部件NavBar三级类下拉的实现方法

[复制链接]

469

主题

31

回帖

5497

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5497
发表于 2015-6-12 11:50:57 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

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

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

效果截图:
演示截图.png 以下为演示代码:

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.         ?>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-29 14:23

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表