README

欢迎任何代码贡献

Bigmenu渲染一个具有高级功能的纯CSS多级菜单。它像默认的nav小部件一样工作，但下拉菜单是纯CSS。它还允许使用page参数通过ajax加载大菜单项。它没有级别限制，但请注意。过多的级别会让用户感到不舒服。

安装

composer require eseperio/yii2-bigmenu-widget

当一个项有page属性和items时，第一个将在中等或大设备上可用，而第二个将在移动设备上可用。

  echo Bigmenu::widget([
      'items' => [
          [
              'label' => 'Home',
              'url' => ['site/index'],
              'linkOptions' => [...],
          ],
          [
              'label' => 'Multilevel',
              'items' => [
                   ['label' => 'Level 1 - Dropdown A', 'url' => '#'],
                   '<li class="divider"></li>',
                   '<li class="dropdown-header">Dropdown Header</li>',
                   ['label' => 'Level 1 - Dropdown B', 'url' => '#'],
              ],
          ],
          [
              'label' => 'Login',
              'url' => ['site/login'],
              'visible' => Yii::$app->user->isGuest
          ],
          [
              'label' => 'Login',
              'url' => ['site/login'],
              'visible' => Yii::$app->user->isGuest,
              'page' => ['site/menu']
          ],
      ],
      'options' => ['class' =>'nav-pills'], // set this to nav-tab to get tab-styled navigation
      'jsOptions' => ['widthToEnableResponsive'=> 768], // set this to override the options used in js
  ]);

如何使用

此小部件基于yii/bootstrap/nav小部件 yii\bootstrap\nav。主要区别是

允许无限多级。为了更好的可用性，不要使用超过3级。
允许将页面渲染为菜单面板。使用此功能，您可以自由地创建复杂和高级的下拉菜单。
菜单中的页面渲染使用ajax进行，并且每个面板只请求一次。

要将简单多级作为使用，请将数组传递给items属性。请参阅yii\bootstrap\nav文档。

动态面板

要使用动态面板，请将“page”属性添加到菜单项中。这必须是指向渲染页面的操作的链接。

Bigmenu::widget([
   'hamburger' => "slide",
   'items' => [
      ['label'=>"Dynamic content", "url"=>["site/index"], "page"=>["site/samplemenupage"] ],
      ...
   ]
])

在您的控制器中使用eseperio\yii2-bigmenu\widget\BigmenuTrait。然后在您的操作中，要渲染内容，请调用$this->renderBigmenu($view,$options)。

注意：特质仅简化了区分渲染方法（在render和renderAjax之间）的任务。因此，如果您不想使用特质，可以在自己的控制器中这样做。

更改汉堡包

此小部件实现了jonsuh的汉堡包。您可以像这样更改汉堡包

Bigmenu::widget([
   'hamburger' => "slide",
   'items' => [...]
])

更改宽度以启用响应式

如果您想自定义响应式设备的宽度，您必须设置jsOptions属性

Bigmenu::widget([
  'jsOptions' => ['widthToEnableResponsive'=> 992],
   'items' => [...]
])

屏幕截图

此第一张屏幕截图显示了通过此小部件自动渲染和加载的视图。移动友好

eseperio / yii2-bigmenu-widget

维护者

详细信息