nav2.html
Timeline
nav4.html

Navbar 3 - collapse other expanded submenus

The same as the previous page, but with added functionality: collapsing any other previously expanded submenus when clicking/hovering a submenu.
Still NOT responsive, media queries disabled, will behave as a small screen for all screen sizes.

JavaScript version: Extend the JavaScript, add collapseOthersJs().
Checkbox + checked version: Add JavaScript function collapseOthersChk() to uncheck other submenu checkboxes, and thus collapse them.
Checkbox + focus version: Useless, not included here.
Checkbox + hover version: Do nothing, does already collapse others.
Checkbox + hover + checkbox version: Add JavaScript function pinParents() to check/uncheck any parent checkboxes, to pin/unpin an entire nested submenu.
New combination: hover/JavaScript version: Add a checkbox and JavaScript to toggle between hover/click behaviour.


multimenu navbar - javascript "collapse-others"

This navbar now has three Javascript functions, toggleAll() to show/hide the entire menu, toggleMe() to show/hide a submenu, and collapseOthersJs() to hide other expanded submenus when clicking on a submenu.


multimenu navbar - checked + javascript "collapse-others"

The checkbox version has the same behaviour as the Javascript version.
This version requires more HTML than the pure JavaScript solution (added checkbox for each submenu) , and also almost the same amount of JavaScript, collapseOthersChk().


multimenu navbar - hover "collapse-others"

This navbar is identical to the one in nav2.html, as it collapses other submenus "out-of-the-box", without any JavaScript.


multimenu navbar - hover + checked "collapse-others", pin parent menus

This version now has some added JavaScript function pinParents() to check/uncheck any parent checkboxes, to pin/unpin an entire nested submenu.


multimenu navbar - hover/javascript "either-hover-or-click"

This navbar adds an extra checkbox to toggle between hover and click behaviour.


And the collapse-other-submenus winner is... checkbox or hover? Or "checkbox-pinned hover"? Or...?

Conclusion:
The JavaScript and "checked" navbars have identical behaviour for collapsing previously opened submenus, so there is actually little to win using the "checked" version over JavaScript (more HTML, same amount of JavaScript).
The advantage of the :hover pseudoclass in the "hover" navbar is that it collapses other submenus "out-of-the-box" (no JavaScript required) for both desktops (hover behaviour) and touch screens (click behaviour).
The solution with "pinnable" submenus may attract some users, while it may be confusing to others. For now, we will skip this version.
The last navbar combines the "hover" and the "JavaScript" versions. The menus will use "hover" behaviour by default, but may be switched to use "click" behaviour instead, so the user may choose what suits her/him best.

For further user-friendliness tests, we need to add some CSS style to the menu items, for example making each menu item bigger, and add media queries, to test both desktop and smartphone layouts.
nav2.html
Timeline
nav4.html