Merge pull request moby#5265 from ostezer/docs-fix-mobile-menu-click

Fix & improvements for mobile (& desktop) menu & submenu behaviour & issues.
cazacugmihai · Apr 18, 2014 · 81d9d92 · 81d9d92
2 parents ac697e5 + 7f62f47
commit 81d9d92
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 21 deletions.
diff --git a/docs/theme/mkdocs/css/base.css b/docs/theme/mkdocs/css/base.css
@@ -227,6 +227,9 @@ h6,
 }
 
 /* Submenu (dropdown) styling */
+.dd_menu {
+  cursor: pointer;
+}
 .dd_menu .dd_submenu {
   display: none;
   position: absolute;
@@ -243,25 +246,25 @@ h6,
   -webkit-border-radius: 0px 0px 4px 4px;
   -moz-border-radius: 0px 0px 4px 4px;
   border-radius: 0px 0px 4px 4px;
+  padding: 0px;
 }
-.dd_menu:hover .dd_submenu {
+.dd_menu.dd_on_hover .dd_submenu {
   display: block;
-  padding: 0px;
 }
-.dd_menu:hover .dd_submenu > li:first-child {
+.dd_menu.dd_on_hover .dd_submenu > li:first-child {
   border: none;
 }
-.dd_menu:hover .dd_submenu > li {
+.dd_menu.dd_on_hover .dd_submenu > li {
   border-top: 1px solid #ddd;
 }
-.dd_menu:hover .dd_submenu > li.active > a {
+.dd_menu.dd_on_hover .dd_submenu > li.active > a {
   border-color: #b1d5df;
   color: #FF8100 !important;
 }
-.dd_menu:hover .dd_submenu > li:hover {
+.dd_menu.dd_on_hover .dd_submenu > li:hover {
   background: #eee;
 }
-.dd_menu:hover .dd_submenu > li > a {
+.dd_menu.dd_on_hover .dd_submenu > li > a {
   padding: 0.6em 0.8em 0.4em 0.8em;
   width: 100%;
   display: block;
@@ -318,32 +321,37 @@ h6,
 }
 #nav_menu > #docsnav > #main-nav > li {
   display: block;
-  padding: 0em 1em;
+  padding: 0em 14px;
   height: 100%;
   padding-top: 12px;
+  color: #fff;
+  font-size: 1.2em;
 }
 #nav_menu > #docsnav > #main-nav > li.active {
   background: #5992a3;
 }
-#nav_menu > #docsnav > #main-nav > li:hover {
+#nav_menu > #docsnav > #main-nav > li.dd_on_hover {
   background: #b1d5df;
-}
-#nav_menu > #docsnav > #main-nav > li > a {
-  color: #fff;
-  font-size: 1.2em;
-}
-#nav_menu > #docsnav > #main-nav > li:hover > a {
   color: #5992a3;
 }
-#nav_menu > #docsnav > #main-nav > li > a > span > b {
+#nav_menu > #docsnav > #main-nav > li > span > b {
   border-top-color: #b1d5df !important;
 }
-#nav_menu > #docsnav > #main-nav > li:hover > a > span > b {
+#nav_menu > #docsnav > #main-nav > li.dd_on_hover > span > b {
   border-top-color: #71afc0 !important;
 }
 #nav_menu > #docsnav > #main-nav > li form {
   margin-top: -12px;
 }
+#nav_menu > #docsnav > #main-nav > li.home > a {
+  color: #fff;
+}
+#nav_menu > #docsnav > #main-nav > li.home:hover {
+  background: #b1d5df;
+}
+#nav_menu > #docsnav > #main-nav > li.home:hover > a {
+  color: #5992a3;
+}
 
 /* TOC (Left) */
 #toc_table {
@@ -634,11 +642,11 @@ ol.breadcrumb > li:last-child > a {
   #nav_menu > #docsnav > #main-nav > li {
     display: none;
   }
-  #nav_menu > #docsnav > #main-nav > li.active {
+  #nav_menu > #docsnav > #main-nav > .dd_menu.active {
     display: block;
     background: #71afc0;
   }
-  #nav_menu > #docsnav > #main-nav > li.active:hover {
+  #nav_menu > #docsnav > #main-nav > .dd_menu.active:hover {
     background: #b1d5df;
   }
   #nav_menu > #docsnav > #mobile_menu_button {

diff --git a/docs/theme/mkdocs/js/base.js b/docs/theme/mkdocs/js/base.js
@@ -1,6 +1,9 @@
 $(document).ready(function ()
 {
 
+  // Detect if the device is "touch" capable
+  var isTouchDevice = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));
+
   // Tipue Search activation
   $('#tipue_search_input').tipuesearch({
     'mode': 'json',
@@ -38,6 +41,28 @@ $(document).ready(function ()
     }
   });
 
+  // Submenu ensured drop-down functionality for desktops & mobiles
+  $('.dd_menu').on({
+    click: function ()
+    {
+      if (isTouchDevice)
+      {
+        $(this).toggleClass('dd_on_hover');
+      }
+    },
+    mouseenter: function ()
+    {
+      if (!isTouchDevice)
+      {
+        $(this).addClass('dd_on_hover');
+      }
+    },
+    mouseleave: function ()
+    {
+      $(this).removeClass('dd_on_hover');
+    },
+  });
+
   /* Follow TOC links (ScrollSpy) */
   $('body').scrollspy({
     target: '#toc_table',

diff --git a/docs/theme/mkdocs/nav.html b/docs/theme/mkdocs/nav.html
@@ -21,13 +21,13 @@
     </span>
     <b class="arrow pull-left"><img src="/img/docs_nav_menu_arrow_1x.png"></b>
     <ul id="main-nav" class="pull-left">
-      <li class="dd_menu pull-left">
+      <li class="home pull-left">
         <a href="/"><i class="glyphicon glyphicon-home"></i></span></a>
       </li>
       {% for menu in nav %}
       {% if menu.title != '**HIDDEN**' %}
       <li class="dd_menu pull-left{% if menu.active %} active{% endif %}">
-        <a href="#"><span>{{ menu.title }} <b class="caret"></b></span></a>
+        <span>{{ menu.title }} <b class="caret"></b></span>
         <ul class="dd_submenu">
         {% for menu in menu.children %}
           <li {% if menu.active %}class="active"{% endif %}>