Mega Menus in Popups

On this page we demonstrate how mega-menus can be incorporated into your website as popups.  The two links ‘Recipes’ and ‘Techniques’ have been set to open popups - one named Recipes, the other named Techniques. These were created and positioned immediately below the main navigation bar above (see illustration below). The main navigation links were set to open their respective popups in the on-click actions of the respective links.

The popups themselves were set up as ‘Normal’ popups and both were given a common Group ID - this ensures that only one popup can be open at a time.

With this type of menu set-up, the mega-menus open ABOVE the page content, and will remain open until closed.

Mobile Structure

In the mobile version of the site, the main navigation bar has been replaced with a customized compact menu which is activated by the icon in the top-right of the screen. Clicking this icon will open a popup menu, just like in the desktop site. It contains all the links that we have in our desktop version, plus a search function.

Clicking on the recipes or techniques links will open other popups, each containing their relevant links. If the back button is tapped, the main menu popup appears again. All the popups have the same Group ID, so only one of the popups can be displayed at a time.

Arrangement of Popups on the page

All the popups have been positioned at the very top of the mobile page so that they cover the main logo and navigation bar at the top of the page.