Dropdown Menu Animation

by velo_ninja

HTML

<header>
  <h1 class="type-title">Staged Dropdown Menu Animation</h1><small>by <a href="http://ariona.net">Ariona, Rian</a></small>
</header>
<div class="col">
  <h2 class="type-title">Delaying with CSS3</h2>
  <ul class="menu css-transform">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item menu-item-has-children"><a href="#">Blog</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="#">Daily post</a></li>
        <li class="menu-item"><a href="#">Vacation</a></li>
        <li class="menu-item"><a href="#">Hobby</a></li>
        <li class="menu-item"><a href="#">Podcast</a></li>
        <li class="menu-item"><a href="#">Vblogging</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children"><a href="#">Archive</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="#">Weekly</a></li>
        <li class="menu-item"><a href="#">Monthly</a></li>
        <li class="menu-item"><a href="#">Yearly</a></li>
        <li class="menu-item"><a href="#">Categories</a></li>
        <li class="menu-item"><a href="#">Tags</a></li>
      </ul>
    </li>
    <li class="menu-item menu-item-has-children"><a href="#">Portfolio</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="#">Web Design</a></li>
        <li class="menu-item"><a href="#">Web Development</a></li>
        <li class="menu-item"><a href="#">Logo</a></li>
        <li class="menu-item"><a href="#">Character Design</a></li>
        <li class="menu-item"><a href="#">Print</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</div>
<div class="col">
  <h2 class="type-title">Delaying with Js</h2>
  <ul class="menu js-transform">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item menu-item-has-children"><a href="#">Blog</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="#">Daily post</a></li>
        <li class="menu-item"><a...

SCSS

body{
	font-family: Futura,Raleway,"Open Sans","Helvetica Neue",arial,sans-serif;
	color: #444;
}
a{
	text-decoration: none;
	color: inherit;
}
header{
	text-align: center;
	margin-bottom: 50px;
	
	.type-title{
		margin-bottom: 5px;
	}
	small{
		color: #3AACE9;
	}
}
.col{
	float: left;
	width: 50%;
}
.type-title{
	text-align: center;
}
.menu{
	list-style: none;
	padding-left: 0;
	display: table;
	margin: 0 auto;
	
	&:after{
		content:" ";
		display: block;
		clear: both;
	}
	
	.menu-item{
		position: relative;
		float: left;
		
		&:hover > .sub-menu{
			transform: scale(1);
			opacity: 1;
		}
		
		&:hover > a{ background-color: rgba(255,255,255,.3) }
		
		a{
			display: block;
			padding: 10px 20px;
			transition: .3s ease;
		}	
	}
}
.sub-menu{
	list-style: none;
	position: absolute;
	padding-left: 0;
	margin: 0;
	top: 100%;
	background-color: #3AACE9;
	transition: .3s ease;
	transform-origin: 0 0;
	transform: scale(0);
	opacity: 0;
	
	.menu-item{
		float: none;
		transition: .3s ease;
		transform: translateY(-20px);
		opacity: 0;
		
		a{
			white-space: nowrap;
			color: white;
			padding: 15px 20px;
		}
	}
	
	.sub-menu{
		left: 100%;
		top: 0;
	}
}

/* Static Delay with CSS */
.css-transform {
	.menu-item:hover > .sub-menu > .menu-item{
		transform: translateY(0);
		opacity: 1;
	}
	.sub-menu .menu-item{
		
		$delay: 100;
		@for $i from 1 through 10{
			&:nth-child(#{$i}){
				transition-delay: #{$delay}ms;

				$delay: $delay + 50;
			}
		}
	}	
}

JavaScript

$(".js-transform .menu-item").hover( 
	// Hover action
	function(){
		var delay = 100;
		$(this).find(".sub-menu > li").each( function(){
			$(this).css({
				"transition-delay": delay + "ms",
				'transform': 'translateY(0)',
				'opacity': 1
			});
			delay = delay + 50;
		});
	}, 
	function(){
		$(this).find(".sub-menu > li").each( function(){
			$(this).attr( "style", "" );
		});
	}
);