Keyboard Friendly Push Menu v2

by Aaron Kahlhamer

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
    <ul id="top" class="lp-top-styles">
    <li><a href="#" name="#women">Women <span>&#8593;</span></a></li>
    <li><a href="#" name="#accessories">Accessories <span>&#8593;</span></a></li>
    <li><a href="#" name="#jewelry">Jewelry <span>&#8593;</span></a></li>
    <li><a href="#" name="#shoes">Shoes <span>&#8593;</span></a></li>
    <li><a href="#" name="#men">Men <span>&#8593;</span></a></li>
    <li><a href="#" name="#for-the-home">For the Home <span>&#8593;</span></a></li>
  </ul>

    <div class="lp-sub-menu">
      <ul id="women">
        	<li><a href="#">Women</a></li>
          <li><a href="#">Women's Plus</a></li>
          <li><a href="#">Petites</a></li>
      </ul>

      <ul id="accessories">
          <li><a href="#">Women</a></li>
          <li><a href="#">Men</a></li>
      </ul>

      <ul id="jewelry">
          <li><a href="#">No Jewelry</a></li>
      </ul>

      <ul id="shoes">
          <li><a href="#">Women</a></li>
          <li><a href="#">Men</a></li>
      </ul>

      <ul id="men">
          <li><a href="#">Men's</a></li>
          <li><a href="#">Big &amp; Tall</a></li>
          <li><a href="#">Accessories</a></li>
      </ul>

      <ul id="for-the-home">
          <li><a href="#">Bed</a></li>
          <li><a href="#">Bath</a></li>
          <li><a href="#">DĂ©cor</a></li>
          <li><a href="#">Kitchen</a></li>
          <li><a href="#">Dining &amp; Entertaining</a></li>
      </ul>

    </div>

CSS

*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}ul{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}

body, div, ul, li, a, img, span {
  margin:0;
  padding:0;
}

body {
  background-color:rgba(21, 37, 62, .3);
  font-family: Helvetica, Arial, sans-serif;
  font-size:.9em;
}

/*------------------------------------*\
    $NAV
\*------------------------------------*/

.lp-top-styles {
  background-color: rgba(21, 37, 62, 1);
  color: #fff;
  position:relative;
  text-align: center;
  width:100%;
  z-index: 2;
}

.lp-top-styles li {
  display:inline-block;
  text-align: center;
  width:16%;
}

.lp-top-styles li:first-child,
.lp-top-styles li:first-child {
  width:17%;
}

.lp-top-styles a {
  color: #fff;
  display:block;
  line-height: 270%;
  padding: 0.42em 0.7em;
  position:relative;
  text-decoration: none;
  width:100%;
}

.lp-top-styles a:hover,
.lp-top-styles a:focus  {
  background-color: rgba(255, 255, 255, .1);
}

.lp-top-styles span {
  visibility: hidden;
}

/*------------------------------------*\
    $SUB-NAV
\*------------------------------------*/

.lp-sub-menu {
  background-color: rgba(21, 37, 62, .4);
  float:left;
  height:0;
  overflow:hidden;
  width:100%;
}

.lp-sub-menu ul {
  float: left;
  position:absolute;
  visibility:hidden;
  width:30%;
}

.lp-sub-menu ul:last-child {
  right:.6%;
}

.lp-sub-menu ul a {
  color: #000;
  display: block;
  line-height: 320%;
  padding:0 10%;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-sub-menu ul a:hover,
.lp-sub-menu ul a:focus {
  background-color: rgba(0,0,0,0.3);
}

/*------------------------------------*\
    $TEMPLATE
\*------------------------------------*/

.lp-container {
  float:left;
  padding: 4em...

JavaScript

$(document).ready(function() {



	$('.lp-sub-menu ul').each(function(){
		
		var height = $(this).height(),
			oid = $(this).attr('id');

		$(this).transition({ y: + - + height + 'px' });

	 	$(this).find('a:last').focusout(function(){
	        $( "[name|='#"+oid+"']" ).focus();
    	});

	});

	var heights = $('.lp-sub-menu > ul').map(function ()
    {
        return $(this).height();
    }).get(),
    maxHeight = Math.max.apply(null, heights);

	$('#top').on('click focus', 'a', function(e){
		"use strict";
		e.preventDefault();

		var ahrefname = this.name,
			eLeft = $(this).offset().left,
			percent = 100 / $(window).width() * eLeft,
			submenuHeight = $(ahrefname).height();
		
		if ($(ahrefname).siblings().hasClass('active-sub-menu')) {
			$(this).parents('ul').find('a').removeClass('active-menu').find('span').css({'visibility' : ''});
			$(ahrefname).siblings().transition({ y: + - + maxHeight + 'px'}).delay(10).queue(function(next){
				$(ahrefname).siblings().removeClass('active-sub-menu').css({'margin-left' : ''});
		    	next();
		    });
		    $('.lp-sub-menu').transition({ height: + submenuHeight + 'px'});
		    $(ahrefname).css({'margin-left' : percent + '%'}).delay(4).queue(function(next){
				$(ahrefname).addClass('active-sub-menu').transition({ y: + 0 + 'px'});
				next();
		    });
		    $(this).addClass('active-menu').find('span').css({'visibility' : 'visible'});
		} else if ($(ahrefname).hasClass('active-sub-menu')) {
			$('.lp-sub-menu').transition({ height: + - + submenuHeight + 'px' });
			$(ahrefname).removeClass('active-sub-menu').transition({ y: + 0 + 'px'}).css({'margin-left' : ''});
			$(this).removeClass('active-menu').find('span').css({'visibility' : ''});
		} else {
			$('.lp-sub-menu').transition({ height: + submenuHeight + 'px' });
			$(ahrefname).find('a').focus();
			$(ahrefname).css({'margin-left' : percent + '%'}).delay(4).queue(function(next){
				$(ahrefname).addClass('active-sub-menu').transition({ y: + 0 +...