SharePoint 2016: Making the Quick Launch Bar Dynamic and Styling the Menu Items

The default look of the stock left hand side menu (also called the Quick Launch menu bar) that comes with SharePoint is really basic and is meant for you to style. The default behavior is to show a 2-level deep menu containing ‘Headings’ and indented ‘Navigation Links’. This hierarchy is static and is shown to the users as entirely expanded, which can take up a lot of screen real-estate.

If you have a small site with just a few pages, then you can see how it is OK to show an expanded and static left hand menu bar. However, if you have a more complex site structure with many pages, then you’ll absolutely want the left hand menu bar to show collapsed by default, with the Navigation Links appearing when the user mouses over a particular heading.

SharePoint does support turning the static Quick Launch menu bar into a fly-out menu. To do this, you’ll need to edit the master page in SharePoint designer. For instructions on editing the Master page of your site in SharePoint Designer 2013, please feel free to check out the step-by-step I have provided in this article.

I’m going to assume that now you have opened the Master page of your SharePoint Web site in SharePoint designer 2013 and that you are looking at the HTML markup. Also note that I’m dealing with SharePoint 2016, so your experience may be slightly different depending on the version of SharePoint that you are working with.

Telling SharePoint to Draw a Fly-out Menu

First, you’ll need to find the control with an ID of V4QuickLaunchMenu, which is the markup for configuring the Quick launch menu. (Note: if you find a control with the ID ID=”TopNavigationMenu”, do not alter this, as it references the top menu bar, not the look of the left-hand side Quick Launch menu bar. Also, make sure the control is <SharePoint:AspMenu… if you run a search for V4QuickLaunchMenu, you’ll first get a control that is <SharePoint:SPNavigationManager).

Here is what the tag for the left-hand side Quick Launch menu bar looks like:

<SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" Orientation="Vertical" StaticDisplayLevels="3" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="0" SkipLinkText="" />
</SharePoint:SPNavigationManager>

Now you’ll need to tell SharePoint that instead of the default expanded menu view, you want just the headers to show, with an arrow beside those that can dynamically fly out to show sub-items when a user mouses over them. Here’s how you update the markup to do this:

Change StaticDisplayLevels=”3″ TO StaticDisplayLevels=”1″
Change MaximumDynamicDisplayLevels=”0″ TO MaximumDynamicDisplayLevels=”1″

Now save your change in SharePoint Designer and reload the Web site. You should see that your quick launch menu bar has turned into a fly-out menu.

Adding Some Style to your Fly-out Menu

The problem you’ll see now is that the fly out menu items are not styled in any way and can look like they all belong together like a run-on sentence. TSince tere is no physical separator to distinguish between each menu item, we’ll need to look into the SharePoint HTML markup to be able to style the look of the menu items so they are more user-intuitive.

Examining the SharePoint HTML

You will need to add custom CSS to style the fly-out menu items. Here is the default SharePoint HTML that each fly out menu item is rendered as:

<a title="Test stuff" class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/TestSite/SitePages/Menu Test.aspx">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Conference Bridge Information</span>
</span></a>

Note that there is an insane amount of nesting here as well. This actually works to help out so that we can specifically format only the fly-out links rather than the root side-bar links as well (they share the same classes).

Here is the class hierarchy:

* The Root Links *

Encapsulating Menu Div: <div class=”noindex ms-core-listMenu-verticalBox”
Root UL: <ul class=”root ms-core-listMenu-root static”
Root Li: <li class=”static dynamic-children”>
Root text (followed immediately by the UL below for the fly-out hyperlinks: <a title=”root text”

* The fly outs *

UL to encapsulate the fly-outs for a root link: <ul class=”dynamic” style=”z-index: 1100;”>
Li to encapsulate the fly-out: <li class=”dynamic”>
Fly-out hyperlink: <a title=”Test stuff” class=”dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode”

Steps to Format the Menu

Ok, so now that we know the hierarchy, we can style both the hyperlink and the list item so that only the fly-out menu options are affected. Obviously you can make these as artistic as you like, but to illustrate basic formatting, in the example below we will:

1) Set a background color of white on the hyperlink text.

2) Add a thin 1 pixel dashed separating line between items (using border-bottom).

3) We’ll need to add a top line for the first item. We will do this using the :first-child pseudo class

4) We will add a small amount of padding between the fly-out menu items (padding-bottom:3px)

5) We will set a minimum width for the fly-out items since otherwise they can look really squished.

6) We will use the :hover pseudo-class on each fly-out link to make highlight it when the user mouses-over it.

Adding the CSS to Style your Fly-out Menu

Below is the markup to accomplish the fly-out item formatting described above. To add the formatting markup, simply paste the style before the </head> element of your master page.

<style type="text/css">
 ul.ms-core-listMenu-root li ul li a.ms-navedit-linkNode{
  background-color:white;
 } ul.ms-core-listMenu-root li ul li a.ms-navedit-linkNode:hover{
  background-color:#D8E3FF;
 }
 ul.ms-core-listMenu-root li ul li:first-child{
 border-top:1px black dashed;
 }
 ul.ms-core-listMenu-root li ul li{
 border-bottom:1px black dashed;
 padding-bottom:3px;
 min-width:150px;
 }
</style>

Justin Cooney

recent posts

about