How to: Customize the Display of Quick Launch

Articolo
10/20/2016

Applies to: SharePoint Foundation 2010

A number of options are available to developers who want to customize the appearance and behavior of Quick Launch, the menu in the left navigational area of pages in a Microsoft SharePoint Foundation website. One very commonly used technique is to modify attributes of the control that renders the Quick Launch menu. Another approach is to replace the menu control with an altogether different type of navigational control. This topic gives examples that use both methods.

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.

Open your browser and navigate to the website that you want to customize.
Click Site Actions, and then click Site Settings.
In the Galleries section, click Master pages.
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.
Close your browser.

Note

You might not be allowed to save changes to the site's default master page if a site-mapped page is open.
Locate the Quick Launch menu control. You can find the control in code view by searching on the following string: <SharePoint:AspMenu id="V4QuickLaunchMenu"
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.
Save the file and open a page in the website to see the result of your changes.

In SharePoint Designer 2010, open the website that you want to customize.
In the Navigation pane, select Master Pages.
Right-click v4.master, and then click Copy.
Right-click an empty area of the Master Pages pane, and then click Paste.

The file v4_copy(1).master is created.
Right-click v4_copy(1).master, click Rename, and type a new name, such as my.master.
Open the new file for editing.
Locate the Quick Launch menu control. You can find the control in code view by searching on the following string: <SharePoint:AspMenu id="V4QuickLaunchMenu"

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" />

On the File menu, click Save.

Note

You might not be allowed to save changes to the site's default master page if a site-mapped page is open in the browser. If this occurs, close the browser and try again.
In the Navigation pane, select Master Pages.
Right-click the name of your master page, and then click Set as Default Master Page.

Note

You can also set a custom master page as the default master by writing code that sets the value of the SPWeb.MasterUrl property.
Open a page in the website to see the result of your changes.

You can replace the AspMenu control with another control, such as the SPTreeView control that displays a tree of nodes that collapse and expand.

In SharePoint Designer 2010, open the website that you want to customize.
In the Navigation pane, select Master Pages.
Right-click v4.master, and then click Copy.
Right-click an empty area of the Master Pages pane, and then click Paste.

The file v4_copy(1).master is created.
Right-click v4_copy(1).master, click Rename, and type a new name, such as my.master.
Open the new file for editing.
Locate the Quick Launch menu control. You can find the control in code view by searching on the following string: <SharePoint:AspMenu id="V4QuickLaunchMenu"
Right click V4QuickLaunchMenu, select Select Tag, and then press the Delete key.

Replace the deleted markup with markup for three new controls, an SPHierarchyDataSourceControl and an SPRememberScroll control that contains an SPTreeView control.

<SharePoint:SPHierarchyDataSourceControl
      id="MyTreeViewDataSource"
      runat="server" RootContextObject="Web"
      IncludeDiscussionFolders="true" />
<SharePoint:SPRememberScroll
      id="MyTreeViewRememberScroll"
      runat="server" onscroll="javascript:_spRecordScrollPositions(this);"
      Style="overflow: auto;height: 400px;width: 150px; ">
  <SharePoint:SPTreeView
        id="MyWebTreeView"
        runat="server"
        ShowLines="true"
        DataSourceId="MyTreeViewDataSource"
        ExpandDepth="3"
        SelectedNodeStyle-CssClass="ms-tvselected"
        NodeStyle-CssClass="ms-navitem"
        NodeStyle-HorizontalPadding="2"
        NodeStyle-VerticalPadding="5"
        SkipLinkText=""
        NodeIndent="20"
        ExpandImageUrl="/_layouts/images/tvplus.gif"
        CollapseImageUrl="/_layouts/images/tvminus.gif"
        NoExpandImageUrl="/_layouts/images/tvblank.gif" />
</SharePoint:SPRememberScroll>

This markup expands the top three nodes by default, specifies lines drawn between nodes, and specifies values for vertical padding and indentation.

On the File menu, click Save.

Note

You might not be allowed to save changes to the site's default master page if a site-mapped page is open in the browser. If this occurs, close the browser and try again.
In the Navigation pane, select Master Pages. Right-click the name of your master page, and then click Set as Default Master Page.
Open a page in the website to see the result of your changes.

Condividi tramite

How to: Customize the Display of Quick Launch

Modifying the Menu Control

To display flyout menus by modifying the default master page

To display flyout menus by creating a custom master page

Replacing the Menu Control

To replace the Menu control with a TreeView control

See Also

Concepts

Risorse aggiuntive