<div class="bux-menu-wrapper">
<div class="bux-container bux-grid bux-container__menu bux-container__menu--with-search ">
<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">Level 1 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
bux-menu__link--active disclosure-nav-item-with-submenu mobile-depth-cutoff">
Level 2 Link
</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed
mobile-visible">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link bux-menu__link--active">Level 3 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 4 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 5 Link</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 5 Link</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 4 Link</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 3 Link</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</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">Level 1 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 1 Link</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link disclosure-nav-item-with-submenu disclosure-nav-item-with-submenu">Level 1 Link</a>
<ul class="disclosure-nav-submenu disclosure-nav-submenu-closed">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link
">
Level 2 Link
</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Level 1 Link</a>
</li>
</ul>
</nav>
<div class="bux-menu__search">
<div class="bux-form__text-field--menu-search__wrapper" role="dialog" aria-modal="true">
<form id="site-search" class="bux-search" role="search">
<label class="bux-search__label visually-hidden" for="buxSearch">Search</label>
<input id="buxSearch" class="bux-search__input bux-form__text-field bux-from__text-field--menu-search" placeholder="Search" tabindex="-1" />
<button class="bux-search__submit is-hidden" tabindex="-1"><span class="visually-hidden">Submit search</span></button>
</form>
</div>
<button id="menuSearchBtn" type="button" aria-expanded="false" aria-controls="site-search"><span class="visually-hidden">Toggle search dialog</span><span id="searchIcon" class="icon icon-search" aria-hidden="true"></span></button>
</div>
</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 %}">
<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" role="dialog" aria-modal="true">
<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" placeholder="Search" tabindex="-1" />
<button class="bux-search__submit is-hidden" tabindex="-1"><span class="visually-hidden">Submit search</span></button>
</form>
</div>
<button id="menuSearchBtn" type="button" aria-expanded="false" 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
items:
- title: Level 1 Link
url: '#'
active: true
subitems:
- title: Level 2 Link
url: '#'
active: true
subitems:
- title: Level 3 Link
url: '#'
active: true
subitems:
- title: Level 4 Link
url: '#'
active: false
subitems:
- title: Level 5 Link
url: '#'
active: false
- title: Level 5 Link
url: '#'
active: false
- title: Level 4 Link
url: '#'
active: false
- title: Level 3 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 1 Link
url: '#'
active: false
subitems:
- title: Level 2 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 1 Link
url: '#'
active: false
- title: Level 1 Link
url: '#'
active: false
subitems:
- title: Level 2 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 2 Link
url: '#'
active: false
- title: Level 1 Link
url: '#'
active: false
label: with-search
modifier: with-search
inputId: buxSearch
searchFormId: site-search
@mixin transition-specs {
transition: all 0.3s ease-in-out;
}
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;
&::before,
&::after {
font-family: 'bux-icons';
color: $gray-dark-60;
position: absolute;
top: -1px;
right: -4px;
opacity: 0;
@include transition-specs;
}
&::before { content: "\f010"; /* down arrow */ opacity: 1; }
&::after { content: "\f011"; /* up arrow */ opacity: 0; }
&[aria-expanded='true'] {
&::before { opacity: 0; }
&::after { opacity: 1; }
}
&[aria-expanded='false'] {
&::before { opacity: 1; }
&::after { opacity: 0; }
}
}
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;
&:has(.bux-menu__link--active) {
border-bottom-color: $scarlet;
& + 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;
white-space: nowrap;
&.bux-menu__link--active {
border-bottom: 4px solid $scarlet;
& + button {
border-bottom: 4px solid $scarlet;
}
}
& + button {
padding-right: $sp-16;
}
}
}
ul {
border: 2px solid $gray-light-80;
border-top: none;
padding-top: $sp-8!important;
ul {
padding-top: 0 !important;
}
}
li {
display: block;
width: 100%;
margin: 0;
padding: 0;
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: 0;
padding-top: $sp-8;
margin-top: 1px;
ul {
top: 0;
left: 100%;
padding: 0;
margin-top: -2px;
}
li {
position: relative;
}
button {
float: right;
&.disclosure-nav-button-no-link {
float: none;
text-align: left;
width: 100%;
}
&::after {
position: absolute;
top: rem-calc(8);
right:0;
left:auto;
}
&[aria-expanded=true], &[aria-expanded=false] {
&::after {
content: "\f111";
font-size: rem-calc(20);
padding-right: $sp-8;
opacity: 1;
}
&::before {
content: "";
}
}
&:focus {
&[aria-expanded=true], &[aria-expanded=false] {
outline: none;
&::after {
outline: 2px solid $focus;
outline-offset: -2px;
}
}
}
}
}
}
}
&.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;
border: 0;
background: transparent;
cursor: pointer;
position: relative;
background:
/* center line drawn as a background stripe */
linear-gradient($gray-dark-80, $gray-dark-80) calc(100% - 24px) / 14px 2px no-repeat;
&:focus,
&:hover
{
background-color: $gray-light-90;
color: $gray-dark-80;
outline-color: $gray-dark-80;
span {
&,
&::before,
&::after
{
background:$gray-dark-80;
}
}
}
&::before,
&::after
{
content: "";
display: block;
position: absolute;
width: 14px;
height: 2px;
background: $gray-dark-80;
right: $sp-24;
margin-left: 8px;
top: 22px;
transition:
transform 0.3s ease,
opacity 0.3s linear;
transform-origin: 50% 50%;
color: $gray-dark-80;
}
&::before { transform: translateY(-5px); }
&::after { transform: translateY(5px); }
&[aria-expanded=true] {
background-size: 0 0;
&::before {
transform: translate(-50%,-50%) rotate(45deg);
right: 20px;
}
&::after {
transform: translate(-50%,-50%) rotate(-45deg);
right: 20px;
}
}
}
.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;
pointer-events: all;
&::after {
color: $scarlet;
}
}
#searchIcon {
font-size: 1.25rem;
padding: 0 0 0 10px;
}
@mixin search-icon-parameters {
margin-top: 0px;
margin-left: -15px;
position: absolute;
}
.is-hidden {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.bux-menu__search {
@include transition-specs;
overflow: clip;
width: 100%;
pointer-events: none;
#menuSearchBtn {
pointer-events: all;
&:focus {
outline-offset: -2px;
}
}
#searchIcon {
&::before {
transform: skew(0) scale(1);
content: "\f012";
@include transition-specs;
@include search-icon-parameters;
}
&::after {
content: "\f105";
font-family: bux-icons;
transform: scale(0);
position: absolute;
@include transition-specs;
@include search-icon-parameters;
}
}
.bux-form__text-field--menu-search__wrapper {
opacity: 0;
transform: translate3d(0, 100%, 0); /* off-screen downward */
@include transition-specs;
pointer-events: none;
}
&.active {
@include transition-specs;
#searchIcon {
&::before {
transform: skew(45deg, 45deg) scale(0.5);
content: "\f012";
@include transition-specs;
@include search-icon-parameters;
}
&::after {
content: "\f105";
font-family: bux-icons !important;
font-style: normal;
font-weight: 400 !important;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: scaleX(1);
@include transition-specs;
@include search-icon-parameters;
}
}
.bux-form__text-field--menu-search__wrapper {
opacity: 1;
transform: translate3d(0, 0, 0);
pointer-events: auto;
}
}
}
@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);
}
}
.disclosure-nav-orientation-vertical .bux-menu__search {
.bux-form__text-field--menu-search__wrapper {
opacity: 1;
visibility: visible;
pointer-events: all;
transition: none;
transform: none;
}
}
}
.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-8 !important;
border-top: 2px solid $gray-light-80 !important;
}
nav.disclosure-nav.disclosure-nav-orientation-horizontal > ul > li ul:has(li li) > li {
border-top: none!important;
margin-top: 0 !important;
}
nav.disclosure-nav.disclosure-nav-orientation-horizontal > ul > li:has(li li) {
ul {
padding-top: 0!important;
li:first-of-type {
margin-top: 0;
button:after {
padding-top: 0;
margin-top: 0;
}
}
}
li {
border-top: none;
border-bottom: none;
li:first-of-type {
padding-top: 0;
button:after {
padding-top: 0;
}
}
}
&:has(.mobile-depth-cutoff) {
ul {
padding: 0!important;
border: 2px solid $gray-light-80;
border-top: none;
}
li {
border: none;
&:first-of-type {
padding-top:0;
}
&:last-of-type {
padding-bottom: 0;
}
}
}
}
div:not(.bux-container--sidebar-nav) > nav.disclosure-nav-orientation-vertical {
ul button.disclosure-nav-button {
&[aria-expanded="false"] {
&:before {
content: "\f005";
font-family: bux-icons;
font-weight: 400;
top: 3px;
right: 6px;
opacity: 1;
transition: none!important;
}
&:hover:before {
color: $white;
opacity: 1;
transition: none!important;
}
&:after, &:hover:after {
content:"";
font-family: bux-icons;
font-weight: 400;
transition: none!important;
}
}
&[aria-expanded="true"] {
&:before {
content: "\f007";
font-family: bux-icons;
font-weight: 400;
top: 3px;
right: 6px;
opacity: 1!important;
color: $gray-dark-80;
transition: none!important;
}
&:hover:before {
color: $white;
opacity: 1!important;
transition: none!important;
}
&:after, &:hover:after {
content:""!important;
font-family: bux-icons;
font-weight: 400;
transition: none!important;
}
}
}
}
// Microinteractions
.disclosure-nav-orientation-horizontal {
.bux-menu__link:not(.bux-menu__link--active) {
padding-bottom: 9px!important;
}
li li a:hover {
transition-duration: .3s;
transition-property: background-color;
transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.bux-menu {
> li,
li li {
position: relative;
&:hover a:not(.bux-menu__link--active){
border-left: none!important;
}
}
}
.bux-menu
> li:has(> .bux-menu__link:not(.bux-menu__link--active))::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background-color: $gray-dark-40;
transform: scaleX(0);
transform-origin: right center;
transition: transform .3s cubic-bezier(.38,.005,.215,1);
}
.bux-menu
> li:hover:has(> .bux-menu__link:not(.bux-menu__link--active))::before {
transform: scaleX(1);
transform-origin: left center;
}
.bux-menu
li li:has(> .bux-menu__link:not(.bux-menu__link--active))::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: $gray-dark-40;
transform: scaleY(0);
transform-origin: left bottom;
transition: transform .3s cubic-bezier(.38,.005,.215,1);
}
.bux-menu
li li:hover:has(> .bux-menu__link:not(.bux-menu__link--active))::before {
transform: scaleY(1);
transform-origin: left top;
}
.bux-menu li li:hover {
padding-left: 4px;
border-left: none !important; /* if you had a default border */
}
}
.disclosure-nav-orientation-vertical {
li li {
margin-right: 0!important;
}
}
.bux-container__menu nav.disclosure-nav ul li li a.bux-menu__link {
font-weight: 400 !important;
}
var options = {
ariaLabel: "Main",
breakpointMinWidth: 639,
};
const buxMenu = document.querySelector(".bux-menu");
if (buxMenu) {
var sidebarNav = document.querySelectorAll('.bux-container--sidebar-nav__mobile-hidden')[0];
if (sidebarNav) {
options.breakpointMinWidth = 960;
}
// 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 isSafariMobile() {
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
// console.log("This is an iOS device.");
return true;
} else {
// console.log("This is not an iOS device!");
return false;
}
}
function toggleMenuHeight() {
let bottomProperty = 'marginBottom';
const navButton = document.querySelector(".disclosure-nav-toggle");
if (isSafariMobile()) {
// Workaround for iOS Safari margin-bottom issue.
// console.log('mobile safari in use!!!!');
bottomProperty = 'paddingBottom';
}
if (navButton) {
navButton.setAttribute("type", "button");
navButton.addEventListener("click", () => {
if (navButton.getAttribute("aria-expanded") === "false") {
document.querySelector(
".bux-menu-wrapper"
).style[bottomProperty] = 0;
} else {
let menuHeight =
document.querySelector(
"#bux-main-menu"
).clientHeight;
document.querySelector(
".bux-menu-wrapper"
).style[bottomProperty] = 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[bottomProperty] = 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[bottomProperty] = 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 menuSearchWrapper = document.getElementsByClassName("bux-form__text-field--menu-search__wrapper");
function toggleSearch() {
var searchIcon = document.getElementById("searchIcon");
menuSearchContainer.classList.toggle("active");
requestAnimationFrame(() => menuSearchInput.focus());
if (menuSearchInput.getAttribute("tabindex") === "0") {
menuSearchInput.setAttribute("tabindex", "-1");
menuSearchButton.setAttribute("aria-expanded", "false");
} else {
menuSearchInput.setAttribute("tabindex", "0");
menuSearchButton.setAttribute("aria-expanded", "true");
}
menuSearchSubmit.classList.toggle("is-hidden");
menuSearchSubmit.getAttribute("tabindex") === "0"
? menuSearchSubmit.setAttribute("tabindex", "-1")
: menuSearchSubmit.setAttribute("tabindex", "0");
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 =
!menuSearchContainer.classList.contains("active");
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) {
menuSearchSubmit.classList.remove("is-hidden");
menuSearchInput.setAttribute("tabindex", "0");
menuSearchSubmit.setAttribute("tabindex", "0");
} else if (
windowWidth > breakpoint &&
menuSearchContainerIsInactive &&
menuSearchInputIsHidden
) {
} else if (
windowWidth > breakpoint &&
menuSearchContainerIsActive &&
menuSearchInputIsHidden
) {
menuSearchSubmit.classList.remove("is-hidden");
menuSearchInput.setAttribute("tabindex", "0");
menuSearchSubmit.setAttribute("tabindex", "0");
} else if (
windowWidth > breakpoint &&
menuSearchContainerIsInactive &&
menuSearchInputIsShowing
) {
menuSearchSubmit.classList.add("is-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.setAttribute("tabindex", "0");
menuSearchSubmit.setAttribute("tabindex", "0");
menuSearchSubmit.classList.remove("is-hidden");
} else if (windowWidth > breakpoint && !menuIsMobile) {
menuSearch.classList.remove("bux-menu--mobile");
menuSearchSubmit.classList.add("is-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);
}
}
// Focus trap for mobile menu
function handleFocusTrap(e) {
if (e.keyCode !== 9) return;
if (
e.target === navLinks[navLinks.length - 1] &&
!e.shiftKey
) {
e.preventDefault();
navButton.focus();
}
}
function mobileEvents() {
let isMobile = document
.getElementById("bux-main-menu")
.classList.contains("disclosure-nav-responsive");
if (isMobile) {
moveSearchToNav();
if (navButton) {
navButton.addEventListener("click", () => {
if (navButton.getAttribute("aria-expanded") === "false") {
navMenu.setAttribute("aria-modal", "false");
} else {
navMenu.setAttribute("aria-modal", "true");
}
});
}
navMenu.addEventListener("keydown", handleFocusTrap);
} else if (!isMobile) {
moveSearchBack();
navMenu.removeEventListener("keydown", handleFocusTrap);
menuSearchInput.setAttribute("tabindex", "-1");
}
}
mobileEvents();
window.addEventListener("resize", mobileEvents);
window.addEventListener("load", toggleMobileSearch);
// The following pauses the eventListener when the search input is focused
// On Android, the keyboard popping up causes a window resize. When this
// happens the focus on the search input is kicked out and the this causes
// the keyboard to flash and never show up. Adding this pause gives the
// keyboard time to show up
//
function handleResize() {
   if (!document.activeElement || document.activeElement !== menuSearchInput) {
mobileEvents();
toggleMobileSearch();
   }
}
// Add the resize event listeners
window.addEventListener("resize", handleResize);
// Pause the resize event listeners when menuSearchInput is in focus
if (menuSearchInput) {
menuSearchInput.addEventListener("focus", () => {
   pauseEventListeners(window, "resize", handleResize, 100);
});
}
function pauseEventListeners(element, eventType, handler, duration) {
   // Remove the event listener
   element.removeEventListener(eventType, handler);
   // Re-add the event listener after the specified duration
   setTimeout(() => {
       element.addEventListener(eventType, handler);
   }, duration);
}
}
<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).