]> 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: 04c2de2)
adds stesting pages for nav
authorRafiBomb <rafi@zurb.com>
Wed, 17 Feb 2016 18:42:30 +0000 (10:42 -0800)
committerRafiBomb <rafi@zurb.com>
Wed, 17 Feb 2016 18:42:30 +0000 (10:42 -0800)
scss/components/_dropdown-menu.scss patch | blob | blame | history
test/sass/_color.scss patch | blob | blame | history
test/visual/index.html patch | blob | blame | history
test/visual/responsive-menu-left-dropdown.html [new file with mode: 0644] patch | blob
test/visual/responsive-menu-right-dropdown.html [new file with mode: 0644] patch | blob
test/visual/responsive-menu.html patch | blob | blame | history

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 4e301eac562d77bc687b8427611c5b447bf7e56f..6289c38234e7cd97eba220804a284c1046d81e40 100644 (file)
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -126,7 +126,6 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     }
   }
 
-
   .is-dropdown-submenu {
     display: none;
     position: absolute;
diff --git a/test/sass/_color.scss b/test/sass/_color.scss
index df895003c7c3f6eca20dfec4ace7fbdf67fff46b..cbc59b689c7b64fa9c03c73240123ea6d4b42f4f 100755 (executable)
--- a/test/sass/_color.scss
+++ b/test/sass/_color.scss
@@ -45,3 +45,8 @@
       'Lightens a dark color');
   }
 }
+
+
+.top-bar {
+  padding: 90px;
+}
\ No newline at end of file
diff --git a/test/visual/index.html b/test/visual/index.html
index a9e34f635a5c025ccbad785f86f4a1479ee14c74..4feb269ce88c6c1df1b0839fb185baea24bb32ed 100644 (file)
--- a/test/visual/index.html
+++ b/test/visual/index.html
@@ -10,8 +10,9 @@
   <body>
     <div class="row column">
       <h1>Foundation for Sites Component Testing</h1>
-      <ul>
-        <li><a href="responsive-menu.html">Responsive Menu</a></li>
+      <ul class="menu vertical">
+        <li><a href="responsive-menu.html">Responsive Menu - Drilldown Medium Dropdown</a></li>
+        <li><a href="responsive-menu-right-dropdown.html">Responsive Menu - Right Dropdown</a></li>
       </ul>
     </div>
 
