From a fully functional and responsive Navbar, I wanted the ability to have any HTML inside a submenu – creating what is known as a "Megamenu". Here's what my Navbar looks like. The menu links "Instore" and "Online" are destined to become HTML submenus. The image below shows a regular submenu.
Here's the features of the Navbar:
- Brand area of variable size.
- Menu area of variable size. Menu area includes flat links and links with submenus
- Right area of variable size. Above image includes a Search functionality, "Give some love" button, and a cart.
When you click the Search button, a search bar covers the navbar (actually covers the entire page). You fill in the search word or phrase and press "Enter". Alternately, you can press the > to close the search bar. The search bar is shown below.
The "Megamenu" functionality took a bit longer than I expected. Before discussing this, here's a quick image of the "Instore" submenu:
The megamenu is the screen's full width and below the navbar. The contents area can contain between 1 and 6 columns. The image shows five columns (all with images) ... but the contents can be any HTML coding. Headings, text, divs ... anything, in any combination. The height of the megamenu is determined by the longest column – up to half the screen height.
The most difficult part of the coding (it's a combination of CSS and javascript) is the responsive portion of this. This is all CSS Grid, an extra challenge. If screen gets to tablet size, the menu becomes responsive with a burger to call up the top level links. The submenus (including Megamenu) are handled as submenus in block form (each column of the megamenu becomes a block).
And, more interesting, the "Megamenu" is optional. The Navbar will function as a traditional style Navbar without the Megamenu option. On its own, the Navbar CSS is 20Kb raw. The javascript (supports Navbar, Megamenu, and Search) is 3Kb. Adding the Megamenu CSS is another 4Kb, raw.
CSS Blade, my CSS Framework, uses a combination of plain javascript and JQuery. I'm using the slimmest of JQuery versions since I don't need all the full package functionality.
If at any point, I want to switch from JQuery to something else, there are quite a few converters available. I've used a few before, they are not perfect, but with a bit of adjusment they work.