How to set up the BindMENU 2.0 on Orchard

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. 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 the code as shown in each menu instructions.

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