We've included several cool navigation options, that you can apply to your theme as needed!
From Megamenus, to Accordions, or just plain simple nav, it's your choice!
For each possible menu layout, proceed as follows:
- Edit all theme's .cshtml layout files (for example Home.cshtml)
- Locate the menu script (located on the bottom of the file)
- Replace code as shown below
Default Menu
Horizontal
You will need to set the MenuStyle value to DefaultMenu and Orientation value to Horizontal
jQuery(function($) {
$("#MenuH .menu").BindMENU({MenuStyle:"DefaultMenu",Orientation:"Horizontal"});
});
Vertical
You will need to set the MenuStyle value to DefaultMenu and Orientation value to Vertical
jQuery(function($) {
$("#MenuV .menu").BindMENU({MenuStyle:"DefaultMenu",Orientation:"Vertical"});
});
Mega Menu
Our megamenus were design to provide you the best navigation experience.
They will automatically display a megamenu structure when nested sub items are present, or a regular drop-down sub-navigation, when only one sub level is present.
Horizontal
You will need to set the MenuStyle value to MegaMenu and Orientation value to Horizontal
jQuery(function($) {
$("#MenuH .menu").BindMENU({MenuStyle:"MegaMenu",Orientation:"Horizontal"});
});
Vertical
You will need to set the MenuStyle value to Megamenu and Orientation value to Vertical
jQuery(function($) {
$("#MenuV .menu").BindMENU({MenuStyle:"MegaMenu",Orientation:"Vertical"});
});
Accordion
You will need to set the MenuStyle value to Accordion and Orientation value to Vertical
jQuery(function($) {
$("#MenuV .menu").BindMENU({MenuStyle:"Accordion",Orientation:"Vertical"});
});
how do you change the speed?
I only find the following but no code snippets.
how do you use this:
You can also change the speed and event of your menu. Please search for the call of the method BindMENU and add the following options:
|NameTypeDefaultDescription|
| |
|
Speed
| string or number
| "fast"
| A string or number determining how long the animation will run. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the Speed parameter is omitted, the default value is used.
|
|
Event
| string
| "hover"
| Event that will cause the show and hide of the menu options. Can only be "hover" or "click". If the Event parameter is omitted, the default value is used.
|
To use other options you need to locate the line of your menu call and add the new option.
For example, to add the speed option with the value "slow", you need to add next to the other options (MenuStyle and Orientation):
jQuery(function($) {
$("#MenuV .menu").BindMENU({MenuStyle:"Accordion",Orientation:"Vertical", Speed:"slow" });
});
Does the umbraco version of menu support only showing the child nodes of the page in the vertical menu? I can only find information pertaining to DDN skins.
Currently our Umbraco themes are not prepared to display only child pages in the left navigation :(
It's a good improvement for one of our next releases.