We decided to setup a base that we can use at clients when they want to brand the global navigation and have a proper dropdown style menu.

We went with JQuery, and I eventually came across this library for JQuery called superfish which is built for dropdown menus. So below is the steps I followed to get this working.

Thanks

I first have to thank Christian Stahl, his post on how to customise the global Navigation with CSS (can be found here) was really helpful in sorting out which CSS classes needed to be overridden in my custom CSS.  I actually use his CSS file below as a starting point.

Some Caveats

I found that you have to have the following for my option to work:

• Publishing Sites Feature must be enabled.
• In Site settings, sub sites must be checked in navigation for global navigation

When I start below I am making the assumption that the above are in place in your SharePoint environment.

Files

All the files you need are here

Steps

you will need to upload upload the files in the folder somewhere. For easy of use, I uploaded them to a folder in the Styles Library in the root site collection.

Once you have uploaded these files, you need to do a bit of wizardry in your master page to get these to work.

So open up your master page in your preferred editor, I used SharePoint designer, and add the above files into the head section:

One thing you must remember is to put the CSS file in after the line

<SharePoint:CssLink runat=”server” Version=”4”/>

This line loads the default CSS file, and you want your CSS to override the global navigation CSS classes in that file, so it must go after that line.

If you check in and approve your master page, and do a refresh of the site, you should see your global navigation looking like I have blow, if you haven’t changed the CSS file provided at all:

The drop down functionality now needs to be setup. You have already included the JQuery and Superfish files, so we just need to make one minor change to the global navigation control in the master page and also include the JQuery that will show the dropdown.

So back to your favourite editor, and add the following into your head section again:

$(document).ready(function() {
  $('.menu-horizontal ul ul ul').superfish({
     delay:       1000,
     animation:   {opacity:'show',height:'show'},
     speed:       'normal',
     autoArrows:  false,
     dropShadows: false
  });
});

just a note, I found a script section already there so I added the above code in there:

<script type="text/javascript">
    var _fV4UI = true;
</script>

As you can see, we are telling JQuery to apply Superfish to the global navigation CSS classes. the variables we set are pretty straight forward, but you can get comprehensive documentation on the Superfish site.

The last change we need to make is to tell the global navigation control to increase the display Levels, I have set mine to 2. You need to search for a SharePoint:AspMenu control with the ID of “TopNavigation” (depending on the master page you are editing the id may include other text, for example, if you edit the V4.master the ID will be “TopNavigationV4” while default is “TopNavigationMenu”) and set the attribute “MaximumDynamicDisplayLevels”:

Once again, check in and approve the master page and then refresh your site, if all goes according to plan you should get the following:

If you don’t get a drop down menu like I have above then check the following:

• You have the Publishing feature activated  for your site collection:

  

• Ensure that each site is a publishing site, or has the publishing features enabled on them.

• Ensure that “Show subsites” is checked in site settings:

  

• Ensure that each sub site is set to use the same navigation items as it’s parent and that it is set to show sub-sites:

  

Disclaimer:

Please read the disclaimer if you plan on using anything from this article.