The Quick Launch can be a great way to highlight the process or methodology that your team are following; however,  if you have a project site with a very busy Quick Launch it can often take over the page and become too dominant. Some of our customers prefer to reduce the noise of the Quick Launch by collapsing the content to just the headers and enabling flyout menus for the rest of the content.

In this post, I will describe how to do just that. For today, this is SharePoint 2010 only. You can also do this in SharePoint 2007 but the steps and tools required are more complex. The site I will use is the default IT Project Manager template, shown below. As you can see the Quick Launch is quite long.

To enable flyout menus on the Quick Launch:

1. Navigate to the site in question and click Site Actions | Edit in SharePoint Designer.
   
   
   
2. Right on v4.master and click Copy
   
   
   
3. Click Paste.
   Note: Creating a copy of the master page before editing it is always a good idea, as it makes it easier to revert any changes.
   
4. Right-click on the copy and click Edit File in Advanced Mode.
   
   
   
5. Search for
   <SharePoint:AspMenu id="V4QuickLaunchMenu"
6. Set the value of the StaticDisplayLevels attribute and the MaximumDynamicDisplayLevels attribute to 1.
   
   
   
7. Save the file.
8. If asked, click Yes to confirm the change.
   
   
   
9. Return to the Master Page gallery, right-click on the customized file and click Set as Default Master Page.
   
   
   
10. Return to the site and refresh to see the effects of your changes. The flyout menu control will be there, but it will have a transparent background. We will remedy this next.
11. Return to the edited master page and paste the below CSS code just before the </head> tag.

<style type="text/css">
li.dynamic a {
background-color:#fcfcfc;
}
</style>


12. Save the file, return to the site and refresh the page.
    You should have flyout menus just like the below!