]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Fix for detection of overfloating dropdown menus.
authorMarius Olbertz <marius.olbertz@gmail.com>
Sat, 9 Apr 2016 09:58:07 +0000 (11:58 +0200)
committerMarius Olbertz <marius.olbertz@gmail.com>
Sat, 9 Apr 2016 09:58:07 +0000 (11:58 +0200)
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.

docs/pages/dropdown-menu.md
scss/components/_dropdown-menu.scss
test/visual/dropdown-menu/right-aligned-dropdown-menu.html [new file with mode: 0644]

index f95c0d1088ce02869743c1e2daa6360f95017ac3..e9ff92b214708bfa41d37496dc1da1f9560b529f 100644 (file)
@@ -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>
 
 ---
index 7ea6c3409022c9729a58666838abff90379c4adf..91d73fca31124146c6de3fc914c4dfbd0895dd18 100644 (file)
@@ -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 (file)
index 0000000..f00bd65
--- /dev/null
@@ -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>