How to use Megamenu / Accordion navigation with BindMENU in Orchard

Note: This article refers to themes from version v2.X.X.X.

We've included several cool navigation options, that you can apply to your theme as needed! From Mega menus to Accordions or just plain simple nav, it's your choice!

For each possible menu layout, proceed as follows:

  1. Create a backup copy of the file \Modules\Szmyd.Orchard.Modules.Menu\Scripts\superfish.js;
  2. Edit the file superfish.js and replace all its content with:
    (function($){ $.fn.superfish = function(op) { } })(jQuery);
  3. Edit all theme's .cshtml layout files from the folder /Views (for example Layout.cshtml);
  4. Locate the menu script (located at the bottom of the file);
  5. Replace code as shown below for each menu. 

Default/Advanced Menus

Horizontal

You will need to set the MenuStyle value to DefaultMenu and Orientation value to Horizontal

jQuery(function($) {
$("#MenuH ul").BindMENU({MenuStyle:"DefaultMenu",Orientation:"Horizontal"});
});

Vertical

You will need to set the MenuStyle value to DefaultMenu and Orientation value to Vertical

jQuery(function($) {
$("#MenuV ul").BindMENU({MenuStyle:"DefaultMenu",Orientation:"Vertical"});
});

Mega Menu (advanced menu only)

BindTuning megamenus were designed to provide the smoothest navigation experience possible and to also allow you to easily set up your theme navigation.They automatically display a mega menu structure whenever your menu has a subitem or a drop-down sub navigation when your menu only has one sub-level.

One of the best perks is they automatically display a mega menu structure whenever your menu has a subitem or a drop-down sub-navigation when your menu only has one sub-level.

Horizontal

You will need to set the MenuStyle value to MegaMenu and Orientation value to Horizontal

jQuery(function($) {
$("#MenuH ul").BindMENU({MenuStyle:"MegaMenu",Orientation:"Horizontal"});
});

Vertical

You will need to set the MenuStyle value to Megamenu and Orientation value to Vertical

      
jQuery(function($) {
$("#MenuV ul").BindMENU({MenuStyle:"MegaMenu",Orientation:"Vertical"});
});

Accordion (advanced menu only)

You will need to set the MenuStyle value to Accordion and Orientation value to Vertical

jQuery(function($) {
$("#MenuV ul").BindMENU({MenuStyle:"Accordion",Orientation:"Vertical"});
});



All Menu Options

Name Type Default Options Description
Style string Default Default, MegaMenu, Accordion The Style parameter allows you to define the menu style you want to use with your theme. You can choose between Default (Horizontal and Vertical), MegaMenu or Accordion. 
EventTrigger string Hover Hover, Click With EventTrigger, events that will cause the show and hide of the menu options. Can only be hover or clicked. If the EventTrigger parameter is omitted, the default value is used. 
Speed string Normal Fast, Normal, Hover With Speed you can control the speed of your submenu animations. 
Appear string Right Left, Right, Top, Bottom Allows you to control the point of origin of the submenu as it appears on the screen.
Collapse string Phone Phone, Tablet With Collapse you can decide when the menu transforms into a mobile menu. With a mobile menu, the horizontal menu collapses and the vertical menu goes off-canvas.

MinWidth

Horizontal menu only

number "140" any value

Allows you to set the minimum width for subitems. If any other string is supplied,(??) or if the MinWidth parameter is omitted, the default value of 150px is used. Isn't the default value 140?

MaxWidth

Horizontal menu only

number not specified any value Allows you to set the minimum width for subitems. If any other string is supplied, or if the MaxWidth parameter is omitted, the default value of 250px is used.

MaxColumns

Mega menu only

number not specified any value Allows you to control the amount of columns displayed in Mega menu. Ideal for Mega menus with several subitems. If any other string is supplied(???), or if the MaxColumns parameter is omitted, the submenu will be displayed in a single row.

MaxLinks

Horizontal menu only

number not specified any value Allows you to set a max number of items on the menu. The remaining items will hide inside a collapsible submenu.
Have more questions? Submit a request

Comments

Got a question?

If you can't find the answer to your question, you can contact us.
We are here and happy to help.

Powered by Zendesk