How to set up BindMENU 2.0 in SharePoint

Office365 SP2013SP2016

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. 

Info: SharePoint Designer is required in order to accomplish the steps described in this article. If you need to download it please follow this link

1# Open the file to replace the code

Note: Don't forget to Check out before editing the file and then check in, to make all the changes visible to any user. 
  1. Edit the master page (.master file)
    Info: If you don't know how to edit your theme .wsp file check out this article from the blog: How to manually edit a SharePoint wsp file
      • If you are working with Farm solution: Go to All files > _catalogs > master pages. Now choose the master page you want to use to set up the BindMENU 2.0 and move on to step 2# Add the code
      • If you are working with Sandbox solution: Go to All files > _catalogs > master pages > THEMENAME. Now choose the master page you want to use to set up the BindMENU 2.0 and move on to step 2# Add the code

    115001603583_1.png

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. Locate the menu script;
  2. 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. Locate the menu script;
  2. 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. Locate the menu script;
  2. 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. Locate the menu script;
  2. 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. Locate the menu script
  2. Replace code as shown below:
        jQuery(function($) {
          var options ={
            Collapse: "tablet"
          };

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

Extra Links 

Horizontal

Using the Extra Links menu and the MaxLinks variable, you can set the max amount of menu items you want to appear on the page. The rest of the items will be added inside a submenu.

  1. Locate the menu script;
  2. Replace code as shown below:

  

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

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

Offcanvas 

Vertical

Note: You will need to set the Collapse value to Phone or Tablet.
  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

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 MinWidth parameter is omitted, the default value of 140px is used. 

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 number of columns displayed in the 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.
Have more questions? Submit a request

Comments

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