Wednesday, March 8, 2017

SharePoint 2013 TIP: How to implement multi-level flyouts in global navigation

The default depth for multi-level flyouts in global navigation is 2; in other words, you can configure a single dropdown list of menu options for each menu and on flyout for each of those menu options:
MENU1
  Menu11
  Menu12
    menu121
    menu122
    menu123
MENU2
  Menu21
  Menu22
MENU3
  Menu31
  Menu32
The depth of the flyouts that you can have is set by the MaximumDynamicDisplayLevels property of the SharePoint AspMenu control, which you'll find in the master page.  This property is set to "2" by default.  To be able to have a flyout on one of these flyouts, you need to increase this property from "2" to "3"; and that enables you to create global navigation menus like so:
MENU1
  Menu11
  Menu12
    menu121
    menu122
      menu1221
      menu1222
      menu1223
    menu123
MENU2
  Menu21
  Menu22
MENU3
  Menu31
  Menu32

References

  • The tag will look something like this:
    <SharePoint:AspMenu ID="TopNavigationMenu" Runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&lt;%$Resources:wss,navigation_accesskey%&gt;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" SkipLinkText="" />
  • The above TIP presumes the use of Managed navigation.  See reference 4 for details.

No comments: