CSS Animated Dropdown Menu

A navigation menu or navbar is a series of links that help website visitors navigate through different pages and view a website in detail. The navigation menu at the top of the website homepage is an essential element of any website because it makes it easy for visitors to find what they are looking for on the website. dropdown menus are used in a website's main menu. By using it one can visit any website sub-pages or sections without cluttering the main navigation menu. A drop-down menu is a list item element in the main navigation of a website that is opened by hovering or clicking on the nav item. Drop-down menus are usually vertical and are designed based on the design of a website. In today's project, we have designed a simple animated drop-down menu using HTML CSS. You can check the step-by-step process from the video tutorial below. If you like our content you can subscribe to our YouTube channel and press the bell notification icon for future uploads.

Video Tutorial:

Hope you have watched the above video tutorial. Any website drop-down menus present a website to a visitor in an organized way. A website can have multiple sub-pages or sections. These sub-pages or sections can be easily accessed by visitors through the drop-down menu. It wastes very little of their time and can get a full understanding of a website in a short period of time.

You May Also Like:

CSS Animated Dropdown Menu [ Source Code ]:

To create this web page you first have to create HTML and CSS files. After that, we have to link the files properly. Now copy the code given in the code box below and paste it into your files. You can save the code and then open it in your browser. If the code doesn't work, you can download it from the download button given below. You should try to make the code more dynamic once you have it in hand. Because by doing this you can take your knowledge further.

ADD HTML:

<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Animated Dropdown menu</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head> 
<body>
	<header>
		<div id="main-menu">
			<nav id="menu-area">
				<ul>
					<li><a href="">Home</a></li>
					<li><a href="">About</a></li>
					<li><a href="">Services</a>
						<ul class="submenu-1">
							<li><a href="#">Graphics</a></li>
							<li><a href="#">SEO</a></li>
							<li><a href="#">Web Design</a>
								<ul class="submenu-2">
									<li><a href="#">WordPress</a></li>
									<li><a href="#">Laravel</a></li>
									<li><a href="#">html / css</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="">Portfolio</a></li>
					<li><a href="">Contact</a></li>
				</ul>
			</nav>
		</div>
	</header>      
</body>
</html>

ADD CSS:

* {
	margin: 0; 
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}
header {
	width: 100%;
	background: url(1.jpg);
	background-position: center center;
	height: 100vh;
}
header #main-menu {
	background: #222;
	float: left;
	height: 60px;
	line-height: 30px;
	width: 100%;
}
header nav#menu-area {
	margin: 0 auto;
	padding: 0 15px;
	position: relative;
	width: 900px;
}
header nav#menu-area ul li {
	float: left;
	position: relative;
	font-size: 15px;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 180px;
	text-align: center;
	text-transform: uppercase;
}
header nav#menu-area ul li a {
	color: #fff;
	text-decoration: none;
	display: block;
	line-height: 60px;
}
header nav#menu-area ul li:hover>a {
	background: #555555;
}
header nav#menu-area ul li ul.submenu-1 {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0px;
	top: 60px;
	background: #222;
	width: 180px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
header nav#menu-area ul li ul.submenu-1 li {
	border: none;
	border-bottom: 1px solid #ccc;
	clear: both;
	margin-top: -15px;
	padding: 0;
	width: 180px;
	transition: opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}
header nav#menu-area ul li:hover ul.submenu-1 {
	opacity: 1;
	visibility: visible;
}
header nav#menu-area ul li:hover ul.submenu-1 li {
	margin-top: 0;
	opacity: 1;
}
header nav#menu-area ul li ul.submenu-1 li ul.submenu-2 {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 61px;
	top: 0px;
	background: #222;
	width: 180px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s 0.01s ease-in-out, left 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear;
}
ul.submenu-1 li ul.submenu-2 li {
	border: none;
	border-bottom: 1px solid #ccc;
	clear: both;
	margin: 0;
	padding: 0;
	width: 180px;
	opacity: 1;
}
header nav#menu-area ul li ul.submenu-1 li:hover ul.submenu-2 {
	opacity: 1;
	left: 180px;
	visibility: visible;
}

I hope the source code is working for you. Our website has more than 150 projects including CSS animations, responsive website design, JavaScript projects, etc. If you want to get them then scroll down by clicking on the Load More button at the bottom of our homepage. If the contents of our website are useful to you, then share them on social media as a token of love. Your contribution will inspire us and motivate us to do better things in the future. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

CSS Animated Dropdown Menu [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Animated Dropdown Menu

Video Tutorial:

CSS Animated Dropdown Menu [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form