biofriction-wp-theme/node_modules/foundation-sites/docs/pages/dropdown-menu.md

title	description	video	sass	js
Dropdown Menu	Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.	KfnRuKBKrbw	scss/components/_dropdown-menu.scss	js/foundation.dropdownMenu.js

Horizontal

Dropdown menus build on the Menu component's syntax. Add the class .dropdown and the attribute data-dropdown-menu to the menu container to set up the dropdown.

<ul class="dropdown menu" data-dropdown-menu>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

To create dropdown menus, nest a new <ul> inside an <li>. You can nest further to create more levels of dropdowns.

Watch this part in video

Note that the <ul> goes after the <a>, and not inside of it.

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

• Item 1
  • Item 1A
  • Item 1B
    • Item 1B i
    • Item 1B ii
    • Item 1B iii
      • Item 1B iii alpha
      • Item 1B iii omega
    • Item 1B iv
      • Item 1B iv alpha
  • Item 1C
• Item 2
  • Item 2A
  • Item 2B
• Item 3
• Item 4

---

Vertical

Add the .vertical class to the top-level menu to make it vertical. Sub-menus are automatically vertical, regardless of the orientation of the top-level menu.

Menus are block-level elements, which means they stretch to fill the width of their container. To make the below example less goofy, we've hard-coded a max-width on the menu.

<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;">
  <li>
    <a href="#">Item 1</a>
    <ul class="vertical menu nested">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <!-- ... -->
</ul>

• Item 1
  • Item 1A
  • Item 1B
    • Item 1B i
    • Item 1B ii
    • Item 1B iii
      • Item 1B iii alpha
      • Item 1B iii omega
    • Item 1B iv
      • Item 1B iv alpha
  • Item 1C
• Item 2
  • Item 2A
  • Item 2B
• Item 3
• Item 4

---

Sticky Navigation

See the documentation for the Sticky plugin to see how to easily make a sticky nav bar.

---

Preventing FOUC

Before the JavaScript on your page loads, the dropdown menus will not have arrows. However, once the JavaScript file has loaded, the arrows will appear causing a flash of unstyled content. You can prevent this by adding the .is-dropdown-submenu-parent class manually.

<ul class="dropdown menu" data-dropdown-menu>
  <li class="is-dropdown-submenu-parent">
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>