This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
The text-link-elements have z-index:1.
The onclick custom attribute value for rest-of-screen container and text-link elements is
document.getElementById("gp-1").style.height = "0px";
document.getElementById("gp-2").style.height = "0px";
document.getElementById("gp-3").style.height = "0px";
One can therefore do this for just one text-link element, and duplicate for however many buttons one wants, and then for each group button change the onclick custom attribute for that id from "0px" to "auto".
To prevent group buttons jumping to the top of their own page, I made all their hrefs end in #! - the browser finds no such id to go to, and stays where it was on the page.
The box-holder containers have ids gp-1, gp-2, and gp-3 respectively
The box-holder class has overflow:hidden, a solid colour background, and z-index:1
2 Easy Mega Menus
The two menus have actually been built the same way. The submenus that appear when one of the 'Group' buttons is clicked on, then get a height of 'auto'. As long as they are not clicked on, the height is set to none.
The difference between them lies in how they have been positioned on the web page. The top menu has the position 'sticky'. That is a handy way to leave room for a top image, which will scroll up and off the screen and leave the menu still visible.
The lower menu has the position 'fixed'. It is 'glued' to the very top of the page (and therefore had to be added on this page just as an image). Any other page content will have to come below it.
Both menus have the sticky or fixed position kicking in after a breakpoint at about 600px viewport. That is to enable scrolling the menus on devices like smart-phones.
In order to enable scrolling at all, the page has to have enough content to make it scroll. The best thing is to use the container
.rest-of-pageand pop your page contents in there. Then you don't risk interfering with the menu. And you can set a min-height on that container, like e.g. 100vh.As you can see, the container
.rest-of-pagehas some useful hints about how to get everything to work properly. And regarding more pages, you need to create them yourself. A good idea is to start by duplicating the index page.Download this component (displayed above)
Download this component (displayed below)