ALF Nav

Responsive menus are created with the following HTML:

<nav class="alf-nav">
  <div class="alf-trigger">Main menu</div>
  <div class="alf-menu">
    <ul>
      <li><a href="...">Item 1</a></li>
      <li class='selected'><a href="...">Item 2 with submenu</a>
        <ul>
          <li><a href="...">Item 2-1</a></li>
          <li class='selected'><a href="...">Item 2-2</a></li>
          <li><a href="...">Item 2-3</a></li>
        </ul>
      </li>
      <li><a href="...">Item 3</a></li>
    </ul>
  </div>
</nav>

The DIV.nav-trigger will be hidden in tablet-up, and will be replaced by a hamburger button in phone or phone-small.
Use the .selected class in the LI items to mark the current page.

Options

data-alf-nav-transition: sets the transition (in collapsed mode). Values: show, fade or slide (default).
data-alf-scroll-to-zero-on-open: scroll to top of page when opening the menu (in collapsed mode). This is a legacy option, used for a specific project. I'm leaving it active, just in case.

Only available for 'show' and 'fade' transitions (for now):

data-alf-use-click: uses click to open level 1 items, instead of them being directly open.
data-alf-use-click-in-submenus: if used (in addition to data-alf-use-click), uses click to open level > 1 items, instead of them being directly open.

Examples

Basic nav

Using "selected"

`data-alf-use-click`

`data-alf-use-click` and `data-alf-use-click-in-submenus`

`data-alf-nav-transition="fade"`

Custom content in submenus

Submenus can have any content. In fact, any element following one of the A elements will automatically become a submenu:

When the submenu is a UL (which is typical), you can also add any content to the submenu. Just do it *before* the A element (or it would be interpreted as a submenu). See a somewhat convoluted example below:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.