2017 © Pedro Peláez
 

yii2-widget yii2-bigmenu-widget

A yii2 pure CSS multilevel menu. With option to load views inside menu via ajax.

image

eseperio/yii2-bigmenu-widget

A yii2 pure CSS multilevel menu. With option to load views inside menu via ajax.

  • Tuesday, February 27, 2018
  • by Eseperio
  • Repository
  • 1 Watchers
  • 1 Stars
  • 20 Installations
  • CSS
  • 0 Dependents
  • 0 Suggesters
  • 0 Forks
  • 0 Open issues
  • 3 Versions
  • 0 % Grown

The README.md

Yii2 bigmenu widget. Multilevel menu, PURE CSS

Any code contribution is welcome, (*1)

Bigmenu renders a PURE CSS multilevel menu with advanced functions. It works like default nav widget, but dropdowns are pure css.   It also allows large menu items loaded vía ajax using page parameter. It has no limit on levels, but be careful. A lot of levels are uncomfortable for users., (*2)

Installation

composer require eseperio/yii2-bigmenu-widget, (*3)

  When an item have page property and items, the first one will be available on medium-large devices meanwhile on second will be available on mobile devices., (*4)

Screenshots, (*5)

php 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 ]);, (*6)

How to use

This widget is based on yii/bootstrap/nav widget yii\bootstrap\nav. The main differences are: 1. Allows infinite multilevel. For a better usability don´t use more than 3 levels. 2. Allow render a page as a menu panel. With this you are free to make complex and advanced dropdowns menus. 3. Render of pages in menu is made with ajax, and only one request is made per panel., (*7)

To use as simple multilevel pass an array to items property. See yii\bootstrap\nav documentation., (*8)

Dynamic panels

To use dynamic panels add to the menu item the property "page". This must be a link to the action that renders the page., (*9)

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

In your controller use eseperio\yii2-bigmenu\widget\BigmenuTrait. Then in your action, to render content call $this->renderBigmenu($view,$options)., (*10)

Note: The trait only simplifies the task of differenciating render method, between render and renderAjax. So you can do this in your own controller if you don´t want to use traits., (*11)

Change hamburger

This widget implements Hamburgers by jonsuh. You can change the hamburger like this, (*12)

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

Screenshots

This first screenshot shows a view rendered and loaded vía ajax automatically with this widget. Bigmenu screenshot Bigmenu screenshot Mobile friendly Bigmenu screenshot, (*13)

The Versions

27/02 2018

dev-master

9999999-dev https://github.com/Eseperio/yii2-bigmenu-widget

A yii2 pure CSS multilevel menu. With option to load views inside menu via ajax.

  Sources   Download

MIT BSD 3-Clause

css yii2 ajax html widget menu big multilevel

02/10 2017

1.1

1.1.0.0 https://github.com/Eseperio/yii2-bigmenu-widget

A yii2 pure CSS multilevel menu. With option to load views inside menu via ajax.

  Sources   Download

BSD 3-Clause

css yii2 ajax html widget menu big multilevel

04/09 2017

1.0

1.0.0.0 https://github.com/Eseperio/yii2-bigmenu-widget

A yii2 pure CSS multilevel menu. With option to load views inside menu via ajax.

  Sources   Download

BSD 3-Clause

css yii2 ajax html widget menu big multilevel