How to use Megamenu / Accordion navigation with BindMENU in SharePoint 2013/Office 365(v2013)

Office365 SP2013

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
Note: The following instructions are valid for any SharePoint 2013 and Office 365 (v2013) from BindTuning v2.0.0.2 themes

BindTuning themes include several cool navigation options, that you can apply to your theme as needed. Here is an example of what you can get:

 Default MenuMega MenuAccordion Menu
Horizontal default_horizonal.png mega.JPG (not applicable)
Vertical default_vertical.JPG (not applicable) accordion.JPG

Default Menu

  1. Edit the masterpage (.master file)
    • Farm solution using SharePoint designer: Go to All files > _catalogs > masterpages
    • Sandbox solution using SharePoint designer: Go to All files > _catalogs > masterpages > THEMENAME
    • Check out the file before edit and check in to publish a major version afterwards, to make out changes available for any user.
  2. By default the Default menu is the Menu style applied.

Horizontal

<script type="text/javascript">
jQuery(function($) {
$('#MenuH .MenuBar ul.root').BindMENU({ MenuStyle:"DefaultMenu",Orientation:"Horizontal" });
});
</script>

Vertical (Sidebar masterpages only)

<script type="text/javascript">
jQuery(function($) {
$('#MenuV .MenuBar ul.root').BindMENU({MenuStyle:"DefaultMenu",Orientation:"Vertical"});
});
</script>

 

Mega Menu (horizontal menu only)

Note: Mega Menu requieres 3 navigation levels otherwise it will display the Default Menu. To learn how to get the 3 navigation levels please follow this article
  1. Edit masterpage (.master file)
    • Farm solution using SharePoint designer: Go to All files > _catalogs > masterpages
    • Sandbox solution using SharePoint designer: Go to All files > _catalogs > masterpages > THEMENAME
    • Check out the file before edit and check in to publish a major version afterwards, to make out changes available for any user.
  2. Locate the following code
    $('#MenuH .MenuBar ul.root').BindMENU({ MenuStyle:"DefaultMenu",Orientation:"Horizontal" });
  3. Replace Menu style to MegaMenu
    $('#MenuH .MenuBar ul.root').BindMENU({ MenuStyle:"MegaMenu",Orientation:"Horizontal"});

Mega menu options

  • For Mega menus with lots of items, you might be interested in set a maximum allowed columns MaxColumns.  Instead of having a single menu row, your items can be organized in several rows as needed.
    $("#MenuH .MenuBar ul.root").BindMENU({MenuStyle:"MegaMenu",Orientation:"Horizontal",
      MaxColumns:"3"});
  • You can also set the minimum and maximum width for your submenu items (in pixels). Use MinWidth and MaxWidth as follows.
    $("#MenuH .MenuBar ul.root").BindMENU({ MenuStyle:"MegaMenu",Orientation:"Horizontal", 
    MinWidth:"120",MaxWidth:"200" });

Accordion Menu (vertical menu only)

  1. Edit masterpage (.master file)
    • Farm solution using SharePoint designer: Go to All files > _catalogs > masterpages
    • Sandbox solution using SharePoint designer: Go to All files > _catalogs > masterpages > THEMENAME
    • Check out the file before edit and check in to publish a major version afterwards, to make out changes available for any user.
  2. Locate the following code
    $('#MenuV .MenuBar ul.root').BindMENU({MenuStyle:"DefaultMenu",Orientation:"Vertical"});
  3. Replace Menu style to MegaMenu
    $('#MenuV .MenuBar ul.root').BindMENU({MenuStyle:"Accordion",Orientation:"Vertical"});
Have more questions? Submit a request

Comments

  • Avatar
    Bosak, Brian

    How do you add Mega menus "items?" As soon as the mega menu is activated all of my existing dropdown menu items are no longer displayed.

  • Avatar
    Bosak, Brian
  • Avatar
    Bosak, Brian

    After creating a custom menu structure in the Term Store Management Tool, the template has to be deactivated from your site. Then go in an activate the template again and the MegaMenu will function with the dropdowns and flyouts.

  • Avatar
    Santos, Alfred

    Added the according menu option using the instructions above and it worked great!

  • Avatar
    Priyanka Rakhecha

    Hi.Can I have vertical Megamenu displayed in SharePoint 2013?
    Also I was trying to get 4 levels deeper..That would now work..Please advise

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