From: Marius Olbertz <marius.olbertz@gmail.com>
Date: Sat, 9 Apr 2016 09:58:07 +0000 (+0200)
Subject: Fix for detection of overfloating dropdown menus.
X-Git-Tag: v6.2.2-rc1~62^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=dd3d79bc8cfac3bade7815108f02511c88995306;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Fix for detection of overfloating dropdown menus.

Because the selectors were not specific enough, the styles of .opens-right set by the JS in case of an overflowing sub-menu was overwritten by the parent's .open-left styles.
Added visual tests to check for this. The tests include two cases: one for a right aligned dropdown using `.top-bar-right` (which was fixed earlier already) and one that is positioned right because of content (where this fix can be tested).
Also added anchors to the menu's links to check for correct behavior of the links, e.g. when using keyboard.
---

diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md
index f95c0d108..e9ff92b21 100644
--- a/docs/pages/dropdown-menu.md
+++ b/docs/pages/dropdown-menu.md
@@ -43,39 +43,39 @@ To create dropdown menus, nest a new `<ul>` inside an `<li>`. You can nest furth
   <li>
     <a>Item 1</a>
     <ul class="menu">
-      <li><a href="#">Item 1A</a></li>
+      <li><a href="#Item-1A">Item 1A</a></li>
       <li>
-        <a href="#">Item 1B</a>
+        <a href="#Item-1B">Item 1B</a>
         <ul class="menu">
-          <li><a href="#">Item 1B i</a></li>
-          <li><a href="#">Item 1B ii</a></li>
+          <li><a href="#Item-1Bi">Item 1B i</a></li>
+          <li><a href="#Item-1Bii">Item 1B ii</a></li>
           <li>
-            <a href="#">Item 1B iii</a>
+            <a href="#Item-1Biii">Item 1B iii</a>
             <ul class="menu">
-              <li><a href="#">Item 1B iii alpha</a></li>
-              <li><a href="#">Item 1B iii omega</a></li>
+              <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+              <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
             </ul>
           </li>
           <li>
-            <a href="#">Item 1B iv</a>
+            <a href="#Item-1Biv">Item 1B iv</a>
             <ul class="menu">
-              <li><a href="#">Item 1B iv alpha</a></li>
+              <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
             </ul>
           </li>
         </ul>
       </li>
-      <li><a href="#">Item 1C</a></li>
+      <li><a href="#Item-1C">Item 1C</a></li>
     </ul>
   </li>
   <li>
-    <a href="#">Item 2</a>
+    <a href="#Item-2">Item 2</a>
     <ul class="menu">
-      <li><a href="#">Item 2A</a></li>
-      <li><a href="#">Item 2B</a></li>
+      <li><a href="#Item-2A">Item 2A</a></li>
+      <li><a href="#Item-2B">Item 2B</a></li>
     </ul>
   </li>
-  <li><a href="#">Item 3</a></li>
-  <li><a href="#">Item 4</a></li>
+  <li><a href="#Item-3">Item 3</a></li>
+  <li><a href="#Item-4">Item 4</a></li>
 </ul>
 
 ---
@@ -97,54 +97,41 @@ Add the `.vertical` class to the top-level menu to make it vertical. Sub-menus a
 
 <ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 300px;">
   <li>
-    <a href="#">Item 1</a>
-    <ul class="menu">
-      <li><a href="#">Item 1A Loooong</a></li>
-      <li><a href="#">Item 1B</a></li>
-    </ul>
-  </li>
-  <li>
-    <a href="#">Item 2</a>
-    <ul class="menu">
-      <li><a href="#">Item 2A</a></li>
-      <li><a href="#">Item 2B</a></li>
-    </ul>
-  </li>
-  <li>
-    <a href="#">Item 3</a>
-    <ul class="menu">
-      <li><a href="#">Item 3A</a></li>
-      <li><a href="#">Item 3B</a></li>
-    </ul>
-  </li>
-  <li>
-    <a href="#">Item 1</a>
+    <a>Item 1</a>
     <ul class="menu">
-      <li><a href="#">Item 1A Loooong</a></li>
+      <li><a href="#Item-1A">Item 1A</a></li>
       <li>
-        <a href="#"> Item 1 sub</a>
+        <a href="#Item-1B">Item 1B</a>
         <ul class="menu">
-          <li><a href="#">Item 1 subA</a></li>
-          <li><a href="#">Item 1 subB</a></li>
+          <li><a href="#Item-1Bi">Item 1B i</a></li>
+          <li><a href="#Item-1Bii">Item 1B ii</a></li>
           <li>
-            <a href="#"> Item 1 sub</a>
+            <a href="#Item-1Biii">Item 1B iii</a>
             <ul class="menu">
-              <li><a href="#">Item 1 subA</a></li>
-              <li><a href="#">Item 1 subB</a></li>
+              <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+              <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
             </ul>
           </li>
           <li>
