Aoda Accessible Menu

Adobe has an active public repo for an accessible menu. It’s called “Mega Menu”. It’s adds classes, aria tags, and keypad controls for you! Here is the link for the js file. In my example I’ve assigned the classes hover, and open. You can use the enter, tab, and esc keys to go through the menus. I’ve included an example, and the code you’ll need below.

Here is a exmaple

You’ll have to add JS to target the menu, menu and sub-menus

$('.menu-primary-menu-container').accessibleMegaMenu();

setTimeout(function () {
	$('body').removeClass('init');
}, 500);

$(".menu-primary-menu-container").accessibleMegaMenu({
	/* prefix for generated unique id attributes, which are required
	   to indicate aria-owns, aria-controls and aria-labelledby */
	uuidPrefix: "accessible-megamenu",

	/* css class used to define the megamenu styling */
	menuClass: "navbar-nav",

	/* css class for a top-level navigation item in the megamenu */
	topNavItemClass: "menu-item-has-children",

	/* css class for a megamenu panel */
	panelClass: "sub-menu",

	/* css class for the hover state */
	hoverClass: "hover",

	/* css class for the focus state */
	focusClass: "focus",

	/* css class for the open state */
	openClass: "open"
});

Ensure the open class will show the sub-menu

.navbar-nav .sub-menu.open {
	display: block;
	opacity: 1;
	visibility: visible;
}

Flexbox – the same columns height

Make Bootstrap Columns All the Same Height

HTML:

<div class="container">
<div class="row is-flex">
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 1</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
<a class="btn btn-primary" href="#">Link 2</a></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>Ttitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<a class="btn btn-primary" href="#">Link 3</a></div>
</div>
</div>
</div>

CSS:

.row.is-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

Solution 2 using table

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

More Different Tricks on How to Make Bootstrap Columns All the Same Height: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height

Horizontal full width menu

Add a horizontal menu displaying on the full container width.

HTML and WordPress menu function:

CSS code:

ul#horizontal-menu-list {
	display: table;
	width: 100%;
	padding: 60px 0;
	margin-left: 0;
}
ul#horizontal-menu-list li {
	display: table-cell;
}
ul#horizontal-menu-list li:first-child a {
	text-align: left;
}
ul#horizontal-menu-list a {
	display: block;
	border: 0;
	text-align: center;
	margin: 0 5px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #777;
}

Set the same boxes height on page

Set the same boxes height on a page on load and on resize. Check the maximum bucket height and set all buckets the same max height.

var $window = jQuery(window);
function bucket_boxed_height() {
        var bucket_boxed = $('.bucket-box');
        var Max_bucket_height = 0;
        var windowsize = $window.width();
        if (windowsize > 991) {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
                if (Max_bucket_height < $( this ).innerHeight()) {
                    Max_bucket_height = $( this ).innerHeight();
                }
                console.log('innerHeight = ' + innerHeight);
            });
            bucket_boxed.each(function( index ) {
                $( this ).innerHeight(Max_bucket_height);
            });
        }
        else {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
            });
        }
}

bucket_boxed_height();

// Bind event listener
jQuery(window).bind('resize', bucket_boxed_height);