Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eseperio/yii2-bigmenu-widget
A pure css multilevel menu with dynamic content.
https://github.com/eseperio/yii2-bigmenu-widget
Last synced: 3 months ago
JSON representation
A pure css multilevel menu with dynamic content.
- Host: GitHub
- URL: https://github.com/eseperio/yii2-bigmenu-widget
- Owner: Eseperio
- License: mit
- Created: 2017-09-03T22:39:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-03T10:53:33.000Z (almost 3 years ago)
- Last Synced: 2024-10-29T08:30:06.317Z (3 months ago)
- Language: SCSS
- Size: 408 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- License: LICENSE
Awesome Lists containing this project
README
# Yii2 bigmenu widget. Multilevel menu, PURE CSS
> Any code contribution is welcome
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.
## Installation
`composer require eseperio/yii2-bigmenu-widget`
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.
[Screenshots](#screenshots)
```php
echo Bigmenu::widget([
'items' => [
[
'label' => 'Home',
'url' => ['site/index'],
'linkOptions' => [...],
],
[
'label' => 'Multilevel',
'items' => [
['label' => 'Level 1 - Dropdown A', 'url' => '#'],
'
'
['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
]);
```
## How to use
This widget is based on yii/bootstrap/nav
widget [yii\bootstrap\nav](http://www.yiiframework.com/doc-2.0/yii-bootstrap-nav.html). 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.
To use as simple multilevel pass an array to `items` property. See `yii\bootstrap\nav` documentation.
### 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.
```
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)`.
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.
## Change hamburger
This widget implements [Hamburgers by jonsuh](https://jonsuh.com/hamburgers/). You can change the hamburger like this
```
Bigmenu::widget([
'hamburger' => "slide",
'items' => [...]
])
```
## Change width to enable responsive
If you want custom the with of the responsive devise, you must set the property jsOptions
```
Bigmenu::widget([
'jsOptions' => ['widthToEnableResponsive'=> 992],
'items' => [...]
])
```
## Screenshots
This first screenshot shows a view rendered and loaded vía ajax automatically with this widget.
Mobile friendly
