Available space aware dropdown menus

Short summary: The 3rd level navigation flies out to the right by default, when you hover over it’s parent item. But what happens if there isn’t enough space for it to display it entirely? Well than we need a dropdown menu that is aware of the surrounding place and chooses wisely to go on the right or on the left.

It would be great to avoid content going out of the visual canvas and information partially to be lost into oblivion.

Of course there is a good news for you guys, because the horrible situation above doesn’t need to happen. We can avoid it, we can make it pretty and intelligent.

But for this task no CSS on Earth can help us, we need to get the big guns, the Javascript machine gun. Lets see what the code looks like:

In first instance we navigate through the navigation items and set up an event listener of mouse over.

Then we look for a dropdown-menu inside this navigation item. If there is any dropdown child element, first we reset the class that puts the submenu to the left, by removing the class from the element.

Now that we are at one of the dropdowns, we can get some sizes and positions. For that we can use the getBoundingClientRect() that provides information about the size and the position of the element relative to the viewport.

The getBoundingClientRect() method returns a DomRect object that represents the smallest rectangle around the entire element. It holds information like

• left
• top
• right
• bottom
• x
• y
• height
• width

Now the rectangle’s horizontal x position added to the width of the element should be smaller then the inner width of the window. In layman terms:

The horizontal position where the element starts + element’s size < entire horizontal space

If this condition return true than we apply the show-on-left class on the submenu(SCSS):

Conclusion: We can get the position and width of the sub-navigation with Javascript and then if the sum of these 2 are more then the screen width then we apply a class that aligns the submenu to the left. CSS is not capable yet to do such operations yet.

The Code:

    document.querySelectorAll('.nav-item').forEach( (menuitem) => {
        menuitem.addEventListener('mouseover', function (event) {
            const el = event.currentTarget.querySelector('.dropdown-menu');
            if(el) {
                el.classList.remove('show-on-left');
                var rect = el.getBoundingClientRect();
                if(rect.x + rect.width > window.innerWidth) {
                    el.classList.add('show-on-left');
                }
            }
        });
    });

    .nav-item.:hover {
           > .dropdown-menu {
                overflow: visible;
                opacity: 1; 
                max-height: 800px; 
                transition: opacity .6s, max-height 0s;
                z-index:10;
                .show-on-left {
                    left: auto;
                    right: 100%;
                }
            }
    }

Daydream: In a perfect CSS world we could do this in CSS:

:root {
    --left: 400px;
    --width: 500px;
    --screenSize: 901px;
}
.el {
   left:var(--left);
   width: var(--width);
}

And then we would apply on the element right: 100% instead of left if this calculation gives us 0 or a negative number : calc(100vw – var(–left) + var(–width)). Ok, that’s enough, waky waky !

0