Enable Fly-Out for Quick Launch

Published by Dan Sanders on June 24, 2013

Tags

Display Fly-out menus by modifying the master page.

Browse to the Master Page in SharePoint Designer.
Locate the Quick Launch menu control. You can find the control in code view by searching on the following string:

&lt;SharePoint:AspMenu id=&quot;V4QuickLaunchMenu&quot;

Set the value of the StaticDisplayLevels attribute and the MaximumDynamicDisplayLevels attribute to 1, as follows.
```
&lt;SharePoint:AspMenu id=&quot;V4QuickLaunchMenu&quot; runat=&quot;server&quot; EnableViewState=&quot;false&quot; DataSourceId=&quot;QuickLaunchSiteMap&quot; UseSimpleRendering=&quot;true&quot; UseSeparateCss=&quot;false&quot; Orientation=&quot;Vertical&quot; StaticDisplayLevels=&quot;1&quot; MaximumDynamicDisplayLevels=&quot;1&quot; SkipLinkText=&quot;&quot; CssClass=&quot;s4-ql&quot;/&gt;
```
By default, the StaticDisplayLevels attribute is set to 2.
This means that when the page is rendered, the Quick Launch area of the left navigation bar has two menu levels: a series of headings and, below each heading, a set of child links. Changing the value to 1 means that only headings are shown. The default value of the MaximumDynamicDisplayLevels attribute is 0. This disables flyout menus. Setting the value to 1 means that the first menu level below the last level on the static menu appears in a fly-out menu. In this case, flyoutmenus appear for the first level below the headings.
You will need to update your site CSS to display the fly-out menu nicely, but before you do Check out this post.