SharePoint 2010 and Mega Drop Down Menu Navigation (Updated with Download)
Over the past few weeks I have been looking around trying to find examples on how people have replaced the default SharePoint navigation with a mega menu style nav. These things seem to be all the rage these days so why not jump on the bandwagon.
The closest example that I could find where somebody had implemented this was a CodePlex project titled SharePoint 2010 Starter Masterpage Feature with Mega DropDown Navigation Menu. This project was actually very helpful and pointed me in the right direction. There were a few things that I wanted to improve though, one major area was around the way the menu was maintained and updated.
In Nick Boumans proof of concept he creates a list containing the menu sections and in this there is a HTML field. This HTML field is designed to contain the structure of the drop down section itself. In my eyes this is fine for a proof of concept but I could just see that there would be problems if this was going to be maintained by non-technical content administrators. For example, if a tag was not closed this could potentially mess up the appearance of the whole site.
The solution that I came up with was to replace the singular list with two lists, one for sections and the other for items (links). I also wanted the ability to set a sub-section for each link.
Instead of a HTML field, the control would read the list items and generate HTML using the list fields. While this is not necessarily as versatile I had no need for anything overly fancy. I just wanted to have the ability to display links in an ordered fashion. Below is an example of the Item list containing a bunch of entries.
I replaced the Mega Drop Down Menu code used in the CodePlex project with a JQuery menu that I found – JQuery Mega Drop Down Menu Plugin. This was really just a personal preference, the JQuery menu provides the option to have the menu activate on click which is something I prefer.
At the moment this is still a work in progress as there are a few things that I would like to fix up before I release it to the wider community. I would be interested to hear from others who have implemented something similar and how you went about it.
Below is an example of the final output from the custom control that I created.
The menu content is controlled through two lists, Mega Menu Sections and Mega Menu Items, these are also created when the solution is activated.
If you deactivate the solution it will reset the masterpage back to v4.master and delete any files including the two lists. I will look at uploading the source in a few days.
Keep in mind that this has not been tested thoroughly and I provide no guarantee. I would highly recommend using this in a test environment to ensure it meets your needs first.