How to Create a Dropdown Menu using jQuery

Contents

Introduction & Demo
Sample Code

Introduction & Demo

In this video, I’ll show you how to create a dropdown menu using jQuery!

First, please check the demo page.

You will learn:
1. HTML
2. CSS (including how to use Google Fonts)
3. jQuery (slideUp and slideDown animation.)

All you need is a text editor!
Enjoy coding 🙂

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Dropdown Menu</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: 'Open Sans', sans-serif;
		}
		nav {
			margin: 100px 300px;
		}
		nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		nav li {
			float: left;
			width: 160px;
			height: 40px;
			background-color: midnightblue;
			line-height: 40px;
			text-align: center;
			position: relative;
			
		}
		nav li a {
			display: block;
			width: 100%;
			height: 100%;
			text-decoration: none;
			color: white;
			border: 1px solid lightgrey;
		}
		nav li a:hover {
			background-color: lightseagreen;
		}
		nav ul.sub {
			position: absolute;
			display: none;
		}
		nav ul.sub li ul.sub {
			top:0;
			left: 160px;
		}
	</style>
</head>
<body>
<nav>
	<h1>Dropdown Menu</h1>
	<ul class="main">
		<li>
			<a href="#">A</a>
			<ul class="sub">
				<li><a href="#">A-1</a></li>
				<li>
					<a href="#">A-2</a>
					<ul class="sub">
						<li><a href="#">A-2-1</a></li>
						<li><a href="#">A-2-2</a></li>
						<li>
							<a href="#">A-2-3</a>
							<ul class="sub">
								<li><a href="#">A-2-3-1</a></li>
								<li><a href="#">A-2-3-2</a></li>
								<li><a href="#">A-2-3-3</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">A-3</a></li>
			</ul>
		</li>
		<li>
			<a href="#">B</a>
			<ul class="sub">
				<li><a href="#">B-1</a></li>
				<li><a href="#">B-2</a></li>
				<li><a href="#">B-3</a></li>
			</ul>
		</li>
		<li>
			<a href="#">C</a>
			<ul class="sub">
				<li><a href="#">C-1</a></li>
				<li>
					<a href="#">C-2</a>
					<ul class="sub">
						<li><a href="#">C-2-1</a></li>
						<li><a href="#">C-2-2</a></li>
					</ul>
				</li>
				<li><a href="#">C-3</a></li>
			</ul>
		</li>
		<li>
			<a href="#">D</a>
			<ul class="sub">
				<li><a href="#">D-1</a></li>
				<li><a href="#">D-2</a></li>
				<li><a href="#">D-3</a></li>
			</ul>
		</li>
		<li>
			<a href="#">E</a>
			<ul class="sub">
				<li><a href="#">E-1</a></li>
				<li><a href="#">E-2</a></li>
				<li><a href="#">E-3</a></li>
			</ul>
		</li>
	</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
	$(function(){
		$(".main li").hover(
			function(){
				//$('ul.sub', this).slideDown(500);
				//$('>ul.sub', this).slideDown(500);
				$('>ul.sub:not(:animated)', this).slideDown(500);
			},
			function(){
				//$('ul.sub',this).slideUp(300);
				$('>ul.sub',this).slideUp(300);
			}
		);
	});
</script>
</body>
</html>