]> 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: 9c32062)
Add a flexbox visual test
authorKevin Ball <kmball11@gmail.com>
Thu, 18 Feb 2016 19:04:56 +0000 (11:04 -0800)
committerKevin Ball <kmball11@gmail.com>
Thu, 18 Feb 2016 19:04:56 +0000 (11:04 -0800)
test/visual/index.html patch | blob | blame | history
test/visual/various-menu-options-flex.html [new file with mode: 0644] patch | blob

diff --git a/test/visual/index.html b/test/visual/index.html
index df2cbf99db3d5dbfbed4e816b677f8a2c51599bf..e8f526479db1db3c90ae252708dfb7e4bba21e8d 100644 (file)
--- a/test/visual/index.html
+++ b/test/visual/index.html
@@ -16,6 +16,11 @@
         <li><a href="responsive-menu-left-dropdown.html">Responsive Menu - Left Dropdown</a></li>
         <li><a href="various-menu-options.html">Various Menu Options</a></li>
       </ul>
+
+      <h1>Foundation for Sites Flexbox Component Testing</h1>
+      <ul class="menu vertical">
+        <li><a href="various-menu-options-flex.html">Various Menu Options With Flexbox</a></li>
+      </ul>
     </div>
 
     <script src="assets/js/vendor.js"></script>
diff --git a/test/visual/various-menu-options-flex.html b/test/visual/various-menu-options-flex.html
new file mode 100644 (file)
index 0000000..65f0f01
--- /dev/null
+++ b/test/visual/various-menu-options-flex.html
@@ -0,0 +1,146 @@
+<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-flex.css" rel="stylesheet" />
+
+    <style>
+
+
+    </style>
+  </head>
+
+  <body>
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h2>Responsive Menu:</h2>
+
+        <div class="title-bar" data-responsive-toggle="main-nav" data-hide-for="medium">
+            <button class="menu-icon" type="button" data-toggle></button>
+            <div class="title-bar-title">Menu</div>
+          </div>
+
+          <div id="main-nav">
+            <ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown" >
+              <li>
+              <a href="#">Home</a>
+              </li>
+              <li>
+              <a href="#">About Us</a>
+              <ul class="menu">
+                <li>
+                  <a href="#">What we do</a>
+                </li>
+                <li>
+                  <a href="#">Why we do it</a>
+                </li>
+              </ul>
+              </li>
+              <li>
+              <a href="#">Our Services</a>
+              <ul class="menu">
+                <li>
+                  <a href="#">Service A</a>
+                </li>
+                <li>
+                  <a href="#">Service B</a>
+                </li>
+                <li>
+                  <a href="#">Service B</a>
+                </li>
+              </ul>
+              </li>
+              <li>
+              <a href="#">Contact</a>
+              </li>
+            </ul>
+          </div>
+
+          <hr>
+
+          <h2>Accordion Menu:</h2>
+
+          <ul class="menu vertical" data-accordion-menu>
+            <li>
+            <a href="#">Home</a>
+            </li>
+            <li>
+            <a href="#">About Us</a>
+            <ul class="menu">
+              <li>
+                <a href="#">What we do</a>
+              </li>
+              <li>
+                <a href="#">Why we do it</a>
+              </li>
+            </ul>
+            </li>
+            <li>
+            <a href="#">Our Services</a>
+            <ul class="menu">
+              <li>
+                <a href="#">Service A</a>
+              </li>
+              <li>
+                <a href="#">Service B</a>
+              </li>
+              <li>
+                <a href="#">Service B</a>
+              </li>
+            </ul>
+            </li>
+            <li>
+            <a href="#">Contact</a>
+            </li>
+          </ul>
+
+          <hr>
+
+          <h2>Dropdown Menu:</h2>
+
+          <ul class="menu dropdown" data-dropdown-menu>
+            <li>
+            <a href="#">Home</a>
+            </li>
+            <li>
+            <a href="#">About Us</a>
+            <ul class="menu">
+              <li>
+                <a href="#">What we do</a>
+              </li>
+              <li>
+                <a href="#">Why we do it</a>
+              </li>
+            </ul>
+            </li>
+            <li>
+            <a href="#">Our Services</a>
+            <ul class="menu">
+              <li>
+                <a href="#">Service A</a>
+              </li>
+              <li>
+                <a href="#">Service B</a>
+              </li>
+              <li>
+                <a href="#">Service B</a>
+              </li>
+            </ul>
+            </li>
+            <li>
+            <a href="#">Contact</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>
Mirror of https://github.com/foundation/foundation-sites.git