multimenu navbar - hover/javascript "togglehc", with added CSS
We will add some CSS for now, mainlyto make it more user-friendly:
Remove list item decorations
Hide checkboxes
Links as blocks, so the entire menu item area becomes clickable
Resize "+" sign to be big enough to click/touch on any screen
Hover menu item color to easier see which item is selected
Add border to make margins/paddings visible
Added CSS for the Advanced Checkbox Hack to work on old versions of Android and iOS
HTML changes:
Embed navbars in <nav> tags. This is A Good Thing for many reasons. One of them is that modern audio web readers skips this section, so the listener doesn't have to listen to the navbar content on each any and every page.
Use two separate links, "Parent" (go to link) and "+" (expand submenu).
This separation would not be necessary if dealing only with the click behaviour of a mouse, as the submenu is displayed on hover, before clicking.
Anyhow, on touch screens, the submenu is displayed in the very moment when touching the link, not before.
In that case, the links have to been separated, so the touch screen user may choose between either going to the "parent" link or displaying the submenu.
Swapped "Plus" and "Parent" elements, so the fixed-width "Plus" element comes before the fluid "Parent" elementin the HTML code, even if the "Plus" element visually appears after the "Parent". This is not an ideal HTML layout, as it may be confusing when reading the HTML source, but it is much easier to solve CSS issues. The "Plus" link has a CSS class label attached to it. The main rule is to make the HTML code minimal, and solve as much as possible using CSS, but in this case, we can avoid long CSS definitions with pseudo selectors, such as a:nth-last-of-type(2), if we add a class to the "Plus" link.
The layout on this page is not responsive. It's the layout we will use for "mobile" layout (smartphones/tablets), so we will add some extra HTML header information.
Adding CSS, the code grows, so for now, we will handle one navbar on each page, to keep JavaScript/CSS code to a minimum.
Added CSS for the Advanced Checkbox Hack
/* Advanced Checkbox Hack*/ body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}
Final HTML solution for multimenu navbar - only here to show the navbar HTML