Merge pull request #1746 from darkwing/submenu-mobiles-position

fix bug 937671, 948452, 923272 - Ensure dropdown / submenus display on small screens
mdn · Dec 10, 2013 · 8514af7 · 8514af7
2 parents 1af08a4 + c35f65e
commit 8514af7
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/media/redesign/js/components.js b/media/redesign/js/components.js
@@ -97,7 +97,8 @@
 
         // Show my submenu after the showDelay
         showTimeout = setTimeout(function() {
-          $submenu.addClass('open').attr('aria-hidden', 'false').fadeIn();
+          // Setting z-index here so that current menu is always on top
+          $submenu.css('z-index', 99999).addClass('open').attr('aria-hidden', 'false').fadeIn();
 
           // Find the first link for improved usability
           if(settings.focusOnOpen) {
@@ -124,7 +125,8 @@
     // Closes a given submenu
     function closeSubmenu($sub) {
       closeTimeout = setTimeout(function() {
-        $sub && $sub.removeClass('open').attr('aria-hidden', 'true').fadeOut();
+        // Set the z-index to one less so another menu would get top spot if overlapping and opening
+        $sub && $sub.css('z-index', 99998).removeClass('open').attr('aria-hidden', 'true').fadeOut();
         settings.onClose();
       }, settings.hideDelay);
     }

diff --git a/media/redesign/stylus/structure.styl b/media/redesign/stylus/structure.styl
@@ -122,7 +122,6 @@
     top: 40px;
     left: -186px;
     border-top: menu-border-width solid #404040;
-    z-index: 9999;
 
     .submenu-column {
       min-height: 90px;
@@ -468,6 +467,23 @@ footer {
       }
     }
   }
+
+  /* make submenus full width */
+  #main-nav {
+    .submenu {
+      left: 0;
+      right: 0;
+      width: auto;
+
+      &:before, &:after {
+        left: 10px;
+      }
+      .submenu-column {
+        width: 40%;
+        border-right: 0;
+      }
+    }
+  }
 }
 
 

diff --git a/media/redesign/stylus/vars.styl b/media/redesign/stylus/vars.styl
@@ -36,8 +36,8 @@ media-query-tablet = 'all and/*!YUI */(max-width: 1024px)';
 media-query-mobile = 'all and/*!YUI */(max-width: 768px)';
 media-query-small-mobile = 'all and/*!YUI */(max-width : 480px)';
 
-media-query-navigation-break = 'all and/*!YUI */(max-width: 970px)';
-media-query-navigation-block = 'all and/*!YUI */(max-width: 660px)';
+media-query-navigation-break = 'all and/*!YUI */(max-width: 970px)'; /* Moves nav items all the way to the left, moves logo above */
+media-query-navigation-block = 'all and/*!YUI */(max-width: 660px)'; /* Moves nav menu items to block, its own line */
 
 /* animation */
 default-animation-duration = .5s;

diff --git a/media/redesign/stylus/wiki.styl b/media/redesign/stylus/wiki.styl
@@ -786,6 +786,18 @@ span.cke_skin_kuma {
   }
 }
 
+/* Mobile updates */
+@media media-query-mobile {
+  #languages-menu-submenu {
+    right: auto;
+    left: 0;
+
+    &:before, &:after {
+      left: 10px;
+    }
+  }
+}
+
 
 /* print styling */
 @media print {