new a11y nav

In this example below you will see how to do a new a11y nav with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by megnuge, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright megnuge ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>new a11y nav</title>
  
  
  <link rel='stylesheet prefetch' href='http://www.sofftshoe.com/css/common2.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav id="secondary-nav" aria-label="Secondary Navigation">
  <div>
    <ul role="menubar">
      <li id="cart" class="sprite" role="menuitem">
        <label class="sr-only">Shopping Cart Total</label>
        <a href="/shopping-bag.aspx">
          <p>0</p>
        </a>
      </li>
      <li id="search" role="menuitem">
        <span class="sr-only">Search</span>
        <a class="ir sprite" href="">Search</a>
      </li>
     </ul>
  </div>
</nav>


<nav id="main-nav" aria-label="Main Navigation">
  <div>
      <button id="main-nav_toggle" class="sprite" aria-controls="main-nav">Menu</button>
      <a id="logo" href="http://www.korkease.com" title="LOGO">
        <img src="http://blog.korkease.com/wp-content/uploads/2017/02/logo.jpg" alt="Kork-Ease The Original Since 1953" />
         
      </a>

      <ul id="main-menu" role="menubar" class="primary">
        <li role="menuitem" id="submenu">
          <a href="#">Shoes</a>
          <ul id="sublist">
            <li><a href="#">boots</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">clogs</a></li>
            <li><a href="#">classics</a></li>
            <li><a href="#">sandals</a></li>
            <li><a href="#">wedges</a></li>
            <li><a href="#">2.0 comfort</a></li>
            <li><a href="#">shop all</a></li>
            <li><a href="#">on sale</a></li>
            
          </ul>
        </li>
        <li role="menuitem"><a href="#">Our Heritage</a></li>
        <li role="menuitem"><a href="#">The Wedge</a></li>
      </ul>

      <ul id="secondary-menu" role="menubar" class="secondary" aria-hidden="false">
        <li role="menuitem"><a href="/email/default.aspx">Customer Care</a></li>
        
        <li role="menuitem"><a href="/customer-service.aspx">Store Locator</a></li>
        <li role="menuitem"><a href="/store-locator.aspx">Privacy Policy</a></li>
        <li role="menuitem"><a href="/Order-Status-new.aspx">Order Status</a></li>
      </ul>

      <div id="main-search">
        <label>
		    <span class="visuallyhidden">Search:</span>
		    <input type="search" placeholder="Search" id="dsearch" data-which="desktop" value="Search" name="s" title="Search:">
	    </label><!--
     --><input class="sprite" type="submit" value="Search" id="dgo">
      </div>
  </div>
</nav>
<br />
<br />
<br />
<br />
<hr />
<div>
 from: <a href="https://www.w3.org/WAI/tutorials/menus/flyout/#flyoutnavkbbtn">https://www.w3.org/WAI/tutorials/menus/flyout/#flyoutnavkbbtn</a>
  <br />
  <br />
  referenced here: <a href="http://www.sofftshoe.com">Sofft Shoe</a>
</div>
  <script src='https://s3.amazonaws.com/a11y/menu/horizontal-menu.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/megnuge/new-a11y-nav-rjOdzQ */
a {
  color: #000;
}

#submenu > ul {
  display: none;
}

#submenu.open > ul {
  display: block;
}

#logo {
  width: 160px;
  height: 97px;
  display: inline-block;
}

#secondary-nav {
  position: absolute;
  right: 10px;
  top: 0;
  width: 50%;
  max-width: 200px;
}

#main-nav {
  background: none;
  background-color: #ffffff;
}
#main-nav a {
  color: #000000 !important;
}

#submenu {
  position: relative;
}
#submenu #sublist {
  position: absolute;
}

nav > a, nav li {
  display: inline-block;
}
nav ul {
  list-style-type: none;
  display: inline-block;
}
nav ul.primary, nav ul.secondary {
  display: none;
}

@media screen and (max-width: 767px) {
  #main-nav_toggle {
    display: block;
  }
  #main-nav_toggle.active + #logo + #main-menu {
    display: block;
  }

  #main-nav .primary > li:nth-child(1) {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  #main-nav_toggle {
    display: none;
  }

  nav.primary {
    list-style-type: none;
  }

  #main-nav .primary > li ul {
    background: none;
    background-color: #333;
  }

  #main-menu {
    display: block;
  }

  #submenu a:hover + #sublist {
    display: block;
  }
}


/*Downloaded from https://www.codeseek.co/megnuge/new-a11y-nav-rjOdzQ */

        document.addEventListener('DOMContentLoaded', function () {
            var menu = new MLMenu({
                menuID: "main-nav",
                mobileMenuID: "main-nav_toggle",
                mobileNavsClass: ".mobileNav",
                mobileBreakpoint: "768"
            });

            menu.init();

        }, false);




//toggle open class on drop nav on shoes when clicked
document.getElementById("submenu").onclick = function() {

    var className = ' ' + submenu.className + ' ';
    var sub = document.getElementById("sublist");

    if ( ~className.indexOf(' open ') ) {
        this.className = className.replace(' open ', ' ');
        this.setAttribute("aria-expanded","false");
        sub.setAttribute("aria-expanded","false");
    } else {
        this.className += 'open';
        this.setAttribute("aria-expanded", "true");
        sub.setAttribute("aria-expanded","true");
    }              
}

//toggle active class on #main-nav_toggle button
document.getElementById("main-nav_toggle").onclick = function() {
  
  var menu = document.getElementById("main-nav_toggle");
  var main = document.getElementById("main-menu");
  var className = '' + menu.className + ' ';
  
  if ( ~className.indexOf(' active ') ) {
        this.className = className.replace(' active ', '');
        this.setAttribute("aria-expanded","false");
        main.setAttribute("aria-expanded","false");
    } else {
        this.className += ' active';
        this.setAttribute("aria-expanded", "true");
        main.setAttribute("aria-expanded","true");
    }
  
}

Comments