How to use Megamenu / Accordion navigation with BindMENU (from Bind Tuning v2.0.0) in Umbraco4/5

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:

  1. Edit all theme's .cshtml layout files (for example Home.cshtml)
  2. Locate the menu script (located on the bottom of the file)
  3. 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"});
      });
Have more questions? Submit a request

Comments

  • Avatar
    BKASH

    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.
    |

  • Avatar
    Mariana Silva

    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" });
    });

     

  • Avatar
    Tim Griffiths

    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.

  • Avatar
    Beatriz Oliveira

    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.

     

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