The options described below are only available for Classic SharePoint sites (SharePoint Online, SP2013/SP2016 and, SP2019). If you're looking into exploring the available options for Modern SharePoint follow this link.
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've also added more menus and nifty functionalities.
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
- 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.
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.
- Locate the menu script;
- 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.
- Locate the menu script;
- 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.
- Locate the menu script;
- 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:
- Locate the menu script;
- 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.
- Locate the menu script
- 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.
- Locate the menu script;
- Replace code as shown below:
jQuery(function($) { var options ={ MaxLinks: "4" }; $('#MenuH').BindMENU(options); });
Offcanvas
Vertical
- Edit all theme's master pages in use (.master files);
- Locate the menu script;
- 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 |
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. |
Comments