Sticky Vanilla dropdown menu

A bit of brain storming between Frank Cook and myself resulted in this menu. It has been built 'desktop down'. To edit the sub-buttons, you need to change the overflow on the buttons-container from hidden to visible. Just remember to set it back when you are done.

The dropdowns appear when hovering over the main buttons, and since hovering is not possible on mobile devices, instead you have to tap, we needed to find a way to close the dropdowns after tapping. Therefore there is a 'close-button' at the bottom of each dropdown, and when clicking on it, it reloads the page. So if you want to use this menu for a site with several pages, you need to edit the link on the close-button, so that it reloads the page you're on. Note that those close buttons are only visible for viewports below 800px wide.

This building block already contains a component for one of those menu buttons with sub- and close-buttons. That component can of course be saved on your system. Otherwise, to make a component of the whole menu, select the container 'menu-wrapper'.

Placeholder Picture
Placeholder Picture
Placeholder Picture

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.