]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: cd10005)
Update visual tests of drilldown section!
authorharry <harmanmanchanda182@gmail.com>
Mon, 19 Jun 2017 18:51:35 +0000 (00:21 +0530)
committerharry <harmanmanchanda182@gmail.com>
Mon, 19 Jun 2017 18:51:35 +0000 (00:21 +0530)
test/visual/drilldown/drilldown-menu-auto-height.html patch | blob | blame | history
test/visual/drilldown/drilldown-menu-parent-link.html patch | blob | blame | history
test/visual/drilldown/drilldown-menu-scroll-top.html patch | blob | blame | history
test/visual/drilldown/long-titles.html patch | blob | blame | history

diff --git a/test/visual/drilldown/drilldown-menu-auto-height.html b/test/visual/drilldown/drilldown-menu-auto-height.html
index 7dd727ef9561ccafcefb8eab3c11c5121afd3eca..103d745cc81b957cc744b67ceb444305914f23b0 100644 (file)
--- a/test/visual/drilldown/drilldown-menu-auto-height.html
+++ b/test/visual/drilldown/drilldown-menu-auto-height.html
@@ -11,252 +11,256 @@
     </style>
   </head>
   <body>
-    <div class="medium-6 row column">
-      <p>Drilldown should auto adjust height and animate height</p>
-      <div class="callout">
-      <ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true">
-  <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>
-        <ul class="vertical menu">
-          <li><a href="#">Item</a></li>
-        </ul>
-      </li>
-      <li><a href="#">Item</a></li>
-    </ul>
-  </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>
-        <ul class="vertical menu">
-          <li><a href="#">Item</a></li>
-        </ul>
-      </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">
+  <div class="grid-x grid-padding-x">
+    <div class="cell medium-12" style="margin-top: 20px;margin-bottom: 20px;">
+      <p>Drilldown should auto adjust height even if in Responsive Menu</p>
+      <div class="title-bar" data-responsive-toggle="example-autoheight" data-hide-for="">
+        <button class="menu-icon" type="button" data-toggle></button>
+        <div class="title-bar-title">Menu</div>
+      </div>
+      <div class="callout" id="example-autoheight">
+        <ul class="vertical menu drilldown" data-drilldown data-auto-height="true">
+          <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>
+                <ul class="vertical menu">
+                  <li><a href="#">Item</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Item</a></li>
+            </ul>
+          </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>
+                <ul class="vertical menu">
+                  <li><a href="#">Item</a></li>
+                </ul>
+              </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>
-      </li>
-    </ul>
-  </li>
-</ul>
       </div>
     </div>
-    <div class="medium-6 row column">
+
+    <div class="cell medium-4">
+      <p>Drilldown should auto adjust height and animate height</p>
+      <div class="callout">
+      <ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
+        <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>
+              <ul class="vertical menu nested">
+                <li><a href="#">Item</a></li>
+              </ul>
+            </li>
+            <li><a href="#">Item</a></li>
+          </ul>
+        </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>
+              <ul class="vertical menu nested">
+                <li><a href="#">Item</a></li>
+              </ul>
+            </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>
+      </ul>
+      </div>
+    </div>
+    <div class="cell medium-4">
       <p>Drilldown should auto adjust height</p>
       <div class="callout">
-      <ul class="vertical menu" data-drilldown data-auto-height="true" data-close-on-click="true">
-  <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>
-        <ul class="vertical menu">
-          <li><a href="#">Item</a></li>
-        </ul>
-      </li>
-      <li><a href="#">Item</a></li>
-    </ul>
-  </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>
-        <ul class="vertical menu">
-          <li><a href="#">Item</a></li>
-        </ul>
-      </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>
+      <ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-close-on-click="true">
+        <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>
+              <ul class="vertical menu nested">
+                <li><a href="#">Item</a></li>
+              </ul>
+            </li>
+            <li><a href="#">Item</a></li>
+          </ul>
+        </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>
+              <ul class="vertical menu nested">
+                <li><a href="#">Item</a></li>
+              </ul>
+            </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>
       </div>
     </div>
 
-    <div class="medium-6 row column">
+    <div class="cell medium-4">
       <p>Drilldown should auto adjust height and change behavior</p>
       <div class="callout">
-  <ul id="mainMenuLeft" class="drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
-  <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>
-        <ul class="vertical menu">
-          <li><a href="#">Item</a></li>
-        </ul>
-      </li>
-      <li><a href="#">Item</a></li>
-    </ul>
-  </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>
-        <ul class="vertical menu">
-          <li><a href="#">Item</a></li>
-        </ul>
-      </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">
+        <ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
+          <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>
+                <ul class="vertical menu nested">
+                  <li><a href="#">Item</a></li>
+                </ul>
+              </li>
+              <li><a href="#">Item</a></li>
+            </ul>
+          </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>
+                <ul class="vertical menu nested">
+                  <li><a href="#">Item</a></li>
+                </ul>
+              </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>
-      </li>
-    </ul>
-  </li>
-  <li><a href="#">Item</a></li>
-</ul>
       </div>
     </div>
 
