The ever popular quick launch menu has some great functionality that SharePoint 2007 offers since it uses AspMenu Members (Microsoft.SharePoint.WebControls). This how to guide will provide you with as much information as possible so that its worthy for you to keep visiting time and time again. The default quick launch menu look is on the left.

For the beginning SharePoint Administrator / Developer, little do they know that they have quite a bit of flexibility in customizing the look and feel besides just the CSS properties. Lets take you through on making simple changes to the QuickLaunchMenu in SharePoint 2007 and point you to resources that will do whatever you wish with the left bar navigation look and feel.

Launching the Master Theme in SharePoint Designer 2007

1. Launch the site in your browser
2. Browse over to the site settings page by clicking on the following:
   Site Actions menu -> Site settings -> Modify All Site Settings
3. In the Site settings page, under the Galleries section, click on Master pages and page layouts
4. You are now at the Master Page Gallery. Click on the drop down menu for default.master and select Edit in Microsoft Office SharePoint Designer
   
5. SharePoint Designer will launch the default.master file and provide you with the site design and code.
6. Switch to code view by clicking on View menu -> Page -> Code

Find QuickLaunchMenu Within Default.Master Page

In SharePoint Designer’s code view, there are two instances of SharePoint:AspMenu control. One will be the top navigation and second will be the Quick Launch menu.

1. Hit Ctrl+F on your keyword and search for SharePoint:AspMenu
2. You will find it in the third instance of the term SharePoint:AspMen, as the first two terms are related to the top navigation
3. This is what the SharePoint:AspMenu QuickLaunch menu code looks like on a default Publishing Collaboration Portal web site:
   

   <sharepoint:aspmenu
   id=”QuickLaunchMenu”
   DataSourceId=”QuickLaunchSiteMap”
   runat=”server”
   Orientation=”Vertical”
   StaticDisplayLevels=”1″
   ItemWrap=”true”
   MaximumDynamicDisplayLevels=”1″
   StaticSubMenuIndent=”0″
   SkipLinkText=”">

Default QuickLaunchMenu Properties

Orientation - specify the direction in which to render the Menu control. Your options are Vertical or Horizontal. The default value is Vertical.

StaticDisplayLevels - specify the number of menu levels to display in a static menu. All menu levels below the specified value are displayed in a dynamic menu. The default value is 1. You can display multiple menu levels in the static menu by setting the StaticDisplayLevels property to a value greater than 1.

ItemWrap - when the text runs out of space, it is automatically split and continued on the following line. The default value is true.

MaximumDynamicDisplayLevels - you can also display additional levels in dynamic menus by setting this property to a value greater than 0. You can also display additional levels in dynamic menus by setting this property to a value greater than 0. Setting this property to 0 displays a flat menu up to the level specified by the StaticDisplayLevels property, without any dynamic menus.

StaticSubMenuIndent - specify the number of pixels by which to indent the submenu items within the static menu.

Other QuickLaunchMenu Properties

AccessKey - use the AccessKey property to specify the keyboard shortcut for the Web server control. This allows you to navigate quickly to the control by pressing the ALT key and the key for the specified character on the keyboard. For example, setting the access key of a control to the string “D” indicates that the user can navigate to the control by pressing ALT+D.

ToolTip - use the ToolTip property to specify the custom text that is displayed when the mouse pointer hovers over the Web server control.

Width - use the Width property to specify the width of the Web server control.

Example Usage

For example, if I wanted to have to display a collapsed view with fly-out menus for the following QuickLaunchMenu:

You will need to make changes to the StaticDisplayLevels and MaximumDynamicDisplayLevels property.

1. Set the StaticDisplayLevels propery value of the Menu control to 1
   
2. Set the MaximumDynamicDisplayLevels property value of the Menu control to 1

The end result will be:

Additional Resources:

• Customizing the WSS 3.0/MOSS 2007 Menu Control — MossMenu source code released
• Heather Solomon’s QuickLaunchMenu CSS reference
• Complete list of AspMenu members (Microsoft.SharePoint.WebControls) - MSDN
• MOSS Navigation Deep-Dive Part 1, Part 2
• MOSS2007 – Look and Feel: Part 2 – Navigation Bar Basics, Part 3 – Navigation Again, Part 4 – Navigation Again
• Customizing Quick Launch and the Top Link Bar Through the User Interface
• How to: Customize the Display of Quick Launch