Menu Structure
This page documents the structure of the navigation menu in HyperNav. The
code is interchangeable between both top and side navigation menus, however,
only the top navigation menu has been used in these examples for convenience.
To replicate the same behavior for side navigation menus, just exchange the
class .hn-top with .hn-side.
Basic Structure
All HyperNav navigation menus should have a basic structure as presented
below. The content of the element with the class .hn-section-brand is visible
regardless of the device size, while the content of the element with the
class .hn-section-body will be hidden behind a toggleable menu on mobile
devices.
<nav class="hn-menu hn-top"> <!-- The hamburger menu state. --> <input type="checkbox" class="hn-input-state hn-input-state-nav" id="cb"> <div class="hn-nav"> <div class="hn-section hn-section-brand"> <!-- Navigation content that is visible regardless of device size comes here. --> <!-- The actual input element for the hamburger. Note that the element is hidden on desktop. --> <label for="cb" class="hn-item hn-input hn-input-nav hn-hide-desktop"> <span class="hn-icon"> <span class="hn-input-default"> <!-- Content that is visible when the input state element is in its default state. --> </span> <span class="hn-input-active"> <!-- Content that is visible when the input state element is in its activated state. --> </span> </span> </label> </div> <div class="hn-section hn-section-body"> <!-- Navigation content that is hidden behind a menu toggle on mobile devices comes here. --> </div> </div></nav>Navigation Content Alignment
Sometimes you might want to align some navigation items to the start
and some to the end. This can be achieved by adding an element
with the class .hn-spacer. All .hn-spacer elements have an equal width
and height. More specifically, they have flex: 1.
xxxxxxxxxx<nav class="hn-menu hn-top"> <div class="hn-nav"> <div class="hn-section hn-section-brand"> <!-- Navigation content that is visible regardless of device size comes here. Aligned towards the start. --> <div class="hn-spacer"> </div> <!-- Navigation content that is visible regardless of device size comes here. Aligned towards the end. --> </div> <div class="hn-section hn-section-body"> <!-- Navigation content that is hidden behind a toggle on mobile devices comes here. Aligned towards the start. --> <div class="hn-spacer"> </div> <!-- Navigation content that is hidden behind a toggle on mobile devices comes here. Aligned towards the end. --> </div> </div></nav>Menu with Overlay
Often an overlay for the navigation menu should be used, so that the content below the it (the actual page content) gets darker. Additionally, the navigation menu is closed by clicking on this region.
xxxxxxxxxx<nav class="hn-menu hn-top"> <!-- The hamburger menu state. Note the id. --> <input type="checkbox" class="hn-input-state hn-input-state-nav" id="cb"> <div class="hn-nav"> <div class="hn-section hn-section-brand"> <!-- Navigation content that is visible regardless of device size comes here. --> <!-- The actual input element for the hamburger. Note that the element is hidden on desktop. --> <!-- Note the for attribute, which matches with the id above.. --> <label class="hn-item hn-input hn-input-nav hn-hide-desktop" for="cb"> <span class="hn-icon"> <span class="hn-input-default"> <!-- Content that is visible when the input state element is in its default state. --> </span> <span class="hn-input-active"> <!-- Content that is visible when the input state element is in its activated state. --> </span> </span> </label> </div> <div class="hn-section hn-section-body"> <!-- Navigation content that is hidden behind a menu toggle on mobile devices comes here. --> </div> </div> <!-- The overlay. Note the for attribute, which matches with the id above. --> <label class="hn-overlay" for="cb"> </label></nav>Disable Focus Styles
HyperNav uses :focus styles to enable basic keyboard accessibility,
however, this also affects pointer usage. The coloring of clicked items
will remain even if they are no longer hovered. To disable the :focus
styles, you should add the class .hn-menu-no-focus to the .hn-menu
element. This will destroy the keyboard accessibility, but by using
JavaScript that listens to certain keyboard elements, the class could
be toggled (not provided by HyperNav).
xxxxxxxxxx<nav class="hn-menu hn-top hn-menu-no-focus"> <!-- The hamburger menu state. --> <input type="checkbox" class="hn-input-state hn-input-state-nav" id="cb"> <div class="hn-nav"> <div class="hn-section hn-section-brand"> <!-- Navigation content that is visible regardless of device size comes here. --> <!-- The actual input element for the hamburger. Note that the element is hidden on desktop. --> <label for="cb" class="hn-item hn-input hn-input-nav hn-hide-desktop"> <span class="hn-icon"> <span class="hn-input-default"> <!-- Content that is visible when the input state element is in its default state. --> </span> <span class="hn-input-active"> <!-- Content that is visible when the input state element is in its activated state. --> </span> </span> </label> </div> <div class="hn-section hn-section-body"> <!-- Navigation content that is hidden behind a menu toggle on mobile devices comes here. --> </div> </div></nav>