Hi dear audience, Hope you are doing good. Today in this blog you’ll learn how can create Responsive Navigation Menu Bar With Search Box with the help of Html and CSS only. Guys this complete responsive navbar is created just using CSS's Flexbox property. And also add some animations and hover effects like you will see animation in nav menu items when you as slide from left to center position when page set reponsive or mobile size viewport & will see some mouse hover animation when place the cursor on navbar's menu items and on search icon when its viewport set to desktop/laptops screen size.

We have also linked a video tutorial which has given below for you. Where we have shown you to create this rating page using javascript in very simple and easey steps and we hope to all of you that given tutorial may be cleared your whole doubts.

And for your more clearance, we attached a download source code file link in the last of this post also just scroll down and download it now to more practice. Don't worry guys, Given Source-Code is almost free of cost.

Watch Tutorial of Create Responsive Navigation Menu Bar With Search Box Using Html And CSS

Don't worry, We always go to learn web development codes to you by taking simple and easy steps. And we are 100% sure about our codes which is always too simple & clear to understand and helps you learn something new through every blog's post.

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://kit.fontawesome.com/67c66657c7.js"></script>
	<title>Responsive Navigation Menu Bar With Search Box Using Html And CSS</title>
</head>
<body>
	<input type="checkbox" id="check">
	<nav>
		<div class="icon">Design <b style="color: red;">P</b>ro</div>
		<div class="search_box">
			<input type="search" placeholder="Search here">
			<span class="fa fa-search"></span>
		</div>
		<ol>
			<li><a href="#">home</a></li>
			<li><a href="#">contact</a></li>
			<li><a href="#">services</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">login here</a></li>
		</ol>
		<label for="check" class="bar">
			<span class="fa fa-bars" id="bars"></span>
			<span class="fa fa-times" id="times"></span>
		</label>
	</nav>
	<section></section>
</body>
</html>

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins',sans-serif;
}
nav{
   display: flex;
   width: 100%;
   background: #0a5071;
   position: relative;
   justify-content: space-between;
   text-align: center;
   padding: 15px 30px;
}
nav .icon{
   font-size: 35px;
   font-weight: 800;
   color: #fff;
   cursor: pointer;
}
nav ol{
   display: flex;
   list-style: none;
   margin: auto 0;
}
nav ol li{
   margin: 0 2px;
}
nav ol li a{
   color: #fff;
   font-size: 20px;
   text-decoration: none;
   text-transform: capitalize;
   letter-spacing: 1px;
   padding: 5px 10px;
}
nav ol li:hover a{
   background: #fff;
   color: #0a5071;
}
nav .search_box{
   display: flex;
   margin: auto 0;
   height: 35px;
   line-height: 35px;
}
nav .search_box input{
   border: none;
   outline: none;
   background: #fff;
   height: 100%;
   padding: 0 10px;
   font-size: 20px;
   width: 350px;
}
nav .search_box span{
   color: #0a5071;
   font-size: 20px;
   background: #fff;
   height: 100%;
   padding: 8px;
   position: relative;
   cursor: pointer;
   z-index: 1;
}
nav .search_box span:hover{
   color: #fff;
}
nav .search_box span::after{
   height: 100%;
   width: 0%;
   content: '';
   background: #ff003c;
   position: absolute;
   top: 0;
   right: 0;
   z-index: -1;
   transition: 0.3s;
}
nav .search_box span:hover::after{
   width: 100%;
}
nav .bar{
   position: relative;
   margin: auto;
   display: none;
}
nav .bar span{
   position: absolute;
   color: #fff;
   font-size: 35px;
}
input[type="checkbox"]{
   -webkit-appearance: none;
   display: none;
}
@media screen and (max-width: 1200px){
   nav{
      display: block;
      padding: 0;
   }
   nav .icon{
      display: inline-block;
      padding: 15px 30px;
   }
   nav .search_box{
      width: 100%;
      display: inline-flex;
      justify-content: center;
      margin-bottom: 15px;
   }
   nav .search_box input{
      width: 90%;
   }
   nav ol{
      display: flex;
      flex-direction: column;
      background: #fff;
      height: 0;
      visibility: hidden;
      transition: 0.3s;
   }
   nav ol li{
      text-align: center;
      transition: 0.3s 0.1s all;
      opacity: 0;
   }
   nav ol li a{
      color: #000;
      font-size: 28px;
      padding: 25px;
      display: block;
   }
   nav ol li:nth-child(1){
      transform: translateX(-150px);
   }
   nav ol li:nth-child(2){
      transform: translateX(-200px);
   }
   nav ol li:nth-child(3){
      transform: translateX(-250px);
   }
   nav ol li:nth-child(4){
      transform: translateX(-300px);
   }
   nav ol li:nth-child(5){
      transform: translateX(-350px);
   }
   nav .bar{
      display: block;
      position: absolute;
      top: 20px;
      right: 80px;
      cursor: pointer;
   }
   nav .bar #times{
      display: none;
   }
   #check:checked ~ nav .bar #times{
      display: block;
   }
   #check:checked ~ nav .bar #bars{
      display: none;
   }
   #check:checked ~ nav ol{
      visibility: visible;
      height: 465px;
   }
   #check:checked ~ nav ol li:nth-child(1),
   #check:checked ~ nav ol li:nth-child(2),
   #check:checked ~ nav ol li:nth-child(3),
   #check:checked ~ nav ol li:nth-child(4),
   #check:checked ~ nav ol li:nth-child(5){
      transform: translateX(0);
      opacity: 1;
   }
} 
section{
   background: url(img.jpg);
   height: 100%;
   width: 100%;
   position: absolute;
   background-position: center;
   background-size: cover;
   top: 0;
   z-index: -1;
   filter: brightness(30%);
}

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding

Watch Tutorial of Create Responsive Navigation Menu Bar With Search Box Using Html And CSS

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding