SharePoint 2010 and Mega Drop Down Menu Navigation.

Page Image

Image Caption

4/2/2012 9:00 AM   by     00037ffe86e54f82@live.com

11

Categories:Navigation; Javascript and jQuery; MOSS; WSS; Site Manager/Power User; 2010

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.

Page Content

---

You may also be interested in: the only cloud-based Dev/Test solution for SharePoint by CloudShare

---

Editor's note: Contributor Tom O'Connor is a SharePoint consultant for Loftus IT. Follow him @heatus
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.

Edit:

I have uploaded the WSP/Source for this solution below. This will add a new Site Collection feature titled Mega Menu Navigation, once it is enabled it will change the masterpage to v4_mega.master (based on v4.master) which contains the reference to the new control. It also installs all files (CSS/Images/Javascript) in the Style Library folder, this means that the Publishing Infrastructure needs to be enabled.
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 thorough.

CODE FOR MENU 'S:
===================

Your solution was exactly what I was fighting with. I too was trying to use the DC mega menu. After playing with your solution for a while, I wanted to use my masterpage as I didn't feel like re-writing yours to match our design. So I took the control out and placed it in my master page. Big surprise it didn't work on the root site, however it worked on all sub sites. So after some playing I figured out why. In the MegaDropDown.ascx.cs I modified your CreateChildControls to the following and it fixed so I canuse it in my own masterpage.

 

Then I removed your master and associated files so that just the MegaDropDown.ascx and lists were deployed. Then copied the Register TagPrefix and MegaMenu control to my master page and it worked. Oh I also had to add the black.css file and set that up with my css.

 

[code]

//Get listitems to render
            siteCollection = SPContext.Current.Site;

            site = siteCollection.OpenWeb();

            if (site.IsRootWeb)
            {
                using (site = siteCollection.OpenWeb())
                {
                    // Get a ListCollection from the current site
                    try
                    {
                        lists = site.Lists;
                        menuSections = lists["Mega Menu Sections"];
                        menuItems = lists["Mega Menu Items"];
                    }
                    catch { }
                }
            }
            else
            {
                using (site = siteCollection.RootWeb)
                {
                    // Get a ListCollection from the current site
                    try
                    {
                        lists = site.Lists;
                        menuSections = lists["Mega Menu Sections"];
                        menuItems = lists["Mega Menu Items"];
                    }
                    catch { }
                }
            }

[/code]