Let’s use plain old HTML and CSS
Because of the different platforms and browser generations, you don’t want to sacrifice important features when you make your own website menus.
I will show you how to build a multi-level navigation menu with plain old HTML and CSS. Plus, there are very convenient looks and feels to expect.
The individual approaches are very flexible. So it should be easy for you to adapt the menu structures according to your wishes and integrate them into your website.
In this example, I am going to use the
nav HTML tag as an alternative approach to my previous article. There you learned how to provide a menu with navigation links with
To create an alternative to the unsorted list
ul tag I used:
menu. And for individual list elements, I am going to replace them by
This is done by using Custom HTML Tags.
The HTML page will display a list of items, with the submenus on separate lines (Figure 1).
Here’s what the HTML body tag looks like:
The content results in a pretty ugly first impression:
The first thing you do is set the basic formatting of the HTML elements, including fonts, spacing, and width to 100 percent.
You then hide all menu items and show the About Us menu again. This applies to all menu items under the navigation:
The other properties are there to make things look nice by setting the menu items relative to their normal positions, adding a line break to each element, and making the cursor look like a hand.
Respond to Pointer Events
All pointer events should be reacted to to make the menu items visible again at the first level:
As a result, the two entries About Us and YouTube are displayed, but one is displayed below the other (Figure 3).
The Correct Width and Height
The box’s width and height will include these distances if box-sizing is set to border-box.
You then give the menu entries a darkorchid background and white font. It’s done with anchor tags inside nav tags.
There’s a minimum width of 150 pixels and padding and margin to ensure it’s spaced correctly.
The two elements, however, hang in the upper left corner of the browser window (Figure 4).
Figure 5 shows them 2vw up and 2vw down for a better optical representation:
Nonetheless, the two menu items should be next to each other. All menu tags in the nav tags should have flex set as the display property:
Since not all menus should respond to the cursor, we deactivate them first and set their position to absolute. You’ll need that later when you expand the submenu:
For the anchor tags of the menu items, adjust these two properties to arrange them neatly, one below the other
- white-space: nowrap; ensure that the text of the menu item is not wrapped,
- display: block; ensures a separate line for each menu item:
By setting the value of opacity to 1, you’ll be able to see the submenu again:
It folds back in as soon as you touch a submenu item with the mouse pointer.
I wanted to preserve a gif, but it was already annoying me while writing this article. Please try it out yourself.
If you reset the value of pointer-events to its initial value, you can prevent this:
Using a filter, you highlight the respective tile visually. Here’s how you do it: Use the before selector of the hover event of the anchor tag:
Basically, it’s a full height and width overlay of the original element.
By using rgba, the permeability of the color is reduced, and the positioning is controlled by top, left, and position (Figure 7).
As a final step, you make a visual improvement. There should be an arrow in the main menu to indicate which menus have submenus.
Here’s how to do it (Figure 8): Address the object accordingly and use the after selector for the display:
Occasionally, menus with more than two levels are needed.
Our goal is to extend the previous example with a lot of folding-out menus for this. In this case, only the first level of the sub-menu will be shown vertically. The rest of the levels will be on the right.
Submenus have been added to many levels in the example. As before, these are also to be visually marked with an arrow. As a first step, we extend our HTML structures by submenu points:
You’ll see that the submenus don’t appear besides the first submenu, they’re below it (Figure 9).
The corresponding submenus can easily be repositioned by using transform: translateX(any%) to move the object along the x-axis. Then positioning it exactly with top and right:
Now all the submenus are positioned correctly (Figure 10).
There are still a few things missing from the previous menus, like arrows pointing to submenus. As in the previous examples, select the child selector and link it to the after selector:
We’re basically done designing the navigation.
Nonetheless, you can add some visuals, like an animation to make the first submenu level float in from below:
The transform property lets you control the duration of the effect.
The longer you choose the duration, the smoother the effect of the movement.
You shouldn’t make it longer than a second. Otherwise, it’ll be distracting. I found 0.7s to be the best.
As you go up the menu, you can also make the elements from the second submenu level move from the right side towards the left:
That’s it for this menu.