Quick Launch fly Outs

Quick guide, just make the 2 changes in Yellow to the v4.master page. or read all details from Microsoft below.

You will need to change the background color of the flout as well

Place this in the top section of v4.master at the end of section titled "head" starting at line 34 this is the code they provided:



Details and explanations start here

You can modify the appearance of Quick Launch by setting attributes on the AspMenu control that displays its navigational nodes. For example, you can set attributes that collapse the view of the menu to headings alone and add flyout menus for displaying subordinate menu levels.

The menu control is defined in the default master page for the website. To change characteristics of the menu, you must either customize the originally installed default master page or create a custom master page and set it as the default.

To display flyout menus by modifying the default master page
  1. Open your browser and navigate to the website that you want to customize.

  2. Click Site Actions, and then click Site Settings.

  3. In the Galleries section, click Master pages.

  4. Select v4.master. Then click Edit Document on the ribbon.

    The master page opens in the default editor. If Microsoft SharePoint Designer 2010 is installed on your computer, the file opens in SharePoint Designer.

  5. Close your browser.

    Note Note

    You might not be allowed to save changes to the site’s default master page if a site-mapped page is open.

  6. Locate the Quick Launch menu control. You can find the control in code view by searching on the following string: <SharePoint:AspMenu id="V4QuickLaunchMenu"

  7. Set the value of the StaticDisplayLevels attribute and the MaximumDynamicDisplayLevels attribute to 1, as follows.


    <SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" 
        EnableViewState="false" DataSourceId="QuickLaunchSiteMap" 
        UseSimpleRendering="true" UseSeparateCss="false" Orientation="Vertical"
        StaticDisplayLevels="1" MaximumDynamicDisplayLevels="1" 
        SkipLinkText="" CssClass="s4-ql" />

    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 flyout menu. In this case, flyoutmenus appear for the first level below the headings.

  8. Save the file and open a page in the website to see the result of your changes.