Merge pull request #1427 from CuBoulder/issue/1408

Remove double borders on menus
CuBoulder · Oct 23, 2024 · 8f7e04e · 8f7e04e
2 parents 7c3235a + 05ef6e1
commit 8f7e04e
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Remove double borders on menus
+  Resolves #1408.
+  Removes the double borders on menus in the above and below content regions.
+---
+
 - ### Make video hero vertically centered
   Resolves #1352.
   Makes the video hero more vertically centered

diff --git a/css/ucb-menu.css b/css/ucb-menu.css
@@ -234,6 +234,10 @@
 .ucb-page-content .ucb-menu li.menu-item {
   border-bottom: 1px solid rgba(0, 0, 0, .09);
 }
+.ucb-above-content-region .ucb-menu li.menu-item,
+.ucb-below-content-region .ucb-menu li.menu-item {
+  border-bottom: none;
+}
 
 .ucb-page-content .ucb-menu li.menu-item.active {
   background-color: inherit;
@@ -416,13 +420,16 @@ width: fit-content;
   margin-bottom: -1px;
   text-align: left;
 }
+.ucb-above-content-region .ucb-menu a,
 .ucb-below-content-region .ucb-menu a {
   display: block;
   padding: 10px 0;
   border-bottom: 1px solid rgba(128, 128, 128, 0.333);
   margin-bottom: -1px;
 }
 
+.ucb-above-content-region .ucb-mega-menu,
+.ucb-above-content-region .ucb-mega-menu-icon,
 .ucb-below-content-region .ucb-mega-menu,
 .ucb-below-content-region .ucb-mega-menu-icon,
 .ucb-footer-top .ucb-mega-menu,

diff --git a/js/ucb-mega-menu.js b/js/ucb-mega-menu.js
@@ -62,4 +62,16 @@ for (let i = 0; i < belowContentMenus.length; i++) {
     allMegaMenus[j].removeAttribute("aria-expanded");
     allMegaMenus[j].removeAttribute("aria-controls");
   }
+}
+
+// Disable Above Content Menu Mega Menus
+const aboveContentMenus = document.getElementsByClassName("ucb-above-content-region");
+for (let i = 0; i < aboveContentMenus.length; i++) {
+  const allMegaMenus =  aboveContentMenus[i].getElementsByClassName("ucb-mega-menu-outer-link");
+  for (let j = 0; j < allMegaMenus.length; j++) {
+    allMegaMenus[j].removeAttribute("data-bs-toggle");
+    allMegaMenus[j].removeAttribute("data-bs-target");
+    allMegaMenus[j].removeAttribute("aria-expanded");
+    allMegaMenus[j].removeAttribute("aria-controls");
+  }
 }
diff --git a/js/ucb-menu.js b/js/ucb-menu.js
@@ -8,9 +8,22 @@ for (let i = 0; i < belowContentRegion.length; i++) {
   totalMenus =  allBelowContentMenus.length;
   for (let j = 0; j < allBelowContentMenus.length; j++) {
     allBelowContentMenus[j].classList.add("ucb-menu-column-" + totalMenus);
-  allBelowContentMenus[j].parentElement.classList.add("ucb-menu-column-wrapper");
+    allBelowContentMenus[j].parentElement.classList.add("ucb-menu-column-wrapper");
   }
 }
+
+// Add columns for Above Content Menus
+ totalMenus = 0;
+const aboveContentRegion = document.getElementsByClassName("ucb-above-content-region");
+for (let i = 0; i < aboveContentRegion.length; i++) {
+  const allAboveContentMenus =  aboveContentRegion[i].getElementsByClassName("ucb-system-menu-block");
+  totalMenus =  allAboveContentMenus.length;
+  for (let j = 0; j < allAboveContentMenus.length; j++) {
+    allAboveContentMenus[j].classList.add("ucb-menu-column-" + totalMenus);
+    allAboveContentMenus[j].parentElement.classList.add("ucb-menu-column-wrapper");
+  }
+}
+
 // Add columns for Footer Menus
 totalMenus = 0;
 const footerRegion = document.getElementsByClassName("ucb-footer-top");