-<div class="row cloumn">
-  <p>Drilldown should auto adjust height even if in Responsive Menu</p>
-  <div class="title-bar" data-responsive-toggle="example-autoheight" data-hide-for="">
-    <button class="menu-icon" type="button" data-toggle></button>
-    <div class="title-bar-title">Menu</div>
+    
   </div>
-  <div class="callout" id="example-autoheight">
-      <ul class="vertical menu" data-drilldown data-auto-height="true">
-  <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>
-        <ul class="vertical menu">
-          <li><a href="#">Item</a></li>
-        </ul>
-      </li>
-      <li><a href="#">Item</a></li>
-    </ul>
-  </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>
-        <ul class="vertical menu">
-          <li><a href="#">Item</a></li>
-        </ul>
-      </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>
-      </div>
-</div>
 
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>
diff --git a/test/visual/drilldown/drilldown-menu-parent-link.html b/test/visual/drilldown/drilldown-menu-parent-link.html
index b1f885f465d455a19d2e1f97ed68b05eb386e3ee..af59bcbe8c76edeb58927962796ded929c3618a3 100644 (file)
--- a/test/visual/drilldown/drilldown-menu-parent-link.html
+++ b/test/visual/drilldown/drilldown-menu-parent-link.html
@@ -13,49 +13,50 @@
     </style>
   </head>
   <body>
-    <div class="medium-6 row column">
-      <p>Parent links should be added to the top of their sub-menu as a link.</p>
-
-      <ul class="vertical menu" data-drilldown data-parent-link="true">
-        <li>
-          <a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
-          <ul class="vertical menu">
-            <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
-            <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
-            <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
-            <li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
-            <li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
-            <li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
-            <li><a href="http://foundation.zurb.com/develop/yeti-launch.html">Yeti Launch</a></li>
-            <li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
-          </ul>
-        </li>
-        <li><a href="#">Item</a></li>
-        <li>
-          <a href="http://foundation.zurb.com/develop/getting-started.html">Top level Item</a>
-          <ul class="vertical menu">
-            <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
-            <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
-            <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
-            <li>
-              <a href="http://foundation.zurb.com/support/support.html">2nd level Item</a>
-              <ul class="vertical menu">
-                <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
-                <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
-                <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
-                <li>
-                  <a href="http://foundation.zurb.com/support/premium-support.html">3rd level Item</a>
-                  <ul class="vertical menu">
-                    <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
-                    <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
-                    <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </li>
-      </ul>
+    <div class="grid-x grid-padding-x">
+      <div class="medium-6 cell">
+        <p style="margin-top: 20px;margin-bottom: 20px;">Parent links should be added to the top of their sub-menu as a link.</p>
+        <ul class="vertical menu drilldown" data-drilldown data-parent-link="true">
+          <li>
+            <a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
+            <ul class="vertical menu nested">
+              <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+              <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+              <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
+              <li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
+              <li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
+              <li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
+              <li><a href="http://foundation.zurb.com/develop/yeti-launch.html">Yeti Launch</a></li>
+              <li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
+            </ul>
+          </li>
+          <li><a href="#">Item</a></li>
+          <li>
+            <a href="http://foundation.zurb.com/develop/getting-started.html">Top level Item</a>
+            <ul class="vertical menu nested">
+              <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+              <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+              <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
+              <li>
+                <a href="http://foundation.zurb.com/support/support.html">2nd level Item</a>
+                <ul class="vertical menu nested">
+                  <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+                  <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+                  <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
+                  <li>
+                    <a href="http://foundation.zurb.com/support/premium-support.html">3rd level Item</a>
+                    <ul class="vertical menu nested">
+                      <li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
+                      <li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
+                      <li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
     </div>
 
     <script src="../assets/js/vendor.js"></script>
diff --git a/test/visual/drilldown/drilldown-menu-scroll-top.html b/test/visual/drilldown/drilldown-menu-scroll-top.html
index 5b12c5d3ae441fcbd72ef6993cd145bb6186eb90..461a581d5563fec00a97812205779d9dcac01e19 100644 (file)
--- a/test/visual/drilldown/drilldown-menu-scroll-top.html
+++ b/test/visual/drilldown/drilldown-menu-scroll-top.html
@@ -11,182 +11,192 @@
     </style>
   </head>
   <body>
