Quick Launch

BrightWork Tip: Enable Flyout Menus on the Quick Launch

April 26, 2011 by

The Quick Launch can be a great way to highlight the process or methodology that your team is 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.

itpm_1

To enable flyout menus on the Quick Launch:

    1. Navigate to the site in question and click Site Actions | Edit in SharePoint Designer.
      image
    2. Right on v4.master and click Copy
      image
    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.image
    5. Search for V4QuickLaunchMenu
    6. Set the value of the StaticDisplayLevels attribute to 1.
    7. Set the MaximumDynamicDisplayLevels attribute to 1.
      image
    8. Save the file.
    9. If asked, click Yes to confirm the change.
      SNAGHTML157bd5f4
    10. Return to the Master Page gallery, right-click on the customized file and click Set as Default Master Page.
      image
    11. 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.
    12. Return to the edited master page and paste the below CSS code just before the </head> tag.

 

<style type=”text/css”>.menu-item{background-color:white;}</style>

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

image

 

Image credit

Pin It on Pinterest

Share This