]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Merge remote-tracking branch 'remotes/origin/v6.3' into v6.3-drilldown-autoheight 8699/head
authorjk <j.koehler@modulingo.de>
Thu, 12 May 2016 15:11:09 +0000 (17:11 +0200)
committerjk <j.koehler@modulingo.de>
Thu, 12 May 2016 15:11:09 +0000 (17:11 +0200)
# Conflicts:
# docs/pages/drilldown-menu.md
# js/foundation.drilldown.js

1  2 
docs/pages/drilldown-menu.md
js/foundation.drilldown.js

index b8d92609439dc9c5d644063052039e64ea7899f6,fbfcaae1c1d37ad5a6dba1bdf34682fcb41809b8..55daea9b9e2c548cdfb3d9f2c85ee64344d81ae3
@@@ -73,76 -73,62 +73,132 @@@ Any `<a>` without a submenu will functi
    <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>
 +
 +<ul class="menu" data-drilldown data-auto-height="true" data-animate-height="true" style="width: 200px" id="m3">
 +  <li>
 +    <a href="#">Item 1</a>
 +    <ul class="menu">
 +      <li>
 +        <a href="#">Item 1A</a>
 +        <ul class="menu">
 +          <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">
 +      <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">
 +      <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">
 +          <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>
+ <ul class="menu" data-drilldown data-scroll-top="true" style="width: 200px" 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">
+       <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">
+           <li><a href="#">Item</a></li>
+         </ul>
+       </li>
+     </ul>
+   </li>
+   <li><a href="#">Item</a></li>
+ </ul>
  ---
  
  ## Custom Styling
index e711d582a35da1ef3585ee77321dcc2ad3e0d8b9,aade7664e9166e5272caafc737d718b39266efe5..cf2cec93b66297f45a29f0ca7044707eb6a4f261
@@@ -368,18 -392,36 +400,48 @@@ Drilldown.defaults = 
     * @example false
     */
    closeOnClick: false,
-   animateHeight: false
 +  /**
 +   * Allow the menu to auto adjust height.
 +   * @option
 +   * @example false
 +   */
 +  autoHeight: false,
 +  /**
 +   * Animate the auto adjust height.
 +   * @option
 +   * @example false
 +   */
++  animateHeight: false,
+   /**
+    * Scroll to the top of the menu after opening a submenu or navigating back using the menu back button
+    * @option
+    * @example false
+    */
+   scrollTop: false,
+   /**
+    * String jquery selector (for example 'body') of element to take offset().top from, if empty string the drilldown menu offset().top is taken
+    * @option
+    * @example ''
+    */
+   scrollTopElement: '',
+   /**
+    * ScrollTop offset
+    * @option
+    * @example 100
+    */
+   scrollTopOffset: 0,
+   /**
+    * Scroll animation duration
+    * @option
+    * @example 500
+    */
+   animationDuration: 500,
+   /**
+    * Scroll animation easing
+    * @option
+    * @example 'swing'
+    */
+   animationEasing: 'swing'
    // holdOpen: false
  };