How to set up the BindMENU 2.0 on Kentico

With BindTuning BindMENU, included in your theme, you can easily set up different kind of menus. And with the new 2.0 version of the BindMENU, we've made it easier to set up your theme's menu. We also add more menus and nifty functionality.

Choose the menu you want for your website and go through the instructions to set it up. 

1# Open the file to replace the code

1. Edit all theme's .ascx layout files (for example home.ascx)
2. Locate the menu script (located on the bottom of the file)
3. Replace code as shown below:

2# Add the code 

Choose the menu you want to use and replace the code. 

Horizontal Menu (Default Version)

Horizontal

You will need to set the Style value to default. The menu orientation is automatically detected depending on whether you target #MenuH or #MenuV.

1. Edit all theme's master pages in use (.master files);
2. Locate the menu script;
3. Replace code as shown below:

      jQuery(function($) {
          var options ={
            Style: "Default"
          };
          $("#MenuH").BindMENU(options);
        });
      

Vertical Menu (Accordion)

Vertical

You will need to set the Style value to Accordion. The menu orientation is automatically detected depending on whether you target #MenuH or #MenuV.

1. Edit all theme's master pages in use (.master files);
2. Locate the menu script;
3. Replace code as shown below:

      jQuery(function($) {
          var options ={
            Style: "Accordion"
          };

          $('#MenuV').BindMENU(options);
        });
      

Mega Menu (advanced menu only)

Horizontal

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 advantages of the Mega Menu is that it automatically displays a mega menu structure whenever your menu has a subitem or a drop-down sub-navigation when your menu only has one sub-level.

1. Edit all theme's master pages in use (.master files);
2. Locate the menu script;
3. Replace code as shown below

      jQuery(function($) {
          var options ={
            Style: "MegaMenu"
          };

          $('#MenuH').BindMENU(options);
        });

If your horizontal menu has a large number of items, you can set a maximum allowed number of columns using the variable MaxColumns, instead of having a single menu row. This way your items will appear organized in several rows as needed. Check out the example below:

     

       jQuery(function($) {
          var options ={
            Style: "MegaMenu",
            MaxCols: "2"
          };

          $('#MenuH').BindMENU(options);
        });
      

Optionally, you can set the minimum and maximum width for your submenu items (in pixels) with the variables MinWidth and MaxWidth.

       jQuery(function($) {
          var options ={
            Style: "MegaMenu",
            MaxCols: "2",
            MinWidth: "140",
            MaxWidth: "140"
          };

          $('#MenuH').BindMENU(options);
        });
      

Animations 

Horizontal

BindMENUs include different animations to give your theme's menus a more smooth UX and they are completely customizable.
With the animation properties Type, Speed and Appear you can completely control your fade-in effects. Check out the example below:

1. Edit all theme's master pages in use (.master files);
2. Locate the menu script;
3. Replace code as shown below:

       jQuery(function($) {
          var options ={
            Type: "easeout",
            Speed: "slow",
            Appear: "bottom"
          };

          $('#MenuH').BindMENU(options);
        });

Collapse 

Horizontal

With the collapse property, you can set the dimensions for when the Collapse menu should appear. 

1. Edit all theme's master pages in use (.master files)
2. Locate the menu script
3. Replace code as shown below:

        jQuery(function($) {
          var options ={
            Collapse: "tablet"
          };

          $('#MenuH').BindMENU(options);
        });
      

Extra Links 

Horizontal

        jQuery(function($) {
          var options ={
            MaxLinks: "4"
          };

          $('#MenuH').BindMENU(options);
        });
      

Offcanvas 

Vertical

1. Edit all theme's master pages in use (.master files);
2. Locate the menu script;
3. Replace code as shown below:

      jQuery(function($) {
          var options ={
            Collapse: "Tablet"
          };

          $('#MenuV').BindMENU(options);
        });

All Menu Options