Fix child menu management on mobile. #42

omeka-s-themes · Dec 9, 2024 · ab2be35 · ab2be35
1 parent dc5c96b
commit ab2be35
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 42 deletions.
diff --git a/asset/css/style.css b/asset/css/style.css
diff --git a/asset/js/default.js b/asset/js/default.js
@@ -43,10 +43,8 @@
             childToggle.attr('aria-label', collapseString);
         };
 
-        navElement.addClass('closed');
-
-        navElement.click(function() {
-            $(this).toggleClass('open').toggleClass('closed');
+        navElement.on('click', '#mobile-nav-toggle', function() {
+            navElement.toggleClass('open');
         });
 
         navElement.find('ul ul').each(function(){
@@ -61,12 +59,9 @@
 
         navElement.on('click', '.child-toggle', function() {
           var parentLi = $(this).parents('.parent').first();
-          var openParentLi = navElement.find('ul.open').parents('.parent').first();
-          var currentlyOpen = $(this).hasClass('open');
-          if ((navElement.find('ul.open').length > 0) || currentlyOpen) {
-            closeChildNav(openParentLi);
-          }
-          if (!currentlyOpen) {
+          if ($(this).hasClass('open')) {
+            closeChildNav(parentLi);
+          } else {
             openChildNav(parentLi);
           }
         });
@@ -85,7 +80,7 @@
         });
 
         navElement.on('keydown', '.open li:last-child > a:only-child', function(e) {
-            if (e.keyCode = "Tab" && !e.shiftKey) {
+            if ((e.keyCode == "9") && !e.shiftKey) {
                 e.preventDefault();
                 var parentLi = $(this).parents('.parent').first();
                 var nextParentLi = parentLi.next().find('a').first();
@@ -97,6 +92,13 @@
                 closeChildNav(parentLi);
             }
         });
+
+        navElement.on('keydown', '.navigation > .parent > .parent-link > a', function(e) {
+            if ((e.keyCode == "9") && e.shiftKey) {
+                var parentLi = $(this).parents('.parent').first();
+                closeChildNav(parentLi);
+            }
+        });
 
         // Maintain iframe aspect ratios
         $(window).on('load resize', framerateCallback(fixIframeAspect));

diff --git a/asset/sass/_desktop.scss b/asset/sass/_desktop.scss
@@ -233,7 +233,7 @@ header nav > ul > li > a {
     margin: $spacing-s;
 }
 
-header nav > ul > li > .parent-link {
+header nav > ul > li > * {
     display: inline-flex;
     width: 100%;
 }

diff --git a/asset/sass/_screen.scss b/asset/sass/_screen.scss
@@ -213,10 +213,20 @@ header nav {
     padding: 0;
 }
 
-header nav.closed ul {
+header nav ul {
     height: 0;
+    list-style: none;
     overflow: hidden;
     margin: 0;
+    padding: 0;
+}
+
+header nav ul ul {
+    display: none;
+
+    &.open {
+        display: block;
+    }
 }
 
 #mobile-nav-toggle {
@@ -247,11 +257,11 @@ header nav.open #mobile-nav-toggle:before {
     content: "\f00d";
 }
 
-header nav ul {
+header nav.open ul {
     padding-left: 0;
-    list-style: none;
     position: relative;
     margin: 0 auto;
+    height: auto;
 
     a {
         display: inline-block;
@@ -260,16 +270,16 @@ header nav ul {
         padding-left: $spacing-l;
     }
 
+    a:focus {
+        position: relative;
+        z-index: 1;
+    }
+
     a:hover {
         border-bottom: 0;
         background-color: $light;
     }
 
-    li {
-        border-top: 1px solid $light;
-        position: relative;
-    }
-
     li li:last-of-type {
         padding-bottom: 0;
     }
@@ -290,34 +300,44 @@ header nav ul {
         width: calc(100% - #{2 * $spacing-l});
     }
 
-    .child-toggle {
-        color: $light;
-        width: 2 * $spacing-l;
-        text-align: center;
-        background-color: #fff;
-        border-left: 1px solid $light;
-        appearance: none;
-
-        &:before {
-            font-family: "Font Awesome 5 Free";
-            content: "\f105";
-            font-weight: 900;
-        }
-
-        &.open:before {
-            content: "\f107";
-        }
+}
+
+header nav .child-toggle {
+    color: $light;
+    width: 2 * $spacing-l;
+    text-align: center;
+    background-color: #fff;
+    border-left: 1px solid $light;
+    appearance: none;
+
+    &:before {
+        font-family: "Font Awesome 5 Free";
+        content: "\f105";
+        font-weight: 900;
     }
+
+    &.open:before {
+        content: "\f107";
+    }
+}
+
+header nav.open ul.open {
+    overflow: visible;
+}
+
+header nav.open > ul > li {
+    border-top: 1px solid $light;
+    position: relative;
 }
 
+
 header nav > ul > li:last-child {
     border-bottom: 1px solid $light;
     padding-bottom: -1px;
 }
 
 header nav > ul ul li {
     height: 0;
-    overflow: hidden;
     border: 0;
 }
 
@@ -338,17 +358,17 @@ header nav > ul > li > ul > li.active > a:before {
     width: 1.5em;
 }
 
-header nav > ul > li > ul > li a {
+header nav.open > ul > li > ul > li a {
     padding-left: 2.5 * $spacing-l;
 }
 
 /* Third level items */
-header nav > ul > li > ul > li > ul > li a {
+header nav.open > ul > li > ul > li > ul > li a {
     padding-left: 3 * $spacing-l;
 }
 
 /* Fourth level items */
-header nav > ul > li > ul > li > ul > li > ul > li a {
+header nav.open > ul > li > ul > li > ul > li > ul > li a {
     padding-left: 3.5 * $spacing-l;
 }