251 lines
8.9 KiB
Markdown
251 lines
8.9 KiB
Markdown
|
---
|
||
|
|
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 {
|
||
|
|
// ...
|
||
|
|
}
|
||
|
|
```
|