SECRET OF CSS

Build a Multi-level Nested Menu Without JavaScript | by Arnold Abraham | Sep, 2022


Let’s use plain old HTML and CSS

1*kadyT3rcZ3unDRHE5DK2Zw
Result of this chapter

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 anchor , ul & li elements.

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 menuitem.

This is done by using Custom HTML Tags.

1*ER2bUPinH4UjnnrU ZNXQw
Figure 1

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:

Figure 3

The first thing you do is set the basic formatting of the HTML elements, including fonts, spacing, and width to 100 percent.

1*wqb KbKpk
Figure 3

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).

1*eR1H1qY03qb0dvE7quQpnA
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).

1*3TybhnLjYWQ9Bsyh0127kQ
Figure 4

Figure 5 shows them 2vw up and 2vw down for a better optical representation:

1*P2DkCuC4VTL1C5EuPNddMw
Figure 5

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:

Figure 6

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).

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:

1*G1A qN9beNJVXSbrOwYLkA
Figure 8
1*kadyT3rcZ3unDRHE5DK2Zw
Result of this chapter

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).

1*Dw8xBJPTQjVhyJgBN145 A
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).

1*iZJiDaQfqcp3jFogeIMDTw
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:

Figure 11

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.

1*kadyT3rcZ3unDRHE5DK2Zw
Result

JavaScript doesn’t have to be used all the time. It’s up to you which type of menu works for you. And also, you decide whether you want to customize the menus or not.

Want to Connect?Save yourself a lot of time with the Web Developer Cheatcheats and concentrate on the very important subjects.



News Credit

%d bloggers like this: