/ Dropdown Menu

CSS Staggered Animation Dropdown Menu

CSS Staggered Animation Dropdown Menu

CSS Staggered Animation Dropdown Menu

This is a simple example of applying an animation delay to each child of a basic horizontal dropdown navigation menu.

Rather than applying the delay in CSS/SASS files based on nth-child(), we inject the delay via JQuery on document ready. This pattern can be used in a render function for Meteor or within Angular/React.

This could be done at mouseenter(), but there could be a javascript delay in relation to instant CSS hover. By having it in the page render, it ensures it up to date whenever the user hovers.

The function simply counts the number of children in the dropdown menu and applies a delay based on it's index value within the loop. If you have dropdown headers, dividers or links, you'll need to update it to traverse the DOM.

Easiest way is by console.log(index) within the each funciton to ensure it's counting the children properly.

Made with

Html
Css/SASS
Javascript

Html

<nav class="navbar">
	<ul class="nav">
		<li>
			Home
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
				<li>Menu 5</li>
				<li>Menu 6</li>
			</ul>
		</li>
		<li>
			About
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
				<li>Menu 5</li>
				<li>Menu 6</li>
				<li>Menu 7</li>
				<li>Menu 8</li>
				<li>Menu 9</li>
			</ul>			
		</li>
		<li>
			Pricing
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
			</ul>			
		</li>
		<li>
			Docs
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
			</ul>			
		</li>
		<li>
			Contact
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
				<li>Menu 5</li>
			</ul>					
		</li>
	</ul>
</nav>	

Css

// Variables ==========================
$primary: #907dda
$accent: #e5e4ea
$font-light: #e7e6f1
$font-dark: #333

// Base ===============================
html
	height: 100%

body
	display: flex
	flex:
		direction: column
	height: 100%
	background: #F3F4F8

ul.nav
	display: flex
	position: relative
	flex:
		direction: row
	align-items: center
	max-width: 70%
	margin: 0 auto
	padding: 0
	list-style: none
	background: $primary
	border-top-left-radius: 6px
	border-top-right-radius: 6px

	> li
		position: relative
		flex:
			grow: 1
			shrink: 0
		height: 60px
		font:
			size: 14px
		text:
			align: center
			transform: uppercase
		line-height: 60px
		letter-spacing: 1px
		color: $font-light
		cursor: pointer
	
		// CSS States ===============================
		&:hover
			background: rgba(0,0,0,0.1)
	
			ul.dropdown
				visibility: visible
				transform: translate(0,0)
				opacity: 1
				z-index: 0
		
				> li
					animation: 
						name: slideInLeft
						duration: 0.3s
						timing-function: ease-in-out
						fill-mode: backwards
			
		// nth-child ==============================
		&:first-child
			border-top-left-radius: 6px
	
		&:last-child
			border-top-right-radius: 6px				
	
ul.dropdown
	visibility: hidden
	display: flex
	position: absolute
	top: 100%
	left: 0
	right: 0
	flex-direction: column
	margin: 0
	padding: 5px 0 30px
	list-style: none
	color: $font-dark
	background: $accent
	border-bottom-left-radius: 6px
	border-bottom-right-radius: 6px
	box-shadow: 1px 2px 5px -1px rgba(0,0,0,0.15),0px 4px 14px -1px rgba(0,0,0,0.10)
	transform: translate(0,-60px)
	transition: transform 0.2s ease-out, opacity 0.2s, z-index 0s 0.2s
	opacity: 0
	z-index: -1

	> li
		font:
			size: 14px
		cursor: pointer
	
		// CSS State ===========================
		&:hover
			background: rgba(0,0,0,0.06)
	
@keyframes slideInLeft
	from
		transform: translate(-25%,0)
		opacity: 0
	
	to
		transform: translate(0,0)
		opacity: 1

Javascript

$( document ).ready(function() {
	
	// Loop through each nav item
	$('nav.navbar').children('ul.nav').children('li').each(function(indexCount){
		
		// loop through each dropdown, count children and apply a animation delay based on their index value
		$(this).children('ul.dropdown').children('li').each(function(index){
			
			// Turn the index value into a reasonable animation delay
			var delay = 0.1 + index*0.03;
			
			// Apply the animation delay
			$(this).css("animation-delay", delay + "s")			
		});
	});
});

Author

Boomer

Demo

See the Pen CSS Staggered Animation Dropdown Menu by Boomer (@CodeBoomer) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More