-            <a href="#"> Item 1 sub</a>
+            <a href="#Item-1Biv">Item 1B iv</a>
             <ul class="menu">
-              <li><a href="#">Item 1 subA</a></li>
-              <li><a href="#">Item 1 subB</a></li>
+              <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
             </ul>
           </li>
         </ul>
       </li>
-      <li><a href="#">Item 1B</a></li>
+      <li><a href="#Item-1C">Item 1C</a></li>
+    </ul>
+  </li>
+  <li>
+    <a href="#Item-2">Item 2</a>
+    <ul class="menu">
+      <li><a href="#Item-2A">Item 2A</a></li>
+      <li><a href="#Item-2B">Item 2B</a></li>
     </ul>
   </li>
+  <li><a href="#Item-3">Item 3</a></li>
+  <li><a href="#Item-4">Item 4</a></li>
 </ul>
 
 ---
diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 7ea6c3409..91d73fca3 100644
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -84,14 +84,14 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       }
 
       &.opens-left {
-        .is-dropdown-submenu {
+        > .is-dropdown-submenu {
           left: auto;
           right: 100%;
         }
       }
 
       &.opens-right {
-        .is-dropdown-submenu {
+        > .is-dropdown-submenu {
           right: auto;
           left: 100%;
         }
@@ -164,11 +164,11 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       margin-top: -2px;
     }
 
-    &.opens-inner .is-dropdown-submenu {
+    &.opens-inner > .is-dropdown-submenu {
       top: 100%;
     }
 
-    &.opens-left .is-dropdown-submenu {
+    &.opens-left > .is-dropdown-submenu {
       left: auto;
       right: 100%;
     }
@@ -202,7 +202,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
     // [TODO] Cut back specificity
     // scss-lint:disable SelectorDepth
-    &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,
+    //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
     &.js-dropdown-active {
       display: block;
     }
diff --git a/test/visual/dropdown-menu/right-aligned-dropdown-menu.html b/test/visual/dropdown-menu/right-aligned-dropdown-menu.html
new file mode 100644
index 000000000..f00bd6599
--- /dev/null
+++ b/test/visual/dropdown-menu/right-aligned-dropdown-menu.html
@@ -0,0 +1,135 @@
+<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>
+
+  <h1>Dropdown Menu: Right aligned</h1>
+  <p>This dropdown menu is aligned right using <code>.top-bar-right</code> class.</p>
+  <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>
+          <a>Item 1</a>
+          <ul class="menu">
+            <li><a href="#Item-1A">Item 1A</a></li>
+            <li>
+              <a href="#Item-1B">Item 1B</a>
+              <ul class="menu">
+                <li><a href="#Item-1Bi">Item 1B i</a></li>
+                <li><a href="#Item-1Bii">Item 1B ii</a></li>
+                <li>
+                  <a href="#Item-1Biii">Item 1B iii</a>
+                  <ul class="menu">
+                    <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+                    <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#Item-1Biv">Item 1B iv</a>
+                  <ul class="menu">
+                    <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li><a href="#Item-1C">Item 1C</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#Item-2">Item 2</a>
+          <ul class="menu">
+            <li><a href="#Item-2A">Item 2A</a></li>
+            <li><a href="#Item-2B">Item 2B</a></li>
+          </ul>
+        </li>
+        <li><a href="#Item-3">Item 3</a></li>
+        <li><a href="#Item-4">Item 4</a></li>
+        
+      </ul>
+    </div>
+  </div>
+
+  <p>This dropdown menu is positioned right just by the content before it.</p>
+  <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>
+        <li class="menu-text">Some long text to push the menu.</li>
+        <li class="menu-text">You might need to resize the window so that the menu just fits in this line...</li>
+      </ul>
+    </div>
+    <div class="">
+      <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+        <li>
+          <a>Item 1</a>
+          <ul class="menu">
+            <li><a href="#Item-1A">Item 1A</a></li>
+            <li>
+              <a href="#Item-1B">Item 1B</a>
+              <ul class="menu">
+                <li><a href="#Item-1Bi">Item 1B i</a></li>
+                <li><a href="#Item-1Bii">Item 1B ii</a></li>
+                <li>
+                  <a href="#Item-1Biii">Item 1B iii</a>
+                  <ul class="menu">
+                    <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+                    <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#Item-1Biv">Item 1B iv</a>
+                  <ul class="menu">
+                    <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li><a href="#Item-1C">Item 1C</a></li>
+          </ul>
+        </li>
+        <li>
+          <a href="#Item-2">Item 2</a>
+          <ul class="menu">
+            <li><a href="#Item-2A">Item 2A</a></li>
+            <li><a href="#Item-2B">Item 2B</a></li>
+          </ul>
+        </li>
+        <li><a href="#Item-3">Item 3</a></li>
+        <li><a href="#Item-4">Item 4</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>