diff --git a/test/visual/responsive-menu-left-dropdown.html b/test/visual/responsive-menu-left-dropdown.html
new file mode 100644 (file)
index 0000000..68e1158
--- /dev/null
+++ b/test/visual/responsive-menu-left-dropdown.html
@@ -0,0 +1,85 @@
+<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" />
+
+  <style>
+    
+
+  </style>
+</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="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+        <li class="has-submenu">
+          <a href="#">One</a>
+          <ul class="submenu menu vertical" data-submenu>
+            <li><a href="#">One</a></li>
+            <li><a href="#">Two</a></li>
+            <li>
+              <a href="#">Three</a>
+              <ul class="submenu menu vertical align-left" data-submenu>
+                <li><a href="#">One</a></li>
+                <li><a href="#">Two</a></li>
+                <li><a href="#">Three</a></li>
+              </ul>  
+            </li>
+          </ul>
+        </li>
+        <li><a href="#">Two</a></li>
+        <li><a href="#">Three</a></li>
+      </ul>
+    </div>
+    <div class="top-bar-right">
+      <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+        <li><a href="#">One</a></li>
+        <li><a href="#">Two</a></li>
+        <li class="has-submenu">
+          <a href="#">Three</a>
+          <ul class="submenu menu vertical" data-submenu>
+            <li><a href="#">One</a></li>
+            <li><a href="#">Two</a></li>
+            <li>
+              <a href="#">Three</a>
+              <ul class="submenu menu vertical align-left" data-submenu>
+                <li><a href="#">One</a></li>
+                <li><a href="#">Two</a></li>
+                <li><a href="#">Three</a></li>
+              </ul>  
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <p>Horizontal menu on medium and up. Multiple dropdowns on the far right and left of the viewport. Drilldowns on small screens.</p> 
+
+  <ul>
+    <li>The dropdowns should open underneath the parent element.</li> 
+    <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li> 
+    <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li>
+    <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li>
+    <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li>
+    <li>Dropdown parent element arrows should point down.</li>
+    <br>
+    <li>On mobile, the arrows to access submenu should be at the left of the dropdown.</li>
+  </ul>
+
+  <script src="assets/js/vendor.js"></script>
+  <script src="assets/js/foundation.js"></script>
+  <script>
+    $(document).foundation();
+  </script>
+</body>
+</html>
diff --git a/test/visual/responsive-menu-right-dropdown.html b/test/visual/responsive-menu-right-dropdown.html
new file mode 100644 (file)
index 0000000..68e1158
--- /dev/null
+++ b/test/visual/responsive-menu-right-dropdown.html
@@ -0,0 +1,85 @@
+<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" />
+
+  <style>
+    
+
+  </style>
+</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="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+        <li class="has-submenu">
+          <a href="#">One</a>
+          <ul class="submenu menu vertical" data-submenu>
+            <li><a href="#">One</a></li>
+            <li><a href="#">Two</a></li>
+            <li>
+              <a href="#">Three</a>
+              <ul class="submenu menu vertical align-left" data-submenu>
+                <li><a href="#">One</a></li>
+                <li><a href="#">Two</a></li>
+                <li><a href="#">Three</a></li>
+              </ul>  
+            </li>
+          </ul>
+        </li>
+        <li><a href="#">Two</a></li>
+        <li><a href="#">Three</a></li>
+      </ul>
+    </div>
+    <div class="top-bar-right">
+      <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+        <li><a href="#">One</a></li>
+        <li><a href="#">Two</a></li>
+        <li class="has-submenu">
+          <a href="#">Three</a>
+          <ul class="submenu menu vertical" data-submenu>
+            <li><a href="#">One</a></li>
+            <li><a href="#">Two</a></li>
+            <li>
+              <a href="#">Three</a>
+              <ul class="submenu menu vertical align-left" data-submenu>
+                <li><a href="#">One</a></li>
+                <li><a href="#">Two</a></li>
+                <li><a href="#">Three</a></li>
+              </ul>  
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <p>Horizontal menu on medium and up. Multiple dropdowns on the far right and left of the viewport. Drilldowns on small screens.</p> 
+
+  <ul>
+    <li>The dropdowns should open underneath the parent element.</li> 
+    <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li> 
+    <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li>
+    <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li>
+    <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li>
+    <li>Dropdown parent element arrows should point down.</li>
+    <br>
+    <li>On mobile, the arrows to access submenu should be at the left of the dropdown.</li>
+  </ul>
+
+  <script src="assets/js/vendor.js"></script>
+  <script src="assets/js/foundation.js"></script>
+  <script>
+    $(document).foundation();
+  </script>
+</body>
+</html>
diff --git a/test/visual/responsive-menu.html b/test/visual/responsive-menu.html
index 0c1c410ddf3ecb99fafc793040569706229e2f33..3bbbcff7d0fe5b4af35aa3752756da7fce61da7a 100644 (file)
--- a/test/visual/responsive-menu.html
+++ b/test/visual/responsive-menu.html
@@ -5,6 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link href="assets/css/foundation.css" rel="stylesheet" />
+
+  <style>
+    
+    .top-bar {
+      padding: 75px 0;
+    }
+
+  </style>
 </head>
 
 <body>
@@ -23,7 +31,7 @@
       <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>
+          <ul class="submenu menu vertical" data-submenu>
             <li><a href="#">One</a></li>
             <li><a href="#">Two</a></li>
             <li><a href="#">Three</a></li>
Mirror of https://github.com/foundation/foundation-sites.git