hangar-tech/biofriction-wp-theme
hangar-tech
/
biofriction-wp-theme
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
biofriction-wp-theme/node_modules/foundation-sites/docs/pages/drilldown-menu.md

251 lines
8.9 KiB
Markdown
Raw Permalink Blame History

---
title: Drilldown Menu
description: Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.
video: 8qPQRXl52hI
scss: scss/components/_drilldown.scss
js: js/foundation.drilldown.js
---
## Basics
Drilldowns use the standard [Menu](menu.html#nested-style) 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.
<p>
<a class="" data-open-video="0:54"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/JNZodd?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
<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>
```
<div class="primary callout">
<p>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.</p>
</div>
<ul class="vertical menu drilldown" data-drilldown style="max-width: 250px" id="m1">
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
<ul class="menu vertical nested">
<li><a href="#Item-1Aa">Item 1Aa</a></li>
<li><a href="#Item-1Ba">Item 1Ba</a></li>
<li><a href="#Item-1Ca">Item 1Ca</a></li>
<li><a href="#Item-1Da">Item 1Da</a></li>
<li><a href="#Item-1Ea">Item 1Ea</a></li>
</ul>
</li>
<li><a href="#Item-1B">Item 1B</a></li>
<li><a href="#Item-1C">Item 1C</a></li>
<li><a href="#Item-1D">Item 1D</a></li>
<li><a href="#Item-1E">Item 1E</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical nested">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
<li><a href="#Item-2C">Item 2C</a></li>
<li><a href="#Item-2D">Item 2D</a></li>
<li><a href="#Item-2E">Item 2E</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="menu vertical nested">
<li><a href="#Item-3A">Item 3A</a></li>
<li><a href="#Item-3B">Item 3B</a></li>
<li><a href="#Item-3C">Item 3C</a></li>
<li><a href="#Item-3D">Item 3D</a></li>
<li><a href="#Item-3E">Item 3E</a></li>
</ul>
</li>
<li><a href="#Item-4"> Item 4</a></li>
</ul>
## autoHeight
<div class="secondary callout">
<p>If you like to set the height to auto you can also set the autoHeight and animateHeight params</p>
<button class="button expanded" onclick="$('#m3').foundation('_destroy');if($('#m3').data('autoHeight')){$('#m3').data('autoHeight',false);$(this).html('autoHeight is Off');}else{$('#m3').data('autoHeight',true);$(this).html('autoHeight is On');}new Foundation.Drilldown($('#m3'));return false;">autoHeight is On</button>
</div>
<p>
<a class="" data-open-video="4:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
</p>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/mmKyrw?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
<!-- -->
</ul>
```
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true" style="max-width: 250px" id="m3">
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
<ul class="menu vertical nested">
<li><a href="#Item-1Aa">Item 1Aa</a></li>
<li><a href="#Item-1Ba">Item 1Ba</a></li>
</ul>
</li>
<li><a href="#Item-1B">Item 1B</a></li>
<li><a href="#Item-1C">Item 1C</a></li>
<li><a href="#Item-1D">Item 1D</a></li>
<li><a href="#Item-1E">Item 1E</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical nested">
<li><a href="#Item-2A">Item 2A</a></li>
<li><a href="#Item-2B">Item 2B</a></li>
<li><a href="#Item-2C">Item 2C</a></li>
<li><a href="#Item-2D">Item 2D</a></li>
<li><a href="#Item-2E">Item 2E</a></li>
</ul>
</li>
<li>
<a href="#">Item 3</a>
<ul class="menu vertical nested">
<li><a href="#Item-3A">Item 3A</a></li>
<li><a href="#Item-3B">Item 3B</a></li>
<li><a href="#Item-3C">Item 3C</a></li>
<li><a href="#Item-3D">Item 3D</a></li>
<li>
<a href="#Item-3E">Item 3E</a>
<ul class="menu vertical nested">
<li><a href="#Item-3EA">Item 3EA</a></li>
<li><a href="#Item-3EB">Item 3EB</a></li>
<li><a href="#Item-3EC">Item 3EC</a></li>
<li><a href="#Item-3ED">Item 3ED</a></li>
<li><a href="#Item-3EE">Item 3EE</a></li>
<li><a href="#Item-3EA">Item 3EA</a></li>
<li><a href="#Item-3EB">Item 3EB</a></li>
<li><a href="#Item-3EC">Item 3EC</a></li>
<li><a href="#Item-3ED">Item 3ED</a></li>
<li><a href="#Item-3EE">Item 3EE</a></li>
<li><a href="#Item-3EA">Item 3EA</a></li>
<li><a href="#Item-3EB">Item 3EB</a></li>
<li><a href="#Item-3EC">Item 3EC</a></li>
<li><a href="#Item-3ED">Item 3ED</a></li>
<li><a href="#Item-3EE">Item 3EE</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Item-4"> Item 4</a></li>
<li><a href="#Item-5"> Item 5</a></li>
<li><a href="#Item-6"> Item 6</a></li>
<li><a href="#Item-7"> Item 7</a></li>
<li><a href="#Item-8"> Item 8</a></li>
</ul>
## ScrollTop Drilldown
<div class="callout">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.</div>
<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/jmKEwX?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>
```html
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true">
<!-- -->
</ul>
```
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-auto-height="true" data-animate-height="true" style="max-width: 250px" id="m2">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
---
## 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:
```css
.js-drilldown-back {
// ...
}
```
Reference in New Issue View Git Blame Copy Permalink