Customizing the Navigation Bar

Aug 28, 2013 at 11:55 PM
I just started using the Twitter Bootstrap and it's awesome. Looks great for our iPad users and IE/Firefox users. My outstanding requirement is to incorporate a mega-menu into the design. I'd like to use the bootstrap wsp as a base because it's working so well for the design. I had previously used a feature posted by Cube4 but I've not been successful at recreating that within 2013 - i'm even less sure of how to change the navigation in the bootstrap template without potentially breaking anything. Any thoughts?
Coordinator
Aug 30, 2013 at 6:21 PM
Hi,

Ah, navigation and Responsive. A very difficult decision.

My suggestion, build your navigation from scratch, just place it in a Bootstrap container/row.

Are you attempting to have SharePoint manage your navigation using either structured navigation or managed metadata navigation? I assume you are. In that case then you will either need to build your own sitemapdata provider/menu control (inheriting from the aspmenu control), or you can use JavaScript after html delivery on the client side to take what SP provides and tweak the HTML structure to match what you need. Neither of these are really Bootstrap friendly, but I have found that Bootstrap navigation is not mega menu friendly as they do not believe in mega menus. Any of these ideas will require you know with CSS/HTML real well or JavaScript and/or VS real well. There is no easy answer right now with SP, navigation and RWD.

An issue with using JavaScript to rerender your navigation on the client side is that SP navigation normally does not provide enough information for links to make mega menus contain the information you require. Many public facing SP sites I know of use static top navigation, or navigation based on a list and list view web part. This gives you a lot more control of navigation content and HTML delivery, but is either static or requires that custom list/XSLT

I prefer a hybrid approach of using either a custom sitemapdata provider and JavaScript, or a custom menu control that inherits from aspmenu. Both require a solid coder, familiar with VS, but gives you almost complete control.

I wish I had "the answer" for you but SP, navigation and responsive design are not the greatest friends yet. We are working on solutions, but as of now I have found each project is still unique.

Eric
Aug 31, 2013 at 5:54 PM
I just finished writing code to replace the OOTB SP2013 navigation with MegaMenus using JS, send me an email if you are interested in getting more info, unfortunately, I can't share the code.

HTH.
Sep 3, 2013 at 6:38 PM
Eric,

Thank you so much for such a thoughtful answer. I really appreciate that. I did finally figure out how to get it to work using Javascript and you're right - it's not optimal on the iPad, but at present that accounts for such a minority of our users that I think they will want to continue with the mega-menu design. I'm still running into a few hiccups, mostly on the system pages, but otherwise things are working quite well.

Natalie
Coordinator
Sep 3, 2013 at 9:05 PM
HTH,

That is great news that you were able to get MegaMenus working. Could you provide any insights or really good resources for others? Are there any particular gotcha's that someone should be aware of? I am sure that we all would like any insights you could provide.

Thanks,

Eric
Sep 4, 2013 at 5:34 PM
Sure, I'm actually still trying to hammer out some bugs - and maybe someone reading this will have some insights!

I grabbed the mega menu js from the Design Chemical site: jquery.hoverIntent.minified.js and jquery.dcmegamenu.1.3.3.js and referenced these in the bootstrap.html. I also created a megamenu-custom.js and referenced that as well.

The megemenu-custom.js uses the managed metadata navigation and was created by borrowing the sample script here:
http://blog-aspc.azurewebsites.net/so-whats-on-the-megamenu/

The mega menu pieces and css came from Design Chemical. I know there is a 2010 project here on Codeplex that also uses this and could also be referenced.
http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

This is working and even looks okay on the ipad. The css does require some tweaking, but you'd want to do that anyway to brand it for your own.

So far the only issue I've come across is the site settings pages load the drop downs for the top level sites and will only retract on hover. This is an issue for admins (obviously) and I've yet to resolve it. I'm also looking to hide the "Edit" link on the top navigation bar while leaving it in place on the quick launch.

Hope this helps someone else!
Natalie
Sep 3, 2014 at 8:47 AM
Edited Sep 3, 2014 at 8:48 AM
Hi,

I know this is an old thread, but I was wondering, if anyone found a great solution to the challenge of creating a Megamenu, using this project.

I am trying to create a new SharePoint 2013 site, using this project and furthermore I need to create a MegaMenu using a Termstore navigation structure.

Regards,
Larry
Sep 19, 2014 at 11:10 AM
Edited Sep 19, 2014 at 11:12 AM
Hi,

I managed to make a managed metadata-controlled responsive megamenu by using Yamm3 (http://geedmo.github.io/yamm3/) in my custom BS3 masterpage. I wrote some serverside code inside the PlaceHolderTopNavBar with a couple of asp:Repeater's to get the child nodes of the sitemap provider (topSiteMap) and adding the markup Yamm3 needs. Also I had to do some CSS adjustments to make this look okay. Perhaps, as Eric proposed, some JavaScript tweaking on the HTML structure is a better solution.

Regards,
Mats
Coordinator
Sep 19, 2014 at 2:23 PM
Sounds like you find a great solution for your project, thanks for the recommendation of Yamm3.

Custom code in a full trust solution won't work on O365 / SPO, but if that is not a requirement then sounds like a good option.

Eric
Sep 24, 2014 at 11:41 AM
Hi Mats,

Thanks a lot for your post!

We are using an SP2013 on premise, and one of my colleague bought a Mega Menu from MegaNavbar.com and he´s currently trying to make it fit into this project...
But this one looks like a nice approach..

Thanks Again!
Larry