]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Add visual test for responsive menu
authorKevin Ball <kmball11@gmail.com>
Tue, 16 Feb 2016 23:45:18 +0000 (15:45 -0800)
committerKevin Ball <kmball11@gmail.com>
Tue, 16 Feb 2016 23:45:18 +0000 (15:45 -0800)
test/visual/index.html
test/visual/responsive-menu.html [new file with mode: 0644]

index 454ef35aff3afc4f54d499dcf0e21ffd6c73db58..a9e34f635a5c025ccbad785f86f4a1479ee14c74 100644 (file)
@@ -11,7 +11,7 @@
     <div class="row column">
       <h1>Foundation for Sites Component Testing</h1>
       <ul>
-        <li><a href="#">Page Link</a></li>
+        <li><a href="responsive-menu.html">Responsive Menu</a></li>
       </ul>
     </div>
 
diff --git a/test/visual/responsive-menu.html b/test/visual/responsive-menu.html
new file mode 100644 (file)
index 0000000..0c1c410
--- /dev/null
@@ -0,0 +1,43 @@
+<html>
+
+<head>
+  <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link href="assets/css/foundation.css" rel="stylesheet" />
+</head>
+
+<body>
+  <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
+    <button class="menu-icon" type="button" data-toggle></button>
+    <div class="title-bar-title">Menu</div>
+  </div>
+
+  <div class="top-bar" id="main-menu">
+    <div class="top-bar-left">
+      <ul class="dropdown menu" data-dropdown-menu>
+        <li class="menu-text"><strong>Site Title</strong></li>
+      </ul>
+    </div>
+    <div class="top-bar-right">
+      <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+        <li class="has-submenu">
+          <a href="#">One</a>
+          <ul class="submenu mega menu vertical" data-submenu>
+            <li><a href="#">One</a></li>
+            <li><a href="#">Two</a></li>
+            <li><a href="#">Three</a></li>
+          </ul>
+        </li>
+        <li><a href="#">Two</a></li>
+        <li><a href="#">Three</a></li>
+      </ul>
+    </div>
+  </div>
+  <script src="assets/js/vendor.js"></script>
+  <script src="assets/js/foundation.js"></script>
+  <script>
+    $(document).foundation();
+  </script>
+</body>
+</html>