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

title	description	video	scss	js
Drilldown Menu	Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.	8qPQRXl52hI	scss/components/_drilldown.scss	js/foundation.drilldown.js

Basics

Drilldowns use the standard Menu syntax, using <ul>, <li>, and <a>. Add data-drilldown to the root menu to set up the drilldown.

To create sub-menus, place a <ul> next to an <a>. Clicking that <a> will then open the <ul> that it's next to.

Any <a> without a submenu will function like a normal link.

Watch this part in video

<ul class="vertical menu drilldown" data-drilldown>
  <li><a href="#">One</a></li>
  <li>
    <a href="#">Two</a>
    <ul class="menu vertical nested">
      <li><a href="#">Two A</a></li>
      <li><a href="#">Two B</a></li>
      <li><a href="#">Two C</a></li>
      <li><a href="#">Two D</a></li>
    </ul>
  </li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
</ul>

The drilldown menu takes on the height of the tallest menu in the hierarchy, so the menu doesn't change height as the user navigates it.

• Item 1
  • Item 1A
    • Item 1Aa
    • Item 1Ba
    • Item 1Ca
    • Item 1Da
    • Item 1Ea
  • Item 1B
  • Item 1C
  • Item 1D
  • Item 1E
• Item 2
  • Item 2A
  • Item 2B
  • Item 2C
  • Item 2D
  • Item 2E
• Item 3
  • Item 3A
  • Item 3B
  • Item 3C
  • Item 3D
  • Item 3E
• Item 4

autoHeight

If you like to set the height to auto you can also set the autoHeight and animateHeight params

autoHeight is On

Watch this part in video

<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
  <!--  -->
</ul>

• Item 1
  • Item 1A
    • Item 1Aa
    • Item 1Ba
  • Item 1B
  • Item 1C
  • Item 1D
  • Item 1E
• Item 2
  • Item 2A
  • Item 2B
  • Item 2C
  • Item 2D
  • Item 2E
• Item 3
  • Item 3A
  • Item 3B
  • Item 3C
  • Item 3D
  • Item 3E
    • Item 3EA
    • Item 3EB
    • Item 3EC
    • Item 3ED
    • Item 3EE
    • Item 3EA
    • Item 3EB
    • Item 3EC
    • Item 3ED
    • Item 3EE
    • Item 3EA
    • Item 3EB
    • Item 3EC
    • Item 3ED
    • Item 3EE
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8

ScrollTop Drilldown

Scroll to the top of the menu when selecting a submenu/navigating back using the menu back button. Can be useful with a longer menu to provide a better user experience.

<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true">
  <!--  -->
</ul>

• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
• Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
    • Item
• Item

---

Custom Styling

The drilldown plugin automatically adds a back button to the top of each nested menu. To style this control, target the .js-drilldown-back class:

.js-drilldown-back {
  // ...
}