Timeline
nav2.html

Navbar 1 - toggle, no submenus

We will try the toggle function with JavaScript, checked, focus, and hover, which is similar to:
http://csscience.com/css3-tabs/

Let's start with a simple menu, which hides (almost) the entire menu by default, show/hide with a toggle function.

navbar - no style, no toggle, only here to show the HTML

<ul>
  <li><a href="#index">Logo (ALWAYS SHOW ME)</a></li>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#toggle">☰ (ALWAYS SHOW ME)</a>
  </li>
</ul>
HTML rendered, no CSS:

navbar - javascript toggle

navbar - checked toggle

Click either the checkbox or the label to toggle the menu.
The checkbox itself must appear before <li> elements, to be able to refer to them as child elements.
We cannot refer to the entire list from within the list itself, as there is no such thing as a "CSS parent selector", nor in CSS2 or in CSS3.
See https://www.thecssninja.com/css/css-tree-menu for details.
Anyhow, the associated checkbox label may be listed inside the list, as any other <li> element.
Note that checkbox and ul elements are siblings, so in the CSS, they are combined using the plus (+) sign. This so-called "checkbox hack" is a logical way to implement a toggle function.
The disadvantage is the appearance of the checkbox itself.
It has to be moved out off the screen, but that is a later styling issue.


navbar - focus toggle

Use focus to expand menus.
In this case, we still need the checkbox to recieve the focus, and because it has the special characteristics of having two elements which can be separated; the checkbox and the label.
This toggle solution is less useful than using the "checkbox toggle" which uses :checked state instead, as clicking anything but the checkbox will loose focus and thus collapse the menu.

navbar - hover toggle

A toggle button can only be implemented with hover on touch screens.
Desktop systems, using a mouse, will loose :hover when moving the mouse out of the hover area, so hover must be done over the entire <ul> element, which is confusing and user-unfriendly.

And the toggle winner is... checkbox

Conclusion:
For the show/hide toggle function, using the CSS :checked pseudo-class is the best option.
JavaScript is always an alternative solution.

 
Timeline
nav2.html