Managed Navigation, Enhanced with jQuery & CSS
In the previous example, we looked at how Managed Navigation can be used to provide several levels of fly-out menus, providing a great density of navigation links. However, it's not a visually pleasing presentation and the styling are not customizable out of the box.
With some clever client-side code (jQuery) and CSS, it would be possible to manipulate the HTML rendered in the browser to customize the appearance and make it more visually appealing. For example, instead of having a menu with flyouts inside of it, those flyouts could each be pulled into the original menu to render a real MegaMenu. This would actually be a great solution, except that Managed Navigation will not do security trimming. This is a big issue for most companies, but if it is not a problem for yours then this is a great approach.
Pros:
- OOTB functionality (Enhanced)
- Spans site collections
- Relatively easy to manage if you have permission to do so
Cons:
- No security trimming
- Will not work with Foundation
- New sites are not added automatically
- Requires Managed Metadata, permissions assigned for management
Based on the previous Managed navigation example, we can transform the menu into something like this:
Header1 |
Departments
|
Groups
|
Teams
|
|