Improve support for long dropdowns in the mkdocs theme; resolves #1234

This patch allows dropdowns with many items to scroll, rather than overflowing beyond the bounds of the page. Due to the complexities of CSS, this requires nested dropdowns to be given a fixed position which is initialized via JS. In addition, this patch changes the behavior of nested dropdowns to require a click to open (more consistent with the root dropdown, and improves UX on mobile devices). It also fixes the UI on small screens, adding the nested dropdown "in-place" when it's opened and allowing the whole navbar to scroll if there are many items.
mkdocs · Jan 29, 2020 · 535505b · 535505b
1 parent 273e3ba
commit 535505b
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 25 deletions.
diff --git a/mkdocs/themes/mkdocs/css/base.css b/mkdocs/themes/mkdocs/css/base.css
@@ -242,26 +242,23 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
     text-align: left;
 }
 
-
-.dropdown-submenu {
-    position: relative;
+.navbar-collapse.show { /* csslint allow: adjoining-classes */
+    overflow-y: auto;
+    max-height: calc(100vh - 3.5rem);
 }
 
-.dropdown-submenu>.dropdown-menu {
-    top: 0;
-    left: 100%;
-    margin-top: -6px;
-    margin-left: -1px;
-    -webkit-border-radius: 0 6px 6px 6px;
-    -moz-border-radius: 0 6px 6px;
-    border-radius: 0 6px 6px 6px;
+.dropdown-item.open { /* csslint allow: adjoining-classes */
+    color: #fff;
+    background-color: #2FA4E7;
 }
 
-.dropdown-submenu:hover>.dropdown-menu {
-    display: block;
+.dropdown-submenu > .dropdown-menu {
+    margin: 0 0 0 1.5rem;
+    padding: 0;
+    border-width: 0;
 }
 
-.dropdown-submenu>a:after {
+.dropdown-submenu > a::after {
     display: block;
     content: " ";
     float: right;
@@ -275,18 +272,36 @@ h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .head
     margin-right: -10px;
 }
 
-.dropdown-submenu:hover>a:after {
+.dropdown-submenu:hover > a::after {
     border-left-color: #fff;
 }
 
-.dropdown-submenu.pull-left { /* csslint allow: adjoining-classes */
-    float: none;
-}
-
-.dropdown-submenu.pull-left>.dropdown-menu { /* csslint allow: adjoining-classes */
-    left: -100%;
-    margin-left: 10px;
-    -webkit-border-radius: 6px 0 6px 6px;
-    -moz-border-radius: 6px 0 6px 6px;
-    border-radius: 6px 0 6px 6px;
+@media (min-width: 992px) {
+    .dropdown-menu {
+        overflow-y: auto;
+        max-height: calc(100vh - 3.5rem);
+    }
+
+    .dropdown-submenu {
+        position: relative;
+    }
+
+    .dropdown-submenu > .dropdown-menu {
+        /* csslint ignore:start */
+        position: fixed !important;
+        /* csslint ignore:end */
+        margin-top: -9px;
+        margin-left: -2px;
+        border-width: 1px;
+        padding: 0.5rem 0;
+    }
+
+    .dropdown-submenu.pull-left { /* csslint allow: adjoining-classes */
+        float: none;
+    }
+
+    .dropdown-submenu.pull-left > .dropdown-menu { /* csslint allow: adjoining-classes */
+        left: -100%;
+        margin-left: 10px;
+    }
 }
diff --git a/mkdocs/themes/mkdocs/js/base.js b/mkdocs/themes/mkdocs/js/base.js
@@ -86,6 +86,65 @@ $(document).ready(function() {
         }, 50);
     });
 
+  function showInnerDropdown(item) {
+    var popup = $(item).next('.dropdown-menu');
+    popup.addClass('show');
+    $(item).addClass('open');
+
+    // First, close any sibling dropdowns.
+    var container = $(item).parent().parent();
+    container.find('> .dropdown-submenu > a').each(function(i, el) {
+      console.log(el);
+      if (el !== item) {
+        hideInnerDropdown(el);
+      }
+    });
+
+    var popupMargin = 10;
+    var maxBottom = $(window).height() - popupMargin;
+    var bounds = item.getBoundingClientRect();
+
+    popup.css('left', bounds.right + 'px');
+    if (bounds.top + popup.height() > maxBottom &&
+        bounds.top > $(window).height() / 2) {
+      popup.css({
+        'top': (bounds.bottom - popup.height()) + 'px',
+        'max-height': (bounds.bottom - popupMargin) + 'px',
+      });
+    } else {
+      popup.css({
+        'top': bounds.top + 'px',
+        'max-height': (maxBottom - bounds.top) + 'px',
+      });
+    }
+  }
+
+  function hideInnerDropdown(item) {
+    var popup = $(item).next('.dropdown-menu');
+    popup.removeClass('show');
+    $(item).removeClass('open');
+
+    popup.scrollTop(0);
+    popup.find('.dropdown-menu').scrollTop(0).removeClass('show');
+    popup.find('.dropdown-submenu > a').removeClass('open');
+  }
+
+  $('.dropdown-submenu > a').on('click', function(e) {
+    if ($(this).next('.dropdown-menu').hasClass('show')) {
+      hideInnerDropdown(this);
+    } else {
+      showInnerDropdown(this);
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+  });
+
+  $('.dropdown-menu').parent().on('hide.bs.dropdown', function(e) {
+    $(this).find('.dropdown-menu').scrollTop(0);
+    $(this).find('.dropdown-submenu > a').removeClass('open');
+    $(this).find('.dropdown-menu .dropdown-menu').removeClass('show');
+  });
 });