RWD - MULTI-LEVEL NAVIGATION - 1

by bizamajig

HTML

<div>
<nav class="navigation">
			      <a class="active home" href="#">
			        <span class="icon"><i class="icon-home"></i></span> <span class="content">Home</span>
			      </a>
			      <a class="green" href="#app_nav">
			        <span class="icon"><i class="icon-website"></i></span> <span class="content">Apps</span>
			      </a>
			      <div id="app_nav" class="xxxhide second_level">
			        <a class="back" href="#">
			          <i class="icon-chevron-left"></i>
			        </a>
			        <div class="content">
			          <a href="http://www.google.com">
			           <span class="content">Popular Apps</span>
			          </a>
			          <a href="http://www.google.com">
			           <span class="content">Most Viewed Apps</span>
			          </a>
			          <a href="http://www.google.com">
			           <span class="content">Most Commented Apps</span>
			          </a>
			          <a href="http://www.google.com">
			           <span class="content">Recent Apps</span>
			          </a>
			        </div>
			      </div>
			      <a class="red" href="#movies_nav">
			        <span class="icon"><i class="icon-youtube"></i></span> <span class="content">Movies &amp; TV</span>
			      </a>
			      <div id="movies_nav" class="xxxhide second_level">
			        <a class="back" href="#">
			          <i class="icon-chevron-left"></i>
			        </a>
			        <div class="content">
			          <a href="http://www.google.com">
			           <span class="content">Popular Movies</span>
			          </a>
			          <a href="http://www.google.com">
			           <span class="content">Most Viewed Movies</span>
			          </a>
			          <a href="http://www.google.com">
			           <span class="content">Most Commented Movies</span>
			          </a>
			          <a href="http://www.google.com">
			           <span class="content">Recent Movies</span>
			          </a>
			        </div>
			      </div>
			      <a class="orange"...

CSS

/* START MULTI-LEVEL NAVIGATION */
nav.navigation {
  background: #f5f5f5;
/*
  width: 200px;
*/
	width: 100%;

	color: #555;
  margin: 0 auto;
  position: relative;
  padding-top: 50px;
  min-height: 100px;
  -moz-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  -ms-box-shadow: 0 1px 6px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

nav.navigation > a, nav.navigation .second_level a{
  display: table;
  width: 100%;
  height: 50px;
  color: #555;
  text-decoration: none;
  font-weight: 300;
  font-size: 18px;
  font-weight: 300;
  position: relative;
}

nav.navigation > a > .icon {
  display: table-cell;
  vertical-align: middle;
  width: 51px;
}

nav.navigation > a > .icon > i {
  margin: 0 11px;
  line-height: 100%;
  font-size: 21px;
  position: relative;
  top: 2px;
}

nav.navigation > a > .content {
  text-align: left;
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px;
  background: #f5f5f5;
}

nav.navigation > a.active {
  top: 0;
  position: absolute;
}

nav.navigation > a.home, nav.navigation > a.home .content {
  background: #444;
  color: white;
}

nav.navigation > a.home.active {
  background: #444;
  color: white;
}

nav.navigation > a.home.active > .content {
  background: #444;
}

nav.navigation > a.green .icon{
  background: #b3c833;
  color: white;
}

nav.navigation > a.green:hover > .content, nav.navigation > a.green.active > .content, nav.navigation > a.green.hover > .content {
  background: #b3c833;
  color: white;
}

nav.navigation > a.red .icon{
  background: #ce5043;
  color: white;
}

nav.navigation > a.red:hover > .content, nav.navigation > a.red.active > .content, nav.navigation > a.red.hover > .content {
  background: #ce5043;
  color: white;
}

nav.navigation > a.orange .icon{
  background: #fb8521;
  color: white;
}

nav.navigation > a.orange:hover > .content, nav.navigation...

JavaScript

$( '.navigation > a' ).click(function() {
		var $element = $(this);
		if ( ! $element.hasClass( 'active' ) ) {
			$( '.navigation' ).unbind( 'mouseleave' );
			$( '.navigation .second_level' ).removeClass( 'animated fadeInDown' ).hide();
			var el = $(this);
			$element.addClass( 'hover' );
			$( '.navigation > a.active' ).fadeOut( 'fast', function() {
				var $previous_element = $(this);
				$previous_element.removeClass( 'active' );
				container_pos = $( '.navigation' ).offset();
				button_pos = $element.offset();
				$element.animate({ top: container_pos.top - button_pos.top }, 500, function() {
					$element.addClass( 'active' ).removeClass( 'hover' ).css( 'top', 0);
					if ( ( $element.attr( 'href' ).length > 1 ) && ( $element.attr( 'href' ) !== '#' ) ) {
//alert('SHOW');
						$( '.navigation > a:not(.active)' ).removeClass( 'fadeInLeft animated' ).hide();
						$( $element.attr( 'href' ) ).addClass( 'fadeInDown animated' ).show();
					} else {
//alert('FADEIN');
						$previous_element.addClass( 'fadeInLeft animated' ).fadeIn( 'fast' );
					}
				});
			});
		}

		$( '.navigation .back' ).hover(function(){
			var el = $(this);
			$( '.navigation .second_level' ).removeClass( 'animated fadeInDown' ).hide();
			$( '.navigation > a:not(.active)' ).addClass( 'fadeInLeft animated' ).show();
			$( '.navigation' ).hover(function(){}, function(){
				$(this).unbind( 'mouseleave' );
				$( '.navigation > a:visible:not(.active)' ).hide().removeClass( 'fadeInLeft animated' );
				el.closest( '.second_level' ).addClass( 'animated fadeInDown' ).show();
			});
		});
	});