From: Geoff Kimball <geoff@zurb.com>
Date: Tue, 19 Jan 2016 23:22:18 +0000 (-0800)
Subject: Refine documentation for drilldown menu
X-Git-Tag: v6.1.2~20^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=670b004a81274e38d60ea241d46a2bb6061a40c5;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Refine documentation for drilldown menu
---

diff --git a/docs/pages/drilldown-menu.md b/docs/pages/drilldown-menu.md
index 026467548..0b23fc3cd 100644
--- a/docs/pages/drilldown-menu.md
+++ b/docs/pages/drilldown-menu.md
@@ -7,8 +7,24 @@ js: js/foundation.drilldown.js
 
 ## Basics
 
-Drilldowns use the standard [Menu](menu.html#nested-style) syntax. Add the attribute `data-drilldown` to the root `<ul>`, and `.menu` to each nested menu.
+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>` it's next to.
+
+Any `<a>` without a submenu will function like a normal link.
+
+```html
+<ul class="vertical menu" data-drilldown>
+  <li>
+    <a href="#">Item 1</a>
+    <ul class="vertical menu">
+      <li><a href="#">Item 1A</a></li>
+      <!-- ... -->
+    </ul>
+  </li>
+  <li><a href="#">Item 2</a></li>
+</ul>
+```
 
 <ul class="vertical menu" data-drilldown style="width: 200px" id="m1">
   <li>
@@ -52,3 +68,15 @@ Drilldowns use the standard [Menu](menu.html#nested-style) syntax. Add the attri
   </li>
   <li><a href="#"> Item 4</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 {
+  // ...
+}
+```