Expanding Search Bar using HTML CSS JQuery

byCodingFlicks -November 12, 2020

0

Expanding Search Bar using HTML CSS JQuery

Hello Friends, Today, I share a project on expanding search bar animation using HTML, CSS, and jquery. The search box is one of the standard features of any websites nowadays.search bars perform as the gateway of the contents available on your webpage. Using this, the user-friendliness of the website increases. Today we are making a search box animation where if a user clicks on the search icon, the search box will expand but closes again when we click on the same icon.

In this jquery animated search box project, I have used plain HTML, CSS, and a little bit of jquery code to make this fantastic looking expanding search bar. You can watch the demo video below how it will look like after implementing the codes.

I hope you have watched the demo and have some ideas about the project we are going to make today. Let's start with HTML first. The HTML markup for this project plain and straightforward. First, I have taken a div named 'box' and placed an input element and div designated button with a font-awesome search icon. I have used a placeholder text for the input element. For doing this project, I am using font-awesome CDN and jquery CDN. You can download the files from their website and link them as well.

You May Also Like:

First, in the CSS part, I eliminate the default margin padding of the project by a margin and padding of zero to the body element. I provided a black background for the project, but you can choose the color of your choice. Later I offered a particular height and width for the 'box' div and positioned the div in the middle of the project using CSS transform property. I also set a transition for the width of the 'box' element. Then I put a particular width for the search box when it will expand after we click on it. In this case, I put a width of 650px. You can choose your width while you will use it. Then I styled the input element and button div with some basic styling. Later I applied some jquery codes at the end to make it work. when a button is clicked, a click function will occur, and the 'active' class we set previously will start functioning, and the opposite will happen when we click on the button.

Expanding Search Bar ( Source Code ):

to make this snippet, you have to create one HTML and CSS and link the CSS file to your HTML file. After copying the code below and paste them to the respective file and save.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Expanding Search Bar using HTML CSS JQuery</title>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="box">
		<input placeholder="Enter your Query ..." type="text">
		<div class="button">
			<i class="fa fa-search"></i>
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
	</script> 
	<script>
	       $('.button').click(function(){
	          $('.box').toggleClass('active'); 
	       });
	</script>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	background: #000;
}
.box {
	width: 80px;
	height: 80px;
	background: #fff;
	border-radius: 50px;
	transition: width 0.5s;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.box.active {
	width: 650px;
}
.box input {
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 80px);
	height: 60px;
	border: none;
	outline: none;
	font-size: 35px;
	padding: 0 10px;
	color: #262626;
	font-family: poppins;
	letter-spacing: 3px;
}
.button {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 60px;
	height: 60px;
	cursor: pointer;
	transition: 0.5s;
	border-radius: 50px;
	background: deepskyblue;
}
.button i {
	padding: 15px 18px;
	color: #fff;
	font-size: 30px;
	content: '\f002';
	color: #fff;
}
.box.active .button {
	background: #262626;
}

I hope you like the small snippet. Follow our social media profiles to keep connected with this blog, and thanks for visiting the blog.

Please do not enter any spam link in the comment box.