From 0a25bea5188e4e6b95622322c484507ab49c8825 Mon Sep 17 00:00:00 2001
From: aint here <mike@herebox.org>
Date: Mon, 26 May 2014 16:12:32 -0700
Subject: [PATCH] doc pages offcanvas toggle anchor requires href

 Updated offcanvas examples to include href attribute on toggle anchors.

 The offcanvas toggle anchors require an href attribute to work properly
 on iphones as discussed here
 http://foundation.zurb.com/forum/posts/1651-cant-get-off-canvas-to-toggle-on-mobile
---
 doc/pages/components/offcanvas.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/doc/pages/components/offcanvas.html b/doc/pages/components/offcanvas.html
index 40016a2645..1e55aefd41 100644
--- a/doc/pages/components/offcanvas.html
+++ b/doc/pages/components/offcanvas.html
@@ -63,15 +63,15 @@ <h4>HTML</h4>
 
 ### Target Off-Canvas Menu
 
-To target an off-canvas menu, add `.left-off-canvas-toggle` or `.right-off-canvas-toggle` to your layout. Clicking on these will activate their corresponding menu.
+To target an off-canvas menu, add `.left-off-canvas-toggle` or `.right-off-canvas-toggle` to your layout. Clicking on these will activate their corresponding menu.  These anchor elements require the `href` attribute to <a href="http://foundation.zurb.com/forum/posts/1651-cant-get-off-canvas-to-toggle-on-mobile">work on iphones</a>.
 
 <h4>HTML</h4>
 
 ```html
 <!-- target the leftside menu -->
-<a class="left-off-canvas-toggle">Left Menu</a>
+<a class="left-off-canvas-toggle" href="#">Left Menu</a>
 <!-- target the rightside menu -->
-<a class="right-off-canvas-toggle">Right Menu</a>
+<a class="right-off-canvas-toggle" href="#">Right Menu</a>
 
 <aside class="left-off-canvas-menu"></aside>
 <aside class="right-off-canvas-menu"></aside>
@@ -132,7 +132,7 @@ <h4>HTML</h4>
 To add the nice hamburger icon that everyone knows and loves, add a class of `.menu-icon` to your menu target, and nest a `span` inside of it.
 
 ```html
-<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
+<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
 ```
 
 Now put it all together...
@@ -142,10 +142,10 @@ <h4>HTML</h4>
 ```html
 <nav class="tab-bar">
   <section class="left-small">
-    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
+    <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
   </section>
   <section class="right-small">
-    <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
+    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
   </section>
 </nav>
 ```
@@ -171,13 +171,13 @@ <h4>HTML</h4>
 ```html
 <nav class="tab-bar">
   <section class="left-small">
-    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
+    <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
   </section>
   <section class="middle tab-bar-section">
     <h1 class="title">Foundation</h1>
   </section>
   <section class="right-small">
-    <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
+    <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
   </section>
 </nav>
 ```
@@ -206,19 +206,19 @@ <h4>HTML</h4>
 <!-- that's what she said, lol -->
 
 <nav class="tab-bar">
-  <section class="left-small"><a class=" menu-icon" ><span></span></a></section>
+  <section class="left-small"><a class=" menu-icon" href="#"><span></span></a></section>
   <section class="right tab-bar-section"><h1>Left Section</h1></section>
 </nav>
 &nbsp;
 <nav class="tab-bar">
-  <section class="left-small"><a class=" menu-icon" ><span></span></a></section>
+  <section class="left-small"><a class=" menu-icon" href="#"><span></span></a></section>
   <section class="middle tab-bar-section"><h1>Middle Section</h1></section>
-  <section class="right-small"><a class=" menu-icon" ><span></span></a></section>
+  <section class="right-small"><a class=" menu-icon" href="#"><span></span></a></section>
 </nav>
 &nbsp;
 <nav class="tab-bar">
   <section class="left tab-bar-section"><h1>Right Section</h1></section>
-  <section class="right-small"><a class=" menu-icon" ><span></span></a></section>
+  <section class="right-small"><a class=" menu-icon" href="#"><span></span></a></section>
 </nav>
 &nbsp;