SP2013 top navigation – reposition dynamic flyout content if it goes off screen

Hi everyone!

Lately my top navigation submenus have been growing rather long in terms of items shown, and this appeared to be causing problems for clients with lower resolution screens, as items dynamic flyouts would go off screen, either to the right, or down to the bottom.

I’ve come up with the solution that tackles both; treats these two separate issues, in this order:
– Firstly, we deal with height offsetting by extending the width of the flyout and stacking list items in two (or more, as required by actual height) side by side columns
– Next, we calculate the horizontal offsetting and make appopriate adjustments

The solution is JS + CSS based:
– On page load we need to bind mouse enter and leave events on the li elements of the top navigation
– When event is triggered we do calculations and apply a CSS mixture of inline styles and style classes.
– I have written a separate CSS class for the number of columns that we might end up with. It’s all in the code ūüôā

I’ll leave the embedding JS (don’t forget to run this after all of SP stuff has loaded) and CSS to your discretion, but the actual stuff to embed is here:

JS

Make sure you get the correct top navigation element id in (in my case it is “zz1_TopNavigationMenu”).
We end up applying CSS classes that could be “edge1”, “edge2”, … , “edgeN” – depending on the extended width

CSS

Here I need to account for all of the “edge1”, “edge2”, etc classes that I envision might get used (depending on the volume of the items in navigation). What I am actually accounting for here is flyout being rendered to far to the right due to extensive width (or just because flyout is too close to right part of the screen)

 

…And this is it, you should be all set here!

Some visual examples:

top-nav-grab

Leave a Reply

Your email address will not be published. Required fields are marked *