Supporters of End User
Web

SharePoint 2010 and Mega Drop Down Menu Navigation

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:Navigation; Javascript and jQuery; MOSS; WSS; Site Manager/Power User; 2010

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.

2012-03-30-SP2010MegaDropDownNav-01.png

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.

2012-03-30-SP2010MegaDropDownNav-02.png

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 thoroughly and I provide no guarantee. I would highly recommend using this in a test environment to ensure it meets your needs first.

Download:

WSP: Mega Menu Solution (WSP) – Version 1.1 (132)

Source: Mega Menu Solution (Source) – Version 1.1 (72)

Comments

Patrick

Nice one Tom

Hi Tom and great job. I have customized a menu using lists. First list is for the parent menu and then a child list. Also used jquery for this. My biggest hurdle was getting the parent menu selected when a user clicks the child link under the current parent menu. Will have to see your solution

Posted 03-Apr-2012 by Patrick
Daniel

Great Solution, I modified it so you can use it in any master page

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]

Posted 04-Apr-2012 by Daniel
Tom O'Connor

Cheers

Great, thanks for the feedback Daniel. I'll have a look at your code and make adjustments to the solution I use. Good to hear that you have managed to put it to use though. Since originally posting this article I have made a few changes to the version I personally use. Instead of manually inserting the user control in the master page I now use a delegate control to override the global nav. This way you can activate/deactivate the mega menu and even use the OOB v4.master.

Posted 06-Apr-2012 by Tom O'Connor
Daniel

Delegate Control

Tom you solution sounds like it's getting better and better. I'd like to know how you made it a delegate control to override the global nav. That sounds like a very clean way to implement the solution. Or if you want to post the solution so I can take a look that'd be great also.
 
 
 

Posted 06-Apr-2012 by Daniel
Stacy

Fantastic

This is just what I was looking for.  Thank you!
 
Is the color scheme customizable?  The general SharePoint themes seem to have no effect on it.

Posted 09-Apr-2012 by Stacy
Ingeborg Hawighorst

mega menu with a dvwp and a sharepoint list

I've published this article on EndUser Sharepoint a while ago: https://www.nothingbutsharepoint.com/sites/eusp/Pages/A-MegaMenu-for-SharePoint-2010-Using-a-DVWP-and-a-List.aspx The latest version of the xls code can be found on http://www.teylyn.com/articles/sharepoint-articles/sharepoint-mega-menu-from-a-dvwp-and-a-list/ It's no-code, just a DVWP. I've integrated it into the master page of our intranet site, the corporate comms team can make changes on the fly. No code, no developers, just end users. SharePoint rocks!

Posted 18-Apr-2012 by Ingeborg Hawighorst
Mark

Thank you

This is exactly what I've been looking for a while now! Thank you for posting! I'd like to deploy the navigation across multiple site collections and web apps so am thinking that a custom XML fie might work better. Would it be hard to read from XML?

Thanks again,
Mark

Posted 16-May-2012 by Mark
Samir Prabhu

Trying to use an SPWeb object that has been closed or disposed and is no longer valid.

Hi,
I am getting error as specified in Title, after deploying the solution. When I try to add a WebPart page, this error comes. However with WikiPage teamplate this error is not encountered.
 
I have also verified that the MegaMenu code is responsible for this, as another site collection without having this feature activated works just fine.
 
Thanks,

Posted 14-Aug-2012 by Samir Prabhu
Peter

control to copy to own master page

On comment Posted 04-Apr-2012 by Daniel, "So I took the control out and placed it in my master page" could some please specify the code to copy

Posted 05-Sep-2012 by Peter
Mark

control to copy to own master page

Hi Peter, I don't have the code in front of me but you'll need to copy the control registration, the CSS link, the link to the JS files, the megamenu script in the <script> tags and the reference to the mega menu control reference in the content as well.

Posted 06-Sep-2012 by Mark
Peter

control to copy to own master page

It would really help if some once can share the code to copy to own master page

Posted 07-Sep-2012 by Peter
Peter

control to copy to own master page

Could someone please share code to copy to own master page

Posted 07-Sep-2012 by Peter
Mark

control to copy to own master page

1. Add this registration tag:
<%@ Register TagPrefix="custom" TagName="MegaMenu" src="~/_controltemplates/MegaMenu/MegaDropDown.ascx" %>
2. Add the JS references:
   <SharePoint:Scriptlink runat="Server" Localizable="false" Name="~SiteCollection/Style Library/MegaMenu/JS/jquery-1.6.4.min.js" Language="javascript" />
    <SharePoint:Scriptlink runat="Server" Localizable="false" Name="~SiteCollection/Style Library/MegaMenu/JS/jquery.dcmegamenu.1.3.2.js" Language="javascript" />
    <SharePoint:Scriptlink runat="server" Localizable="false" Name="~SiteCollection/Style Library/MegaMenu/JS/jquery.hoverIntent.minified.js" Language="javascript" />
3. Add a reference to the CSS:
  <!-- Mega Menu CSS -->
    <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/MegaMenu/CSS/megamenu.css %>" After="corev4.css" runat="server"/>
 
 
