<div class="bux-menu-wrapper">
<div class="bux-container bux-grid bux-container__menu bux-motion">
<nav id="bux-main-menu" aria-label="Main Navigation" class="disclosure-nav disclosure-nav-orientation-horizontal">
<ul class="bux-menu">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link bux-menu__link--active disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu">Item 1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
disclosure-nav-item-with-submenu mobile-depth-cutoff">
Item 1.1
</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed
mobile-visible">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 1.2
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 1.3
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 1.4
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu">Item 2</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 2.1
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 2.2
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 2.3
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 2.4
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 3</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu">Item 4</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 4.1
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 4.2
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 4.3
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Item 4.4
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 5</a>
</li>
</ul>
</nav>
</div>
</div>
{#
Menu
Available variables:
- modifier: Sets the menu variant. Either null or with-search.
- nav_id: Unique identifier for the menu.
- aria-label: Aria-label for the menu.
- mobileDepthCutoff:Boolean. Set to true to hide deep menu levels on desktop.
- items: Array containing the menu items.
- item.title: Title of the menu item.
- item.url: URL for the menu item.
- item.active: Boolean. True if the item is active.
- item.subitems: Array containing menu subitems.
If using the search variant:
- label: Set to 'with-search'.
- inputId: Unique ID for the search input.
- searchFormId: Unique ID for the search form.
#}
<div class="bux-menu-wrapper">
<div class="bux-container bux-grid bux-container__menu {% if modifier %}bux-container__menu--{{modifier}} {% endif %}{%if motion %}bux-motion{% endif %}">
<nav id="{{ nav_id }}" aria-label="{{ aria_label }}" class="disclosure-nav disclosure-nav-orientation-horizontal">
{% if items %}
<ul class="bux-menu">
{% for item in items %}
<li class="bux-menu__item">
<a href="{{- item.url -}}" class="bux-menu__link{% if item.active %} bux-menu__link--active{% endif %}{% if item.subitems %} disclosure-nav-item-with-submenu{% endif %}{% if item.subitems %} disclosure-nav-item-with-submenu{% endif %}">{{ item.title }}</a>
{% if item.subitems %}
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
{% for subitem1 in item.subitems %}
<li class="bux-menu__item">
<a href="{{- subitem1.url -}}" class="bux-menu__link
{% if subitem1.active %} bux-menu__link--active{% endif %}
{% if subitem1.subitems %} disclosure-nav-item-with-submenu{% endif %}
{% if subitem1.subitems and mobileDepthCutoff %} mobile-depth-cutoff{% endif %}">
{{ subitem1.title }}
</a>
{% if subitem1.subitems %}
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed
{% if mobileDepthCutoff %} mobile-visible{% endif %}">
{% for subitem2 in subitem1.subitems %}
<li class="bux-menu__item">
<a href="{{- subitem2.url -}}" class="bux-menu__link{% if subitem2.active %} bux-menu__link--active{% endif %}">{{ subitem2.title }}</a>
{% if subitem2.subitems %}
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
{% for subitem3 in subitem2.subitems %}
<li class="bux-menu__item">
<a href="{{- subitem3.url -}}" class="bux-menu__link{% if subitem3.active %} bux-menu__link--active{% endif %}">{{ subitem3.title }}</a>
{% if subitem3.subitems %}
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
{% for subitem4 in subitem3.subitems %}
<li class="bux-menu__item">
<a href="{{- subitem4.url -}}" class="bux-menu__link{% if subitem4.active %} bux-menu__link--active{% endif %}">{{ subitem4.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</nav>
{% if label == 'with-search' %}
<div class="bux-menu__search">
<div class="bux-form__text-field--menu-search__wrapper">
<form id="{{ searchFormId }}" class="bux-search" role="search">
<label class="bux-search__label visually-hidden" for="{{ inputId }}">Search</label>
<input id="{{ inputId }}" class="bux-search__input bux-form__text-field bux-from__text-field--menu-search visually-hidden" placeholder="Search" tabindex="-1" title="Search" />
<button class="bux-search__submit visually-hidden" aria-controls="{{ inputId }}" tabindex="-1"><span class="visually-hidden">Submit search</span></button>
</form>
</div>
<button id="menuSearchBtn" type="button" aria-controls="{{ searchFormId }}"><span class="visually-hidden">Toggle search dialog</span><span id="searchIcon" class="icon icon-search" aria-hidden="true"></span></button>
</div>
{% endif %}
</div>
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
nav_id: bux-main-menu
aria_label: Main Navigation
mobileDepthCutoff: true
motion: true
items:
- title: Item 1
url: '#'
active: true
subitems:
- title: Item 1.1
url: '#'
active: false
subitems:
- title: Item 1.1
url: '#'
active: false
subitems:
- title: Item 1.1
url: '#'
active: false
subitems:
- title: Item 1.1
url: '#'
active: false
- title: Item 1.2
url: '#'
active: false
- title: Item 1.2
url: '#'
active: false
- title: Item 1.2
url: '#'
active: false
- title: Item 1.2
url: '#'
active: false
- title: Item 1.3
url: '#'
active: false
- title: Item 1.4
url: '#'
active: false
- title: Item 2
url: '#'
active: false
subitems:
- title: Item 2.1
url: '#'
active: false
- title: Item 2.2
url: '#'
active: false
- title: Item 2.3
url: '#'
active: false
- title: Item 2.4
url: '#'
active: false
- title: Item 3
url: '#'
active: false
- title: Item 4
url: '#'
active: false
subitems:
- title: Item 4.1
url: '#'
active: false
- title: Item 4.2
url: '#'
active: false
- title: Item 4.3
url: '#'
active: false
- title: Item 4.4
url: '#'
active: false
- title: Item 5
url: '#'
active: false
div.bux-container__menu,
div.bux-container--menu { //backwards compatibility
position: relative;
z-index: 999;
nav.disclosure-nav {
&.disclosure-nav-closed {
display: none;
}
button.disclosure-nav-button {
background-color: transparent;
border: none;
padding: 0;
&::after {
// Down arrow
font-family: bux-icons;
content: "\f010";
color: $gray-dark-80;
position: relative;
top: -1px;
left: 4px;
}
&[aria-expanded=true] {
&::after {
// Up arrow
content: "\f011";
}
}
&[aria-expanded=false] {
&::after {
// Down arrow
content: "\f010";
}
}
}
a, span {
color: $gray-dark-80;
text-decoration: none;
}
ul, ol {
font-family: $sans;
font-size: $ts-base;
font-weight: 700;
&.disclosure-nav-submenu-open {
display: block;
}
&.disclosure-nav-submenu-closed {
display: none;
}
}
&.disclosure-nav-orientation-horizontal {
& > ul > li {
display: inline-flex;
position: relative;
margin: $sp-12 $sp-16 0;
&:hover {
a.bux-menu__link,
span.bux-menu__link,
button.disclosure-nav-button-no-link {
border-bottom-color: $gray-dark-40;
&.bux-menu__link--active {
border-bottom-color: $gray-dark-40;
& + button {
border-bottom-color: $gray-dark-40;
}
}
& + button {
border-bottom-color: $gray-dark-40;
}
}
}
& > a,
& > span {
&.bux-menu__link {
float:inline-block;
padding: 0 0 $sp-4 0;
color: $gray-dark-80;
text-decoration: none;
//border-bottom: 4px solid $clear;
white-space: nowrap;
&.bux-menu__link--active {
border-bottom: 4px solid $scarlet;
& + button {
border-bottom: 4px solid $scarlet;
}
}
}
}
& > button {
/* border-bottom: 4px solid $clear; */
}
li {
display: block;
width: 100%;
margin: 0;
padding: 0;
&:first-child {
border-top: 2px solid $gray-light-80;
}
&:last-child {
border-bottom: 2px solid $gray-light-80;
}
a, span, button.disclosure-nav-button-no-link {
display: block;
padding: $sp-12 $sp-64 $sp-12 $sp-12;
background-color: $white;
white-space: normal;
border-bottom: none;
border-left: $sp-4 solid $clear;
&:hover, &:focus {
border-left-color: $gray-dark-60;
background-color: $gray-light-90;
}
&.bux-menu__link--active {
border-bottom-color: $clear;
border-left-color: $scarlet;
}
}
}
ul {
position: absolute;
left: 0;
top: 2rem;
width: 15rem;
padding: $sp-8 0 $sp-8 0;
ul {
top: 0;
left: 100%;
padding: 0;
margin-top: -2px;
}
li {
position: relative;
}
button {
float: right;
// position: relative;
&.disclosure-nav-button-no-link {
float: none;
text-align: left;
width: 100%;
}
&::after {
position: absolute;
top: 25%;
right:0;
left:auto;
}
&[aria-expanded=true] {
&::after {
content: "\f111";
}
}
&[aria-expanded=false] {
&::after {
content: "\f111";
}
}
}
}
}
}
&.disclosure-nav-orientation-vertical {
background-color: $white;
ul {
background-color: $white;
li {
position: relative;
margin: $sp-12 $sp-16 0 $sp-16;
}
a, span, button.disclosure-nav-button-no-link {
display: block;
border-bottom: none;
white-space: normal;
border-left: $sp-4 solid $clear;
padding: $sp-12;
&.disclosure-nav-item-with-submenu {
padding-right: 2.45rem;
}
&:hover, &:focus {
color: $gray-dark-80;
border-left-color: $gray-dark-60;
background-color: $gray-light-90;
}
&.bux-menu__link--active {
border-left-color: $scarlet;
}
}
button.disclosure-nav-button {
position: absolute;
right:0.45rem;
top: 0.45rem;
padding:0;
height: 2rem;
width: 2rem;
background-color: $gray-light-90;
&.disclosure-nav-button-no-link {
position: static;
right: auto;
top: auto;
float: none;
text-align: left;
width: 100%;
height:auto;
background-color: $white;
&::after {
position: absolute;
top: 1.25rem;
right:1.25rem;
left:auto;
}
&:hover::after {
border-right-color: $gray-dark-80;
border-bottom-color: $gray-dark-80;
}
}
&:hover {
background-color: $gray-dark-60;
cursor:pointer;
}
&::after {
content: '\f005';
font-family: $icon;
font-size: 18px;
font-weight: normal;
position: absolute;
top: 2px;
left: 7px;
}
&:hover::after {
color: $white;
}
&[aria-expanded=true] {
&::after {
transform:rotate(90deg);
transition: 120ms transform ease-in-out;
}
}
&[aria-expanded=false] {
&::after {
transform:rotate(0deg);
transition: 120ms transform ease-in-out;
}
}
}
ul {
// Second level submenus.
li {
margin-top: 0;
// ul {
// // Third level submenus.
// li {
// }
// ul {
// // Fourth level submenus.
// li {
// }
// }
// }
}
}
}
}
&.disclosure-nav-responsive {
width: 100%;
}
}
button.disclosure-nav-toggle {
@include button-reset();
background-color: $gray-light-90;
color: $gray-dark-80;
width: 100%;
padding: 0.5rem 50px 0.5rem 0.5rem;
text-align: right;
position: relative;
touch-action: manipulation;
font-weight: 700;
height: 46px;
&:focus,
&:hover
{
background-color: $gray-light-90;
color: $gray-dark-80;
outline-color: $gray-dark-80;
span {
&,
&::before,
&::after
{
background:$gray-dark-80;
}
}
}
&[aria-expanded=false]::after {
// Hamburger icon.
content: "\f00c";
font-family: bux-icons;
position: absolute;
margin-left: 8px;
font-size: 14px;
top: 16px;
font-weight: 400;
text-rendering: geometricprecision;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.11);
}
&[aria-expanded=true]::after {
// Close "X" icon.
content: "\f105";
font-family: bux-icons;
position: absolute;
margin-left: 8px;
font-size: 12px;
top: 17px;
}
}
.bux-menu__link, .disclosure-nav-button, button.disclosure-nav-toggle, button.disclosure-nav-button-no-link {
&:focus {
outline: 2px solid $focus;
outline-offset: -2px;
}
}
button.disclosure-nav-toggle {
&:focus {
outline-offset: -2px;
}
}
}
.bux-container__menu,
.bux-container--menu {
.disclosure-nav-closed .bux-menu__search {
display: none;
}
.disclosure-nav-open .bux-menu__search {
display: flex;
margin-top: $sp-16;
width: 100%;
padding: 0 $sp-16;
.bux-form__text-field--menu-search__wrapper {
width: 100%;
}
#menuSearchBtn {
display: none;
}
.bux-from__text-field--menu-search,
.bux-search__submit {
display: inline;
}
.bux-search__submit {
margin-top: 2px;
}
}
.bux-search__submit {
margin-top: 6px;
&::after {
color: $scarlet;
}
}
#searchIcon {
font-size: 1.25rem;
}
@include breakpoint(md) {
.bux-menu__search:not(.bux-menu--mobile){
flex-grow: 2;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: flex-end;
padding-right: $container-gutter;
height: 46px;
&.active {
background-color: $gray-light-90;
width: 100%;
.bux-from__text-field--menu-search,
.bux-search__submit {
display: inline;
}
}
.bux-form__text-field--menu-search__wrapper {
position: relative;
width: 33%;
}
.bux-from__text-field--menu-search {
margin: 0;
height: 46px;
}
}
#menuSearchBtn {
display: block;
background: none;
border: none;
color: $scarlet;
height: 43px;
margin-top: 3px;
i::before {
font-size: rem-calc(20);
}
}
}
@include breakpoint(lg) {
.bux-menu__search {
padding-right: ($container-gutter * 2);
}
}
}
.bux-container.bux-grid.bux-container__menu,
.bux-container.bux-grid.bux-container--menu {
padding: 0;
height: 46px;
}
@include breakpoint(md) {
.bux-container.bux-grid.bux-container__menu,
.bux-container.bux-grid.bux-container--menu {
padding-left: 48px;
padding-right: 48px;
}
}
@include breakpoint(lg) {
.bux-container.bux-grid.bux-container__menu,
.bux-container.bux-grid.bux-container--menu {
padding-left: 112px;
padding-right: 112px;
}
}
@include breakpoint(md) {
.bux-menu--with-search ul.bux-menu {
margin-top: 0;
}
}
.mobile-depth-cutoff + button {
visibility: visible;
@include breakpoint(lg) {
visibility: hidden;
}
}
.bux-menu-wrapper {
background-color: $gray-light-90;
}
:not(.disclosure-nav-responsive) {
.bux-menu--compact {
li.bux-menu__item {
margin: 12px 12px 0!important;
.disclosure-nav-button {
padding: 0;
}
li {
margin-top: 0!important;
margin-bottom: 0!important;
}
}
}
}
nav.disclosure-nav.disclosure-nav-orientation-horizontal > ul > li ul > li ul {
margin-top: $sp-16 !important;
}
nav.disclosure-nav.disclosure-nav-orientation-horizontal > ul > li ul:has(li li) > li {
border-top: none!important;
}
nav.disclosure-nav.disclosure-nav-orientation-horizontal > ul > li:has(li li) {
ul {
padding-top: 0!important;
li:first-of-type {
padding-top: $sp-8;
button:after {
padding-top: $sp-8;
}
}
}
li {
border: 2px solid $gray-light-80;
border-top: none;
border-bottom: none;
li:first-of-type {
border-top: 2px solid $gray-light-80!important;
padding-top: 0;
button:after {
padding-top: 0;
}
}
}
&:has(.mobile-depth-cutoff) {
ul {
padding: $sp-8 0!important;
}
li {
border: none;
&:first-of-type {
border-top: 2px solid $gray-light-80!important;
padding-top:0;
}
&:last-of-type {
border-bottom: 2px solid $gray-light-80;
}
}
}
}
// Microinteractions
.disclosure-nav-orientation-horizontal {
li .bux-menu__link:not(.bux-menu__link--active) {
padding-bottom: 9px!important;
&:hover::before {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
content: "";
background-color: $gray-dark-40;
}
}
li li .bux-menu__link:not(.bux-menu__link--active) {
&:hover::before {
position: absolute;
top:0;
left:0;
width: 4px;
height: 100%;
content: "";
background-color: $gray-dark-40;
}
}
}
.bux-motion .disclosure-nav-orientation-horizontal {
.bux-menu__link:not(.bux-menu__link--active) {
padding-bottom: 9px!important;
+ button.disclosure-nav-button::after {
top: -3.5px!important;
}
}
ul ul button {
&[aria-expanded=true], &[aria-expanded=false] {
&::after {
margin-top: 13px;
}
}
}
li li a:hover {
transition-duration: .3s;
transition-property: background-color;
transition-timing-function: cubic-bezier(.4,0,.2,1);
}
li .bux-menu__link:not(.bux-menu__link--active) {
&:hover::before {
transform: scaleZ(1);
transform-origin: left center;
}
&::before {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
content: "";
background-color: $gray-dark-40;
transform-origin: right center;
transform: scale3d(0,1,1);
transition: transform .3s cubic-bezier(.38,.005,.215,1);
}
}
li li .bux-menu__link:not(.bux-menu__link--active) {
&:hover {
border-left: none!important;
margin-left: 4px;
}
&:hover::before {
transform-origin: left top;
transform: scaleY(1);
}
&::before {
position: absolute;
top:0;
left:0;
width: 4px;
height: 100%;
content: "";
background-color: $gray-dark-40;
transform-origin: left bottom;
transform: scale3d(1,0,1);
transition: transform .3s cubic-bezier(.38,.005,.215,1);
}
}
}
var options = {
ariaLabel: "Main Navigation",
breakpointMinWidth: 639,
};
const buxMenu = document.querySelector(".bux-menu");
if (buxMenu) {
// Check type of a11yNavbar since this will be compiled into bux.min.js.
if (typeof disclosureNav != "undefined") {
var menu = new disclosureNav("#bux-main-menu", options);
function menuIsTooLong() {
var menuButtonWidth = 90;
var menuStyles = window.getComputedStyle(menu._navElem.parentNode);
let menuWidth =
menu._navElem.parentNode.getBoundingClientRect().width -
parseFloat(menuStyles.paddingLeft) -
parseFloat(menuStyles.paddingRight) -
menuButtonWidth;
let menuItems = menu._navElem.parentNode.querySelectorAll(
".disclosure-nav > ul > li"
);
let menuItemsTotalWidth = 0;
for (var i = 0; i < menuItems.length; i++) {
let menuItemsStyles = window.getComputedStyle(menuItems[i]);
let menuItemMargins =
parseFloat(menuItemsStyles.marginLeft) +
parseFloat(menuItemsStyles.marginRight);
let menuItemWidth =
menuItems[i].getBoundingClientRect().width +
menuItemMargins;
menuItemsTotalWidth += menuItemWidth;
}
return menuItemsTotalWidth >= menuWidth;
}
function collisionDetection() {
let menuIsCompact = buxMenu.classList.contains('bux-menu--compact')
if (menuIsTooLong() && !menuIsCompact) {
buxMenu.classList.add('bux-menu--compact');
} else if (menuIsTooLong() && menuIsCompact) {
menu.addMenuToggle();
if (menu._options.orientation === "horizontal") {
menu.switchOrientation();
}
}
}
function toggleMenuHeight() {
const navButton = document.querySelector(".disclosure-nav-toggle");
if (navButton) {
navButton.addEventListener("click", () => {
if (navButton.getAttribute("aria-expanded") === "false") {
document.querySelector(
".bux-menu-wrapper"
).style.marginBottom = 0;
} else {
let menuHeight =
document.querySelector(
"#bux-main-menu"
).clientHeight;
document.querySelector(
".bux-menu-wrapper"
).style.marginBottom = menuHeight + "px";
}
});
const subLevel = document.querySelectorAll(
".disclosure-nav-top-level"
);
if (subLevel) {
subLevel.forEach((subButton) => {
subButton.addEventListener("click", () => {
let menuHeight =
document.querySelector(
"#bux-main-menu"
).clientHeight;
document.querySelector(
".bux-menu-wrapper"
).style.marginBottom = menuHeight + "px";
});
});
}
}
if (
document
.getElementById("bux-main-menu")
.classList.contains("disclosure-nav-responsive") &&
document.querySelector(".bux-menu-wrapper").style.marginBottom
) {
document.querySelector(
".bux-menu-wrapper"
).style.marginBottom = 0;
}
}
toggleMenuHeight();
collisionDetection();
collisionDetection();
window.addEventListener("resize", collisionDetection);
window.addEventListener("resize", toggleMenuHeight);
}
//
// Search functionality
//
const mainMenuFirstLink = document.querySelector(
".bux-menu-wrapper nav > ul > li > a"
);
const menuSearch = document.getElementsByClassName("bux-menu__search")[0];
const menuSearchInput =
document.getElementsByClassName("bux-search__input")[0];
const menuSearchContainer =
document.getElementsByClassName("bux-menu__search")[0];
const menuSearchSubmit =
document.getElementsByClassName("bux-search__submit")[0];
if (menuSearch) {
const menuSearchBtn = document.getElementById("menuSearchBtn");
menuSearchBtn.onclick = function () {
toggleSearch();
};
menuSearchInput.onkeydown = function (e) {
if (menuSearchContainer.classList.contains("active")) {
if (e.shiftKey && e.key === "Tab") {
e.preventDefault();
menuSearchBtn.focus();
} else if (e.key === "Tab") {
e.preventDefault();
menuSearchSubmit.focus();
} else if (e.key === "Escape") {
e.preventDefault();
toggleSearch();
menuSearchBtn.focus();
}
}
};
menuSearchBtn.onkeydown = function (e) {
if (menuSearchContainer.classList.contains("active")) {
if (e.shiftKey && e.key === "Tab") {
e.preventDefault();
menuSearchSubmit.focus();
} else if (e.key === "Tab") {
e.preventDefault();
menuSearchInput.focus();
} else if (e.key === "Escape") {
e.preventDefault();
toggleSearch();
menuSearchBtn.focus();
}
}
};
menuSearchSubmit.onkeydown = function (e) {
if (menuSearchContainer.classList.contains("active")) {
if (e.shiftKey && e.key === "Tab") {
e.preventDefault();
menuSearchInput.focus();
} else if (e.key === "Tab") {
e.preventDefault();
menuSearchBtn.focus();
} else if (e.key === "Escape") {
e.preventDefault();
toggleSearch();
menuSearchBtn.focus();
}
}
};
document.addEventListener("click", (event) => {
if (
event.composedPath().includes(menuSearchInput) ||
event.composedPath().includes(menuSearchSubmit) ||
event.composedPath().includes(menuSearchBtn)
) {
// click inside
} else {
if (menuSearchContainer.classList.contains("active")) {
toggleSearch();
}
}
});
}
// Small breakpoint search functionality
const menuButton = document.getElementById("main-menu-toggle");
if (menuButton) {
menuButton.onclick = function () {
toggleSearch();
};
}
const menuSearchButton = document.getElementById("menuSearchBtn");
const searchWrapper = document.querySelector('.bux-form__text-field--menu-search__wrapper');
function toggleSearch() {
var searchIcon = document.getElementById("searchIcon");
menuSearchContainer.classList.toggle("active");
menuSearchInput.classList.toggle("visually-hidden");
if (menuSearchInput.getAttribute("tabindex") === "0") {
menuSearchInput.setAttribute("tabindex", "-1");
menuSearchButton.setAttribute("aria-expanded", "false");
searchWrapper.style.display = 'none';
} else {
menuSearchInput.setAttribute("tabindex", "0");
menuSearchButton.setAttribute("aria-expanded", "true");
searchWrapper.style.display = 'block';
}
menuSearchSubmit.classList.toggle("visually-hidden");
menuSearchSubmit.getAttribute("tabindex") === "0"
? menuSearchSubmit.setAttribute("tabindex", "-1")
: menuSearchSubmit.setAttribute("tabindex", "0");
menuSearchInput.focus();
searchIcon.classList.toggle("icon-xmark");
menuSearchContainer.classList.contains("active")
? mainMenuFirstLink.setAttribute("tabindex", "-1")
: mainMenuFirstLink.setAttribute("tabindex", "0");
}
// Mobile breakpoint for search
const breakpoint = 639;
function toggleMobileSearch() {
if (menuSearch) {
let windowWidth = window.innerWidth;
let menuSearchInputIsHidden =
menuSearchInput.classList.contains("visually-hidden");
let menuSearchContainerIsActive =
menuSearchContainer.classList.contains("active");
let menuSearchInputIsShowing = !menuSearchInputIsHidden;
let menuSearchContainerIsInactive = !menuSearchContainerIsActive;
let menuIsMobile = document
.getElementById("bux-main-menu")
.classList.contains("disclosure-nav-responsive");
if (windowWidth <= breakpoint) {
menuSearchInput.classList.remove("visually-hidden");
menuSearchSubmit.classList.remove("visually-hidden");
menuSearchInput.setAttribute("tabindex", "0");
menuSearchSubmit.setAttribute("tabindex", "0");
searchWrapper.style.display = 'block';
} else if (
windowWidth > breakpoint &&
menuSearchContainerIsInactive &&
menuSearchInputIsHidden
) {
searchWrapper.style.display = 'none';
} else if (
windowWidth > breakpoint &&
menuSearchContainerIsActive &&
menuSearchInputIsHidden
) {
menuSearchInput.classList.remove("visually-hidden");
menuSearchSubmit.classList.remove("visually-hidden");
menuSearchInput.setAttribute("tabindex", "0");
menuSearchSubmit.setAttribute("tabindex", "0");
} else if (
windowWidth > breakpoint &&
menuSearchContainerIsInactive &&
menuSearchInputIsShowing
) {
menuSearchInput.classList.add("visually-hidden");
menuSearchSubmit.classList.add("visually-hidden");
menuSearchInput.setAttribute("tabindex", "-1");
menuSearchSubmit.setAttribute("tabindex", "-1");
} else if (
windowWidth > breakpoint &&
menuSearchContainerIsActive
) {
toggleSearch();
}
if (windowWidth > breakpoint && menuIsMobile) {
menuSearch.classList.add("bux-menu--mobile");
menuSearchInput.classList.remove("visually-hidden");
menuSearchInput.setAttribute("tabindex", "0");
menuSearchSubmit.setAttribute("tabindex", "0");
menuSearchSubmit.classList.remove("visually-hidden");
searchWrapper.style.display = 'block';
} else if (windowWidth > breakpoint && !menuIsMobile) {
menuSearch.classList.remove("bux-menu--mobile");
menuSearchInput.classList.add("visually-hidden");
menuSearchSubmit.classList.add("visually-hidden");
}
}
}
// const menuSearch = document.getElementsByClassName("bux-menu__search")[0];
const navMenu = document.querySelector(".bux-container__menu");
const oldNavMenu = document.querySelector(".bux-container--menu");
// Backwards compatibility with update to container class name
if (!navMenu) {
navMenu = oldNavMenu;
}
const navButton = document.querySelector(".disclosure-nav-toggle");
const menuLinks = document.querySelector("ul.bux-menu");
const buxMainMenu = document.querySelector("#bux-main-menu");
let navLinks = navMenu.querySelectorAll(".bux-menu__item > a");
navLinks = Array.prototype.slice.call(navLinks);
function moveSearchToNav() {
if (menuSearch) {
buxMainMenu.insertBefore(menuSearch, menuLinks);
}
}
function moveSearchBack() {
if (menuSearch) {
navMenu.insertBefore(menuSearch, buxMainMenu.nextSibling);
}
}
function mobileEvents() {
let isMobile = document
.getElementById("bux-main-menu")
.classList.contains("disclosure-nav-responsive");
if (isMobile) {
moveSearchToNav();
navButton.addEventListener("click", () => {
if (navButton.getAttribute("aria-expanded") === "false") {
navMenu.setAttribute("aria-modal", "false");
} else {
navMenu.setAttribute("aria-modal", "true");
}
});
// Focus trap for mobile menu
navMenu.addEventListener("keydown", (e) => {
switch (e.keyCode) {
case 9: // Tab key
// Move focus to navButton if on last nav item
if (
e.target === navLinks[navLinks.length - 1] &&
!e.shiftKey
) {
e.preventDefault();
navButton.focus();
}
break;
}
});
} else if (!isMobile) {
moveSearchBack();
}
}
mobileEvents();
window.addEventListener("resize", function () {
mobileEvents();
});
window.addEventListener("load", toggleMobileSearch);
window.addEventListener("resize", toggleMobileSearch);
}
<span> rather than <a> in the HTML markup.bux.min.js, but are available separately in /public/libraries/disclosureNav.aria-current="page" to the corresponding link in the menu).