Mega Menus

boulder_base.libraries.yml

@@ -485,6 +485,14 @@ ucb-social-media-icons-block:
     theme:
       css/block/social-media-icons.css: {}
 
+ucb-mega-menu-block:
+  version: 1.x
+  js:
+    js/ucb-mega-menu.js: {}
+  css:
+    theme:
+      css/block/ucb-mega-menu.css: {}
+
 colorbox-image:
   version: 1.x
   js:

css/block/ucb-mega-menu.css

@@ -0,0 +1,111 @@
+.ucb-mega-menu-column-links-wrapper {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+.ucb-mega-menu-column-links-wrapper li {
+  display: block;
+  padding: 0;
+  margin: 0 0 10px 0;
+  list-style-type: none;
+}
+
+.ucb-mega-menu-column-links-wrapper a {
+  display: block;
+}
+
+.ucb-mega-menu-link-desc {
+  font-size: 75%;
+}
+
+.ucb-mega-menu-icon {
+  padding-left: 2px;
+}
+
+.ucb-mega-menu {
+  position: absolute;
+  box-shadow: 0 2px 5px rgba(0 0 0 /10%);
+  z-index: 9;
+  background: #fff;
+  color: #000;
+  left: 0;
+  right: 0;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.ucb-mega-menu-outer-link {
+  cursor: pointer;
+}
+
+.ucb-mega-menu-column-3 div {
+  min-width: 33%;
+  width: 33%;
+  max-width: 33%;
+}
+
+.ucb-mega-menu-column-4 div {
+  min-width: 25%;
+  width: 25%;
+  max-width: 25%;
+}
+
+.ucb-mega-menu-column-5 div {
+  min-width: 20%;
+  width: 20%;
+  max-width: 20%;
+}
+
+.ucb-mega-menu-column-6 div {
+  min-width: 16%;
+  width: 16%;
+  max-width: 16%;
+}
+
+.ucb-mega-menu-wrapper {
+  padding: 20px;
+}
+
+.ucb-mega-menu-column-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+@media only screen and (max-width: 576px) {
+  .ucb-mega-menu-column-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .ucb-mega-menu {
+    position: relative;
+  }
+  .ucb-mega-menu-column-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+  .ucb-mega-menu-column-3 div,
+  .ucb-mega-menu-column-4 div,
+  .ucb-mega-menu-column-5 div,
+  .ucb-mega-menu-column-6 div {
+    min-width: 100%;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .ucb-header-dark .ucb-mega-menu,
+  .ucb-header-black .ucb-mega-menu {
+    background-color: #000;
+    color: #fff;
+  }
+
+  .ucb-header-dark .ucb-mega-menu a,
+  .ucb-header-black .ucb-mega-menu a {
+    color: #cfb87b;
+  }
+
+  .ucb-header-dark .ucb-mega-menu a:hover,
+  .ucb-header-black .ucb-mega-menu a:hover {
+    color: #fff;
+  }
+}

css/menu-styles/default-menu-styles.css

@@ -1,4 +1,4 @@
 
 .ucb-main-nav-container.ucb-secondary-menu-position-above .ucb-secondary-menu-region .menu.social-media .icon-bg {
     padding: 0 5px;
-}
+}

css/menu-styles/rise-styles.css

@@ -1,4 +1,8 @@
-@media only screen and (min-width: 576px) {
+@media only screen and (min-width: 577px) {
+  .ucb-primary-menu-region-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
   .express-messages .express-message:first-of-type {
     margin-top: 40px;
   }

js/ucb-mega-menu.js

@@ -0,0 +1,29 @@
+//Adds the column value to the column wrapper
+let megaMenuLinks = document.getElementsByClassName("ucb-mega-menu-outer-link");
+let megaMenuColumns = document.getElementsByClassName("ucb-mega-menu-column-wrapper");
+for (let i = 0; i < megaMenuLinks.length; i++) {
+  let megaMenuColumnCount = megaMenuColumns[i].children.length;
+  if(megaMenuColumnCount < 3) {
+    megaMenuColumnCount = 3;
+  }
+  if(megaMenuColumnCount > 6) {
+    megaMenuColumnCount = 6;
+  }
+  megaMenuColumns[i].classList.add("ucb-mega-menu-column-" + megaMenuColumnCount);
+}
+
+const megaMenuElementList = document.querySelectorAll('.ucb-mega-menu');
+const megaMenuList = [...megaMenuElementList].map(collapseEl => new bootstrap.Collapse(collapseEl,{ toggle: false}));
+
+ //Add an event listener to check if the user clicked outside the mega menu, then close the mega menu
+ window.addEventListener('click', function(e){
+  const allMegaMenus =  document.getElementsByClassName("ucb-mega-menu");
+  const allMainMenus =  document.getElementsByClassName("block-system-menu-blockmain");
+  for (let i = 0; i < allMegaMenus.length; i++) {
+    for (let j = 0; j < allMainMenus.length; j++) {
+      if (!allMegaMenus[i].contains(e.target) && !allMainMenus[j].contains(e.target) && allMegaMenus[i].classList.contains("show")){
+        megaMenuList[i].hide();
+      }
+    }
+  }
+})

js/ucb-menu.js

@@ -1,13 +1,13 @@
 document.addEventListener("DOMContentLoaded", () => {
 
-  const mainCheck = document.getElementsByClassName("ucb-primary-menu-region-container")[0];
+  const mainCheck = document.getElementsByClassName("ucb-primary-menu-region")[0];
   if (mainCheck != null) {
   const mainMenuCheck = mainCheck.getElementsByClassName("ucb-menu")[0];
   if (mainMenuCheck != null) {
     const mainMenu = new AccessibleMenu.DisclosureMenu({
     menuElement: mainMenuCheck,
     controllerElement: document.querySelector("#ucb-mobile-menu-toggle"),
-    containerElement: document.getElementsByClassName("ucb-primary-menu-region-container")[0],
+    containerElement: document.getElementsByClassName("ucb-primary-menu-region")[0],
     openClass: "open",
   });
 }

templates/block/block--mega_menu.html.twig

@@ -0,0 +1,8 @@
+
+{% block content %}
+  <div class="ucb-mega-menu-column-wrapper">
+    {{content.field_mega_menu_text_above|render}}
+    {{content.field_mega_menu_menu_links}}
+  </div>
+  {{content.field_mega_menu_text_below|render}}
+{% endblock %}

templates/field/field--field-display-mega-menu.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/field/field--field-mega-menu-menu-links.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/field/field--field-mega-menu-select.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item}}
+{% endfor %}

templates/field/field--field_collections_multiselect.html.twig

@@ -1,3 +1,3 @@
 {% for item in items %}
-	{{ item.content }}
+  {{ item.content }}
 {% endfor %}

templates/field/field--field_mega_menu_heading.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/field/field--field_mega_menu_links.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/field/field--field_mega_menu_links_desc.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/field/field--field_mega_menu_links_link.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+ {{ item.content}}
+{% endfor %}

templates/field/field--field_mega_menu_links_list_label.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/field/field--field_mega_menu_links_list_links.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/field/field--field_mega_menu_select.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/field/field--field_mega_menu_text_above.html.twig

@@ -0,0 +1,5 @@
+<div class = "ucb-mega-menu-text-above">
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}
+</div>

templates/field/field--field_mega_menu_text_below.html.twig

@@ -0,0 +1,3 @@
+{% for item in items %}
+  {{ item.content}}
+{% endfor %}

templates/navigation/menu--extras.html.twig

@@ -0,0 +1,80 @@
+{#
+/**
+ * @file
+ * Contains the template to display a menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *   menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *   that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *   - is_unpublished: TRUE if the link is to an unpublished node.
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see http://twig.sensiolabs.org/doc/tags/macro.html
+#}
+{{ attach_library('boulder_base/ucb-mega-menu-block') }}
+{{ menus.menu_links(items, attributes, 0) }}
+{% macro menu_links(items, attributes, menu_level) %}
+  {% if items %}
+    <ul {{attributes.addClass('ucb-menu nav ucb-main-menu-mega-menu')}}>
+      {% for item in items %}
+        {% set classes = [
+        'menu-item',
+        item.is_expanded ? 'expanded',
+        item.is_collapsed ? 'collapsed',
+        item.in_active_trail ? 'active',
+        item.is_unpublished ? 'unpublished'
+        ] %}
+        <li{{item.attributes.addClass(classes)}}>
+          {% if item.title|upper == 'HOME' %}
+            <a{{create_attribute({href:item.url|render,class:'ucb-home-button nav-link',title:item.title})}}>
+              <i class="fa-solid fa-home"></i>
+              <span class="visually-hidden">{{ item.title }}</span>
+            </a>
+          {% else %}
+            {% set title = item.is_unpublished ? {
+            '#markup': '<i class="fa-solid fa-eye-slash"></i> ' ~ item.title|e ~ '<span class="visually-hidden">(Unpublished)</span>'
+            } : item.title %}
+            {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+              {%  set linkID = title|lower|trim|replace({' ': ''}) ~ item.content.field_mega_menu_select.0['#block_content'].id.value %}
+              {% set linkTargetID = "#" ~ linkID %}
+              {% set linkAttr = create_attribute({  "data-bs-toggle" : "collapse", "data-bs-target": linkTargetID, "aria-expanded": "false", "aria-controls" : linkID }) %}
+              {% set linkTitle = { '#markup': title|e ~ '<i class="fa fa-angle-down ucb-mega-menu-icon" aria-hidden="true"></i>'} %}
+              {{ link(linkTitle, item.url, linkAttr.addClass(['ucb-mega-menu-outer-link', "nav-link"]))  }}
+              {% if item.content.field_display_mega_menu|render|striptags|trim == "On" %}
+                <div id = "{{linkID}}" class = "ucb-mega-menu container collapse" data-bs-parent = ".ucb-main-menu-mega-menu">
+                  <div class="ucb-mega-menu-wrapper">
+                    <h2 class="ucb-mega-menu-header"><a href = "{{item.url}}" class = "ucb-mega-menu-heading-link">{{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_heading.value }}</a></h2>
+                    <div class="ucb-mega-menu-column-wrapper">
+                      {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_above|view}}
+                      {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_menu_links|view}}
+                    </div>
+                    {{item.content.field_mega_menu_select.0['#block_content'].field_mega_menu_text_below|view}}
+                  </div>
+                </div>
+              {% endif %}
+            {% else %}
+              {{ link(title, item.url, create_attribute({ class: 'nav-link' })) }}
+              {% if item.below %}
+                {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+              {% endif %}
+            {% endif %}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

templates/paragraphs/paragraph--mega-menu-links-list.html.twig

@@ -0,0 +1,6 @@
+<div class = "ucb-mega-menu-column">
+  <strong class = "ucb-mega-menu-column-label">{{ content.field_mega_menu_links_list_label|render}}</strong>
+  <ul class = "ucb-mega-menu-column-links-wrapper">
+    {{ content.field_mega_menu_links_list_links|render }}
+  </ul>
+</div>

templates/paragraphs/paragraph--mega-menu-links.html.twig

@@ -0,0 +1,6 @@
+<li>
+  {{ content.field_mega_menu_links_link|render }}
+  <div class = "ucb-mega-menu-link-desc">
+    {{ content.field_mega_menu_links_desc|render }}
+  </div>
+</li>