4. Add the script to load the menu:
    <script type="text/javascript">
    $(document).ready(function($) {
        $('#mega-menu').dcMegaMenu({
      rowItems: '3',
      speed: 'fast',
      effect: 'slide',
      event: 'hover'
     });
    });
    </script>
5. Add this line:
   <custom:MegaMenu id="MegaMenu" runat="server" />
  
 
If you're not share were to add them in just look at the original and add to the same place in your custom master page

Posted 08-Sep-2012 by Mark
Manu Berdasco

Changes in source for deploying in Foundation

Hi all.
 
I´m interested in deploy the MegaMenu in a Sharepoint Foundation site, but Foundation doesn´t include The Publishing Infraestructure feature. Any way to change the source for allow this?
 
Thanks

Posted 15-Oct-2012 by Manu Berdasco
Daniel

Re: Changes in source for deploying in Foundation

Manu,
 
First of all Foundation includes the Publishing feature. You may need to Activate it. Also this masterpage may not work correctly without the Publishing feature activated.
 
However if you don't want to do that then try changing the line in the eventreceiver.cs that reads:
 
PublishingWeb currentWeb = PublishingWeb.GetPublishingWeb(currentSite.RootWeb);
 
to
 
SPWeb currentWeb = (SPWeb)properties.Feature.Parent;
 
Then change:
 
currentWeb.CustomMasterUrl.SetValue(WebAppRelativePath + "_catalogs/masterpage/MegaMenu/v4_mega.master", true);
 
to
 
currentWeb.CustomMasterUrl = "/_catalogs/masterpage/MegaMenu/v4_mega.master";
 

Posted 15-Oct-2012 by Daniel
Manu Berdasco

Thanks

sorry for re-posting the question (I did something strange refreshing the page). I´m going to try your suggestions :)
 
But, Are you sure thad SP Foundation supports Publishing feature?
 
 
Thanks so much
 

Posted 15-Oct-2012 by Manu Berdasco
Maden

Deactivating error

Thank you Tom for posting this, an excellent solution to implement.
 
Everything works great but I am having bit of a trouble with deactivating the feature. When I try to deactivate for a particular site colletion I get the following error.
 
An unexpected error has occurred.
Troubleshoot issues with Microsoft SharePoint Foundation.
Correlation ID: 5bdabe40-ef49-455b-b813-0a43af424691
Date and Time: 10/16/2012 10:20:27 AM
I removed the lists , but still not able to deactivate it. Any idea of how to do it ? Even on central admin I tried to removed the solution from "Manage Farm Feature" tab. Still no use.
 
Let me know if you have any idea about this.
 
Thank you,
Maden

Posted 16-Oct-2012 by Maden
sema

SPWeb object that has been closed or disposed and is no longer valid error

thanks for the solution. it's better to modify the magadropdown.ascx.cs file as follows to prevent this error

   //Get listitems to render
            siteCollection = SPContext.Current.Site;
            site = siteCollection.OpenWeb(); // added to fix the SPWeb object that has been closed or disposed and is no longer valid error - satavi

            if (site.IsRootWeb)
            {
                // Get a ListCollection from the current site
                try
                {
                    lists = site.Lists;
                    menuSections = lists["Mega Menu Sections"];
                    menuItems = lists["Mega Menu Items"];
                }
                catch { }
                finally
                {
                    site.Dispose();
                }
            }
            else //added to fix the SPWeb object that has been closed or disposed and is no longer valid error - satavi
            {
                //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 { }
                    finally
                    {
                        site.Dispose();
                    }
               // }
            }

Posted 09-Nov-2012 by sema
ram

changeitem order

how to change subsection order and items order.By deafault it showing alphabetic order but i need to change the order

Posted 13-Feb-2013 by ram
denisse

Archetonomy Mega Drop Down?

Our team is actually thinking about buying the Mega Drop Down from Archetonomy.com. Any of you guys tried it already? We tried the evaluation version but we can't seem to make it work. Is this legit?
 
I'm actually thinking of just using this solution so that we don't have to pay for it.
 
Thanks guys!

Posted 12-Mar-2013 by denisse
Marty

Archetonomy Mega Drop Down

We too are looking at purchasing Archetonomy's Mega Drop Down product. In our environment I am the SharePoint administrator, developer, etc not including all my other duties. Something easily deployed and implemented is very attractive to me due to time constraints of my position. Has anyone heard of this company and/or their MDD product?

Posted 03-Apr-2013 by Marty
Thomas

Target Audience

Hi there,
 
How can you use this solution with target audiencing on the various navigation items?

Posted 25-Sep-2013 by Thomas
Alex

Awesome right out of the box!

I just wanted to thank the developers of this awesome feature. It installs easily and works flawlessly after install. Looks great, works amazingly. Thanks again!

Posted 02-Oct-2013 by Alex
Jamie

Does anyone have a SP 2013 Version?

Great solution you guys works great in 2010. Anyone happen to have this updated for SP 2013 by chance? Would like to keep the menu after the upgrade if possible.

Posted 04-Nov-2013 by Jamie
Karanam

Has anyone tried to use caching to get the list items to form the menu?

Has anyone tried to use caching to cache the list items? PortalSiteMapProvider.GetCachedListItems in particular? Just to avoid round trip's to database everytime someone hits the intranet page where this control gets called?

Posted 28-Feb-2014 by Karanam

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: