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.
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.3 (338)
Source: Mega Menu Solution (Source) - Version 1.3 (399)
90 Responses to SharePoint 2010 and Mega Drop Down Menu Navigation (Updated with Download)
So how is this going Tom? I also down loaded the POC from codeplex.
The one thing I would like to do and not even sure if it is possible is to create this dynamically based on the Taxonomy Term Store. Our company has a Topics list several layers deep.
Good Luck and look forward to seeing your solution.
-Tom
Haven’t had much more time to work on it this week unfortunately.
Interesting idea with the term store, not sure how it would work in practice though.
I was thinking of looking into creating a custom admin page for the navigation. But I don’t know, this may just over complicate things.
I have some ideas about the admin page tom, regarding themes
.
We have also added some stuff around security trimming links based on sharepoint group membership.
Hi – are you still working on this? Do you have the code available? It looks good!
Please, share our page with Mega Drop Down Menu Navigation to help people like me who don’t know code well. Thanks! Daniel
Hi. You did a cool solution! Please, tell me step-by-step how you did it! Thank you. Carlos
Hi Guys, I will look at getting something up this weekend.
Cheers,
Tom
Hey Tom, excellent work here dude… How did you go getting the source code up. Would love to use this
Thanks all, sorry about the delay. I have uploaded the WSP above. I am really still playing with this at the moment but will upload the source soon.
You are the man! Thank you very much!
Cheers for the dload Tom.. Awesome work hey!
I’m trying to modify the css to theme it with our SP site, but am having a bit of difficulty working out which properties are for which… any pointers you can give me?
Cheers dude
ohh also want to use this for a sub-site.. I’ve setup lists within that site based on the ones your solution created, but how do I point to these now?
Hey mate,
The solution will always refer to the lists in the SC root web. I’ll upload the source later today or tomorrow and you should be able to change where the control looks for the lists.
With the CSS, I must admit that the properties aren’t named the best. It is pretty much the same as what comes with the menu from Design Chemical. To figure out what styles are being used I would suggest using the developer tools in IE.
Hi Tom,
I like your solution very much! Is it possible to get a copy of your source code so I can extend it?
Particularly, I am looking to add more levels of nesting in the subcategories.
Any help would be GREATLY appreaciated.
Thx – Alisha
Hi,
Thank you for the great tool. Is it possible to get source code. I would like to make some changes for my projects.
Thanks
Hi Tom,
This is great work. I am running into a weird issue. I am able to upload the wsp to a SC, but I cannot seem to activate it. Are there dependancies that may cause this?
Hi Tom,
The issue continues when I try to deploy via VSS
Error 1 Error occurred in deployment step ‘Add Solution’: Failed to load receiver assembly “MegaMenu, Version=1.0.0.0, Culture=neutral, PublicKeyToken=cfb3894c41195587″ for feature “WspImportProject2_Feature1″ (ID: 4cc817dd-3f08-4be9-85ce-223d37037155).: System.IO.FileNotFoundException: Could not load file or assembly ‘MegaMenu, Version=1.0.0.0, Culture=neutral, PublicKeyToken=cfb3894c41195587′ or one of its dependencies. The system cannot find the file specified.
File name: ‘MegaMenu, Version=1.0.0.0, Culture=neutral, PublicKeyToken=cfb3894c41195587′
at System.Reflection.Assembly._nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, Assembly locationHint, StackCrawlMark& stackMark, Boolean throwOnFileNotFound, Boolean forIntrospection)
at System.Reflection.Assembly.InternalLoad(AssemblyName assemblyRef, Evidence assemblySecurity, StackCrawlMark& stackMark, Boolean forIntrospection)
at System.Reflection.Assembly.InternalLoad(String assemblyString, Evidence assemblySecurity, StackCrawlMark& stackMark, Boolean forIntrospection)
at System.Reflection.Assembly.Load(String assemblyString)
at Microsoft.SharePoint.Administration.SPFeatureDefinition.get_ReceiverObject()
Any ideas?
Jakes
Hi Guys,
The only dependency that I have set is on the Publishing Infrastructure. Looks like the problem might be related to you importing the WSP into VS. I would deploy this as a solution directly to the SharePoint environment using Add-SPSolution cmdlet.
I’ll upload the source in two secs for people to play around with. I have noticed some problems with the CSS and support with IE7. This is due to the weird z-index issues that IE7 has.
I’d be interested to see what you guys do with it once I post the source. Feel free to send updates either via the blog or over twitter.
I have added the source, check out the main post for the download link
Thanks Tom.
I will give it a go
Hi Tom,
I am pulling my hair out here…I cannot understand why this is not deploying. I get the following error when I deploy to a new SC.
Error 2 Error occurred in deployment step ‘Activate Features’: Object reference not set to an instance of an object.
I have enabled publishing and googled the error, but nothing seems to work…
If you do have some time, can you point me in the right direction please….?
Is this from the source or WSP?
Hi Tom,
I get an error on WSP as well, but this is after I build and deploy the source code. Does it matter that the SC that I deploy it to does not have a childsite? That is the only thing that I have not tried.
Thanks again for your thoughts…
Jakes
Hi Jakes,
Sorry for the trouble, looks like the source I uploaded was a bit messed up, not sure how I managed that.
I have updated the download links with a newer version of the source/WSP which will hopefully resolve the problem.
I also made some amendments which should fix the CSS problems I mentioned earlier. If you deactivate the solution it will clean up everything including removal of the Sections/Items lists. Just keep this in mind if you have set up a massive navigation structure.
Hope this fixes your problems, let me know how you go.
Hi Tom,
Success!!! Thank you so much! I have been trying to find a way to get a navigation system in place across SC’s, that also looked nice. This solution is exactly what I have had in mind!
Thank you for your willingness to assist.
BTW, I am located in Australia as well
Cheers mate!
Jakes
Awesome, good to hear it’s now working, sorry about the earlier trouble.
Go Australia!
Cheers,
Tom
Tom,
Do you know if this feature can be used across Site collections? I would like to have the code files centralized, so that I do not need to make changes on all the SC’s. Will something like this work?
http://blog.pathtosharepoint.com/2009/02/15/a-content-editor-web-part-for-every-home/
Or do you know of another way? I have tried it with making hard coded references to a Code Library site. However, the nav bar does not appear….
Please feel free to tell me to buzz off
Jakes
Hi Jakes,
I’m sure this would be possible, I’ll see if I can take a look for you over the weekend.
Tom
Thanks Tom!
I will do the same and see if I can figure out a way to do this…
Hi Tom,
Have you had time to look into the request. I am not too familiar with sharepoint programming. The only option that I think could work is some kind of search query to access the lists across the SC’s. I do not have the skill set to do that at this point in time.
Am I on the right path, or is there another way?
Jakes
Hi Jakes,
Sorry haven’t had a chance to check this out yet. The code is just getting the RootWeb of the current site collection. Instead of getting the current site collection you would instead have something like:
using (SPSite site = new SPSite (“[Site URL]“)) {
// existing code goes here
}
You might have to make a few slight amendments but I would think most of the code should be able to remain the same. Let me know how it goes.
Hello,
I want to be able to deploy this, but using my own masterpage. Can you tell me what I would need to copy/paste from yours to mine?
Thanks!
George
Hi Tom.
I have not been successful in my attempts. When I change the code as per above I get an “object not set” error.
I would dearly want to use this in our environment, but I cannot get it sorted and I may need to scratch it as part of the project if I do not get it resolved within the week unfortunately.
I trust that you’d find a few minutes to take a look. Please email me, if you are able to assist.
Jakes
Hi Jakes
I work with Tom, and have been developing the mega menu alongside him, i also have a newer version but its locked away.
We could definately help you and your company with your SharePoint project.
Please e-mail me at chrisg @ loftusit.com.au and we can discuss further on your options.
Regards,
Chris
Hi Tom and Chris,
Have you made any progress?
Chris, I sent you an email as per your request.
Regards,
Jakes
Hi,
Thanks for this solution. I have it working fairly easily now across all site collections using the two lists in the root SC.
If you are thinking about doing this here are the pointers:
– Get the lists completely out of the solution and deploy them to the root web or just build them there. Also don’t remove them when the feature deactivates,,, so remove all list code except the control code to go and read them.
– I ditched the PublishingWeb in the eventreceiver and went with SPWeb currentWeb = ((SPSite)properties.Feature.Parent).RootWeb;
– for the user control I added an app.config file and then called the hard coded path to the rootSC to use the lists,
//Get listitems to render
SPSite siteCollection = new SPSite(rootSiteUrl);
SPWeb site = siteCollection.OpenWeb();
Couple of other tweaks but these are the main ones.
The main thing is to only ever have the two lists in one SC,,, have the hardcoded path to read those lists and just activate and deactivate the masterpage.
Hope this helps any still trying to run this across mulitple SC’s.
Regards,
Alan P
-
Would you be willing to share thaat source code? I am having difficulty in implementing this suggested work around… Thanks
Hi Tom,
Thank you for sharing this great tool. I just have a quick question about using a different skin.
I would like to use Blue skin if possible.
Thanks,
Singh
Hi Guys,
Here is a copy i have been working on, it has some additional features. @singh my copy is in a blue skin. It has a couple of other changes to the master page guys, so feel free to edit it however you want, ive uploaded the source below.
Additional Features:
- Add sites to lists when created (two levels)
- Security Filter Menu Items based on group
- SP Services / jQuery UI is there, look at tabs.html (put it in a content editor) to figure out what its doing, quite cool, youll need to create a couple of extra lists.
http://cube4.com.au/wp-content/plugins/download-monitor/download.php?id=6
Hi Chris,
Thank you for sharing your code.
Keep up the good work.
Singh
Hi Guys,
Is there a way to Sort Menu Item Links by adding “Item Order” column to the list.
Thanks,
Singh
Hi Singh,
This would just be a matter of adding that column and then changing the CAML query to sort by that field (look for the SPQuery object).
Cheers,
Tom
Bigpatty,
I too would be interested in you version of this project. I could not code my way out of a wet paper bag but I think Tom’s solution would be great if it had a single location for the two lists.
Tom,
Great work on this sir. Let us know if you plan on making the modifications Bigpatty made as I feel this would make for a perfect solution to global nav across site collections.
Thanks,
Jim
Hi Jim,
I will be releasing a version that does this in the coming weeks.
Hey Tom,
Awsome blog here!
I just wonder of this works on sharepoint online / 365?
Thanks!
Ad
Tom – this is great work – it’s exactly what I have been looking for. I’m hoping you can help – we deployed it, but on several sites we get this error:
“Trying to use an SPWeb object that has been closed or disposed and is no longer valid. ”
If we deactivate the feature, it goes away. Any ideas why this would happen? THANKS in advance.
@Ad, sorry for the delay in getting back to you. Since this solution involves a user control I don’t believe it would work in a sandboxed environment unfortunately.
@Bob, That’s interesting that happens, when do you notice this occurs? When you visit the subsite homepage or does it appear at some other point?
I get following error when I try search after changing to v4_mega.master . could please help.
System.Web.HttpException: Cannot find ContentPlaceHolder ‘SPNavigation’ in the master page ‘/_catalogs/masterpage/MegaMenu/v4_mega.master’, verify content control’s ContentPlaceHolderID attribute in the content page.
at System.Web.UI.MasterPage.CreateMaster(TemplateControl owner, HttpContext context, VirtualPath masterPageFile, IDictionary contentTemplateCollection)
at System.Web.UI.Page.get_Master()
at System.Web.UI.Page.ApplyMasterPage()
at System.Web.UI.Page.PerformPreInit()
at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
@Mahendra the v4_mega.master page is not deisgned for the search center templates. i would recommend switching your search center back to the default one using sharepoint designer.
Thanks. Switch back the search centre to v4 master.
Tom – I was having this error: Trying to use an SPWeb object that has been closed or disposed and is no longer valid.
I discovered that when I was creating site collections, I was activating features one right after the other, then hiding all of the publishing lists from browsers. I found if I did all of my usual site setups first, then activated Mega Menu – I didn’t have the error. That doesn’t narrow it down, but it gets me in business! Thanks for addressing my post!
Hi guys, thanks for such comprehensive post on this!
I’m really keen to get this working but am running into an issue. I can deploy the wsp fine and active the feature but the sub items are not displaying correctly. Digging around and think it was related to the juery files not loading I noticed that the only the “jquery.hoverintent.minified.js” file is uploaded” to the library and not the other 4 files as referenced in the project. I tried manually uploading the files but get this error:
The URL ‘Style Library/MegaMenu/JS/jquery-1.7.1.min.js’ is invalid. It may refer to a nonexistent file or folder, or refer to a valid file or folder that is not in the current Web.
I also have the same issue when I deploy via Visual Studio and the really weird thing is when I open the list in SharePoint Designer, I can see the files! I’ve done a lot of searching on this but haven’t been able to resolve.
Any ideas on what the issue may be?
Thanks,
Mark
Hi Mark,
i havent had a chance to look at the source code for Tom.
But in the elements.xml file make sure all the different entrys have Type=”GhostableInLibrary” IgnoreIfAlreadyExists=”TRUE” set
Hi Chris,
Thanks for your reply.
I checked the source code and confirmed that Type=”GhostableInLibrary” IgnoreIfAlreadyExists=”TRUE”.
Also I had the same issue when deploying to another farm. Not sure what I am doing wrong.
Cheers,
Mark
Ok, i am trying some changes tomorrow for someone else ill see if i run in to the issue, have not previously
Hi Mark,
I did not run in to any issues.
Perhaps you could move the resources to the _layouts directory and then you should not face this issue. Not sure why on your farm setups your seeing this issue.
Hi Chris,
Thanks for your reply. I will have another look at it and re-test. Again, thanks. I appreciate your help.
Mark
Just to let you know your website looks a little bit strange on Firefox on my netbook with Linux .
Hi,
Absolutely fantastic work. I have a problem when using images in the menu. The menu renders perfectly in Firefox, but in IE9 the borders of the menu seems not to correct around the image. What happens is that the image is not in the borders.
Thanks
Hi,
Do you mean images that come with the solution, or your own custom images?
Sounds like you may need to adjust the CSS for IE9, or force the page to render in compatability mode.
Yes, that is what I mean. I will look at it. Is there a resolution to adjust my images for IE?
Pingback: UserControl: Input Paramater from ASPX – CUBE4
I reviisted the megamenu the other day and for some reason this time it works. Not sure why it didn’t before but all good now:)
How hard do you think it would be to add the ability to add ordering to the items in the ‘Mega Menu Items’ list?
Loving what I’ve seen so far
Cheers!
Hey Mark,
It would be easy, you just need to add a number column with the order you want, and then modify the CAML query to order by that column.
To help with the CAML i recommend U2U CAML Builder.
Thanks mate, I will give this a shot!
Hi Chris, I’ve downloaded the source but can’t open it in VS2010 Ultimate – it says it was created in a newer version. Which version do you use?
Is there a way to create the wsp file from the source code on a machine that doesnt have SharePoint installed? We’re not allowed to install Visual Studio on the SharePoint server
You will need SharePoint installed along side Visual Studio – best bet is to setup a separate development environment.
Hi Guys,
I’ve since added in code to order by an extra column. All working good.
I’ve just moved the control into my own custom master page and it all works fine but since I moved it I noticed that there is a slight delay where you can see the text of the MenaMenuItems “section” in the megamenu bar. For example if I have a section called “Department” under sites I can see “departments” listed next to the site heading for a brief instance before they correctly render under the drop down arrows. I think it’s to do with the order that the files load in.
I’ve moved the megamenu CSS registration above my own and also moved the script (adds “fast” “slide” “hover” events) add the script to the top of the master page. It’s intesting that when I moved it to the top the arrows no longer render and I see the “section” text next to the site heading and nothing loads so I’m sure it’s something to do with the way this script is loading in my master page but I’m not sure how to go about fixing.
Any help appreciated!
Thanks,
Mark
Hi Mark,
I think this is probably due to the JQuery and the fact that the code runs just after the page finishes loading. This means until the JavaScript runs and applies the additional CSS classes you will see menu items out of place.
I have set this up before for a particular environment. From memory I just set the mega menu div to be hidden on page load and then at the end of the JQuery, after the menu is all setup, I added some script to show the div.
I can see if I can dig this up if you have trouble getting it working.
Cheers,
Tom
Thanks for your reply Tom. I noticed it’s happening on MegaMenu code from this site also. If you have it handy that would be great.
Thanks again,
Mark
Yep, this was a change that I made after I published this article. I’ll see what I can do.
Cheers
Sorry Mark, meant to grab this code at work today. Sent myself a reminder for tomorrow.
No problem, Tom. Thanks!
This should hopefully be it Mark. All that is really changed in the CSS is a property to hide the mega-menu container intiially then there is a line in the javascript function MegaSetup to show the container. This will stop you seeing the menu loading and it will only show once everything has loaded.
You should be able to just replace the files in the solution or on the site to see these changes.
http://cube4.com.au/wp-content/uploads/2012/08/MegaMenu-ModifiedJS.zip
Awesome Tom. Thanks so much. That did the trick! I’m sure eventually I would have got it but I’m pretty new to all this so It would have taken me a lot longer!! Now if only I could get my solution to deployment process ironed out where all files are checked in and approved, images etc are read from the root site collection and new site colections are automatically branded , I will be a happy man.
Thanks again for the help. I owe you a beer or two when I’m next in Sydney!
Hi Tom, great article. I would like to have the width and height of the menu irrespective of the Menu Items in the Menu. Could you pls guid me how to achieve this? Thanks a lot.
Hi Varshan, not sure what you mean, would you be able to clarify further? Thanks
Loaded V1.1 WSP to our SP2012 server and dropped the control into our customised nightandday master – the menu appears fine however when I edit any list item in normal view I get a “Trying to use an SPWeb object that has been closed or disposed and is no longer valid.” Sharepoint novice here – but I can view and edit in datasheet view without the error. Any assistance appreciated.
Hi Daniel,
Have you pinned this down to the mega menu, I have not seen this problem on various other environments.
If I deactivate the mega-menu feature the problem dissapears and reappears on activation. I presume that somewhere there is a SPWeb element being deactivated. I’ll try deploying it manually and see what happens.
Hi Tom,
I’ve found an issue when using the mega menu with another web part on the page that uses jquery. When I add the 3rd part web part to the page, the menu no longer loads because the other web part is using a different version of jquery and it loads last.
I managed to get the menu to display by using jquery.noconflict() but the hover effects are no longer working. Debugging in F12 Dev tools I can see that it’s now conflicting with hoverintent JS.
“CRIPT5007: Unable to get value of the property ‘extend’: object is null or undefined
jquery.hoverintent.minified.js, line 9 character 803″
I see that you have ‘hover’ defined in your code and in the megamenu JS file. I know I somehow need to define to pull the hover effect from the hoverintent JS file but I’m not sure how to go about it exactly as it’s not working with the noconflict declaration.
Do you have any suggestions?
Thanks,
Mark
Search Functionality. Is there any way to use the v4_mega.master on a page with an embedded search such as the default publishing site or a groupo work site? I saw the comment earlier about changing to v4.master for a enterprise search site but I need basic search functionality on the same page as the mega-menu.
Thanks
Dan
Hi Dan,
Sorry about the delay in responding. I’m planning to release a new version of the solution that fixes this in the next few days. There should be a few other changes that resolve some other outstanding problems too.
Cheers,
Tom
Hi Dan,
I have uploaded a new version of the solution in the post above (Version 1.3). Can you test it out for me and let me know if this is fixed for you.
Cheers,
Tom
Do you guys have a WSP that will apply to all sub sites? Currently it only applies to the top level site or landing page. When navigating to the sub site the navigation defaults to the normal sharepoint navigation. Unfortunately I don’t have access to a development environment to work on the solution source. Any help would be appreciated.
Hi Troy,
The solution should apply to subsites. In fact there is an event receiver that gets triggered on sub site creation which should apply the v4_mega masterpage. Can you confirm that this master page is applied on the subsite?
Thank you for this solution, but I don’t bring it to run correctly.
I activated the publishing and mega menu feature, the black border appears and the two lists are available. but when i try to open a webpart site i get the error: Trying to use an SPWeb object that has been closed or disposed and is no longer valid.
Can you please help me?
Hi Besfort,
I have uploaded a new version of this solution. Would you be able to try this and let me know if you continue to have further issues?
WSP: http://blog.cube4.com.au/wp-content/plugins/download-monitor/download.php?id=17
Source: http://blog.cube4.com.au/wp-content/plugins/download-monitor/download.php?id=18
Hi Tom
Thank you it works, great job. Another Question: Is there any possibility to make it run on SP 2010 Foundation? It would be really nice, because SP Server is not really a cheap thing.
thanks