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:
- Create a backup copy of the file
\Modules\Szmyd.Orchard.Modules.Menu\Scripts\superfish.js; - Edit the file superfish.js and replace all its content with:
(function($){ $.fn.superfish = function(op) { } })(jQuery); - Edit all theme's .cshtml layout files from the folder /Views (for example Layout.cshtml);
- Locate the menu script (located at the bottom of the file);
- 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 |
|
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. |
Comments