Simple Dropdown HTML & CSS | Custom Navbar

January 8, 2021 6:58 am

We have created a simple Dropdown using HTML & CSS with transition effect. We have made it on a simple Navbar which we have created on our previous Video on Navbar

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Simple Navigation</title>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>


<nav>
	<div class="container clearfix"><!--clearfix is added to just parent of a floating child-->
		<a href="" class="logo"><img src="images/logo.png" alt="company_name"/></a>

		<ul class="nav_links clearfix">
			<li><a href="">Home</a></li>
			<li class="has_dropdown"><a href="">About</a>

				<!--1st level dropdown-->
				<ul class="dropdown">
					<li><a href="">Our Team</a></li>
					<li><a href="">Vision & Mission</a></li>
				</ul>

			</li>
			<li class="has_dropdown">
				<a href="">Services</a>

				<!--1st level dropdown-->
				<ul class="dropdown">
					<li><a href="">Our Team</a></li>
					<li><a href="">Vision & Mission</a></li>
				</ul>


			</li>
			<li><a href="">Media</a></li>
			<li><a href="">Contact</a></li>

		</ul>



	</div>
	


</nav>
</body>
</html>

CSS

/*these are some common css*/

*{
	box-sizing:border-box;
}
body{
	margin: 0px;
	/*adding system font. you can use google font also or your own font*/
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.container{
	max-width: 1170px;
	padding: 0px 15px;
	margin:0 auto;
}
/*there is a clearfix issue so we have class clearfix*/
.clearfix::after{
	content: "";
	display: block;
	clear: both;
}

/*these are some common css ends here*/
nav{
	background: #f1f1f1;
}
.logo{
	display: block;
	float: left;
}
.logo img{
	max-width: 250px;
	margin-top: 10px;
}
.nav_links{
	float: right;
}
.nav_links li{
	list-style: none;
	float: left;
}
.nav_links li a{
	text-decoration: none;
	color: #000;
	display: block;
	padding: 10px 30px;
	transition:background ease 0.5s;

	/*browser prefixes*/
	-webkit-transition:background ease 0.5s;
	-ms-transition:background ease 0.5s;
	-moz-transition:background ease 0.5s;
}
.nav_links li a:hover{
	background: #ccc;
}



/*Dropdown css starts*/
nav li.has_dropdown{
	position: relative;
}
nav .dropdown{
	position: absolute;
	top:120%;
	padding: 0px;
	background: #f1f1f1;
	box-shadow: 0px 0px 2px #333;
	/*display: none;*/
	opacity: 0;
	visibility: hidden;
	transition:opacity ease 0.5s,top ease 0.5s;
}
nav .dropdown li{
	float: none;
}
nav .dropdown li a{
	white-space: nowrap;
	border-bottom: 1px solid #ccc;
	font-size: 14px;
}
nav .dropdown li:last-child a{
	border-bottom: none;
}
nav li.has_dropdown:hover > .dropdown{
	/*display: block;*/
	visibility: visible;
	opacity: 1;

	top:100%;

}

nav li.has_dropdown::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    display: block;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
    transition:all ease 0.2s;
}
nav li.has_dropdown:hover::after{
	 transform: translateY(-50%) rotate(-45deg);
	 top:55%;
}

If you want to know in detail, Please subscribe to our channel http://bit.ly/35lsaxQ