-<div class="row column small-12 medium-6">
-  <h4>I scroll to top Position of drilldown element</h4>
-  <div class="callout">
-    <ul class="vertical menu" data-drilldown data-scroll-top="true" data-scroll-top-offset="0" data-scroll-top-element="">
-      <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>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-            </ul>
-          </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>
-      <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>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-            </ul>
-          </li>
-          <li><a href="#">Item</a></li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-  <h4>I scroll to top Position of drilldown element with a -30px offset also have a close on click</h4>
-  <div class="callout">
-    <ul class="vertical menu" data-drilldown data-scroll-top="true" data-scroll-top-offset="-30" data-scroll-top-element="" data-close-on-click="true">
-      <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>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-            </ul>
-          </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>
-      <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>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-            </ul>
-          </li>
-          <li><a href="#">Item</a></li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-  <h4>I am responsive and scroll to top Position of drilldown element with a -30px offset</h4>
-  <div class="callout">
-    <ul id="mainMenuLeft" class="drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-scroll-top="true" data-scroll-top-offset="-30">
-      <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>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-            </ul>
-          </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>
-      <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>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-            </ul>
-          </li>
-          <li><a href="#">Item</a></li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-</div>
+    <div class="grid-x grid-padding-x">
+      <div class="cell medium-6">
+        <h4>I scroll to top Position of drilldown element</h4>
+        <div class="callout">
+          <ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="0" data-scroll-top-element="">
+            <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>
+                  <ul class="vertical menu nested">
+                    <li><a href="#">Item</a></li>
+                  </ul>
+                </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>
+            <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>
+                  <ul class="vertical menu nested">
+                    <li><a href="#">Item</a></li>
+                  </ul>
+                </li>
+                <li><a href="#">Item</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="grid-x grid-padding-x">
+      <div class="cell medium-6">
+        <h4>I scroll to top Position of drilldown element with a -30px offset also have a close on click</h4>
+        <div class="callout">
+          <ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="-30" data-scroll-top-element="" data-close-on-click="true">
+            <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>
+                  <ul class="vertical menu nested">
+                    <li><a href="#">Item</a></li>
+                  </ul>
+                </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>
+            <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>
+                  <ul class="vertical menu nested">
+                    <li><a href="#">Item</a></li>
+                  </ul>
+                </li>
+                <li><a href="#">Item</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="grid-x grid-padding-x">
+      <div class="cell medium-6">
+        <h4>I am responsive and scroll to top Position of drilldown element with a -30px offset</h4>
+        <div class="callout">
+          <ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-scroll-top="true" data-scroll-top-offset="-30">
+            <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>
+                  <ul class="vertical menu nested">
+                    <li><a href="#">Item</a></li>
+                  </ul>
+                </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>
+            <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>
+                  <ul class="vertical menu nested">
+                    <li><a href="#">Item</a></li>
+                  </ul>
+                </li>
+                <li><a href="#">Item</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>
     <script>
diff --git a/test/visual/drilldown/long-titles.html b/test/visual/drilldown/long-titles.html
index fee576d481b23ef18118571d0c9b6f84fc5d9de1..f16a8bc6425b2cbd17e72b3b8a2ccfcd25f10b54 100644 (file)
--- a/test/visual/drilldown/long-titles.html
+++ b/test/visual/drilldown/long-titles.html
@@ -16,51 +16,53 @@
     </style>
   </head>
   <body>
-    <div class="medium-6 row column">
-      <p>Submenus should not be cut off at the bottom.</p>
+    <div class="grid-x grid-padding-x">
+      <div class="cell medium-6">
+        <p>Submenus should not be cut off at the bottom.</p>
 
-      <div class="test-drilldown-wrapper">
-        <ul class="vertical menu" data-drilldown>
-          <li>
-            <a href="#">Item</a>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-              <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
-              <li><a href="#">Item</a></li>
-              <li><a href="#">Item</a></li>
-              <li><a href="#">Item</a></li>
-            </ul>
-          </li>
-          <li>
-            <a href="#">Item</a>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-              <li><a href="#">Item With the Longest Title You've Probably Ever Seen</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>
-            </ul>
-          </li>
-          <li>
-            <a href="#">Item</a>
-            <ul class="vertical menu">
-              <li><a href="#">Item</a></li>
-              <li><a href="#">Item With the Longest Title You've Probably Ever Seen</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>
-            </ul>
-          </li>
-        </ul>
+        <div class="test-drilldown-wrapper">
+          <ul class="vertical menu drilldown" data-drilldown>
+            <li>
+              <a href="#">Item</a>
+              <ul class="vertical menu nested">
+                <li><a href="#">Item</a></li>
+                <li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
+                <li><a href="#">Item</a></li>
+                <li><a href="#">Item</a></li>
+                <li><a href="#">Item</a></li>
+              </ul>
+            </li>
+            <li>
+              <a href="#">Item</a>
+              <ul class="vertical menu nested">
+                <li><a href="#">Item</a></li>
+                <li><a href="#">Item With the Longest Title You've Probably Ever Seen</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>
+              </ul>
+            </li>
+            <li>
+              <a href="#">Item</a>
+              <ul class="vertical menu nested">
+                <li><a href="#">Item</a></li>
+                <li><a href="#">Item With the Longest Title You've Probably Ever Seen</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>
+              </ul>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
 
Mirror of https://github.com/foundation/foundation-sites.git