Download the PHP package buttflattery/yii2-multimenu without Composer

Yii2-multimenu V 1.0.0

What is this repository for?

A Yii2 widget that creates a navigation menu based on the yii\widgets\Menu, and provides you with multiple layout options that include a Big Drop style top navigation, a Left Menu navigation and a Sticky drop-up footer menu just by using this single widget. it uses multilple 3rd party plugins for animating the menu. It provide an extra helper component to build menu from the model.

External Libraries Used

• jQuery>= v2.2.4
• Bootstrap v3.3.7 && Bootstrap v4
• Waves Plugin.
• Animate
• Slim Scroll

About Bootstrap Version Usage

The extension detects if you are using the yiisoft/yii2-bootstrap or yiisoft/yii2-bootstrap4 and loads the appropriate assets for the extension. It will check first the "yiisoft/yii2-bootstrap4" if it exists then it will load bootstrap4 resources otherwise it will fall back to use bootstrap3. So make sure you are following the correct guide to use the yiisoft/yii2-bootstrap4" and remove the "yiisoft/yii2-bootstrap": "~2.0.0", from you composer.json and change the minimum-stability:"dev" here is the complete guide.

How do I set up the package

use composer to install the extension

or add into the composer.json file under require section

Demos

• Big Drop
• Left Navigation
• Sticky Drop-up Footer Navigation

Usage

Available Options for the Widget

You can use the available default options for the yii\widgets\Menu along with the following options

$brandImage (string|bool)

Src of the brand image or false if it's not used. Note that this param will override $this->brandLabel param. Default value is false.

$brandLabel (string|bool)

The text of the brand or false if it's not used. Note that this is not HTML-encoded. Default value is false.

$brandOptions (array)

The HTML attributes of the brand link. \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.

$brandUrl (bool)

The URL for the brand's hyperlink tag. This parameter will be processed by [[\yii\helpers\Url::to()]] and will be used for the "href" attribute of the brand link. Default value is false that means [[\yii\web\Application::homeUrl]] will be used. You may set it to null if you want to have no link at all.

$containerCssClasses (array)

The Container HTML options.

$layoutTemplate (string)

The layout template used to draw the menu and rearrange the brand and menu items placement. Default value is {brand}{multimenu}.

$enableIcons (bool)

If default icon should be enabled along with the labels of the menu. It uses the Multmenu::DEFAULT_ICON which has the value <i class="ion-android-menu"></i>

$multimenuOptions (array)

You can pass the plugin specific settings here for the multimenu and settings depending on the type of the menu you are using.

• theme (string)

  The theme of the menu you want to use, it can be any of the bigdrop,leftnav and dropup, you can use the available constants THEME_BIGDROP, THEME_LEFTNAV and THEME_DROPUP. See available constants section.

• themeColorFile (string)

  The name space of the theme color file you want to load with the menu you can customize classes for the menu and load via this option. Default value is empty ''. See wiki for creating the theme file.

• mobileView (bool)

  If enabled, the menu will be responsive in the mobile view. This option comes handy when you want to use 2 menus on the same page and want one of them to be show for the mobile view, you can turn the other one off. Default value is true.

• enableWavesPlugin (bool)

  If the Waves. plugin should be enabled when clicking on the menu items. Default value is true.

• wavesEffect (string)

  The color of the waves effect see https://materializecss.com/waves.html#! . Default value is waves-cyan.

• wavesType (string) circular|default

  The waves type effect, circular or default. Default value is default. See the constants section to see all available effects you can use.

• mobileBreakPoint (int)

  The mobile view break point where the javascript plugin should recalculate sizes. Default value is 1200. (Note: dont change this option unless you know what you are doing as changing it will require you to update the media queries for the themes too.)

There are menu/theme specific options that are applicable to specific menu types only. See details below.

• bigdrop (array)

  It accepts the following settings to be used for bigdrop menu only.

  • enableTransitionEffects (bool) : Enable transition effects on the menu, uses animate.css. default is true.

  • transitionEffect (string) : Transition effect to show the menu. default value flipInX . See animate.css for trasition effect types.

  • transitionDelay (string) : Animate speed for the transition "fast"|"faster"|"slow"|"slower"|"". Default value faster. See available constants.

• dropup (array)

  It accepts the the same set of settings as above for the bigdrop but uses different default values

  • enableTransitionEffects => true
  • transitionEffect => 'fadeIn`
  • transitionDelay => 'slow'

• leftnav (array)

  It accepts the the same set of settings as above for the bigdrop with different default values, and some extra options for the leftnav.

  • enableTransitionEffects => true

  • transitionEffect => 'fadeIn`

  • transitionDelay => 'slow'

  • position (string) default|fixed|absolute : the position of the left menu, the default value is default and the leftnav will be rendered relative to it's parent container.

  • slimScroll (array) : The options for the slimscroll plugin used for the left nav.

  • scrollColor (string) : The scroll bar color, default value is rgba(0,0,0,0.8).

  • scrollWidth (string) : Width of the scroll bar, default value is 4px.

  • scrollAlwaysVisible (bool) : If true scroll will always be visible, default value is false.

  • scrollBorderRadius : The scroll bar border radius, default value is 0.

  • scrollRailBorderRadius : Sets border radius of the rail, default value is 0.

  • scrollActiveItemWhenPageLoad : If true, will always scroll to the active menu item link after the page loads, default value is true.

Remember when using any on the following menus if you are providing the items array manually, when specifying label for the submenus that further opens a menu you should not leave the url blank but javascript::void(0) as in the examples below.

BigDrop minimal options with brand text

The bigdrop menu uses normal dropdowns for the first 2 levels/childs,

• level 1
  • level 2

which means you need to have 3 or more levels/childs to activate the bigdrop menu, and will support to infinite levels. See below code for $items list.

Leftnav Minimal options with brand image

Dropup menu with custom color theme Asset Class

Your theme asset class code

Menu items from Database

A helper component buttflattery\multimenu\helpers\MenuHelper is added that comes in handy if you want to just add all the menu items in the database table and leave the rest on this component to generate the items array for the menu.

If you dont have a menu table added yet you can run the migration and use the model provided buttflattery\multimenu\models\Menu.

Running migrations

Run the following command on terminal to run the migrations

php ./yii migrate/up --migrationPath=@vendor/buttflattery/yii2-multimenu/src/migrations

Configure the MenuHelper Component

Open config/web.php if you are using yii2-basic or the common/config/main.php if you are using advance-app and add the following under the components array.

If you wish to use your custom model and have a menu table already you can provide your own model namespace and set the field names appropriately for the component to work correctly. See below for a full set of options you can configure for the component.

Adding the items for the menu in table

When adding the menu items in the database keep in mind the following things

• If it is a link that points to any controller/action on site then provide the link like site/index
• If it is an external link provide the link like https://example.com
• If it is a parent link that opens a sub menu further, it should have the url as #. which will be replaced with javascript:void(0) by the MenuHelper.
• If you have any html in the label for example bootstrap 3 has <hr /> tag that can be used as a divider but you need to keep the url field as NULL.
• If you wish to provide headings inside the menu then you should provide text only in the label field and keep the url field as NULL.

See the sample values below

Now you can call the function getMenuItems(orderByField) to get the $items array like below.

Available Constants

Who do I talk to?

• [email protected]
• [email protected]