Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design a Navigation Bar with Animated Search Box
The Navigation bar HTML is a horizontal bar on top of the webpage where it contains links, dropdowns, and search boxes that links to appropriate sections/pages in the webpage. This may help the users to traverse through the website effortlessly. The navigation bar can be implemented in many ways, but the traditional way of implementing is horizontal and vertical bars.
In this article, we are going to design a navigation bar with an Animated search bar using simple HTML and CSS.
Creating a Navigation Bar with Animated Search Box
The following is the approach −
Create an <div> element with a class "nav-bar" to design a navigation bar.
Inside the "nav-bar" div, create another <div> element with the class "menu" to add the menu items.
Inside the "menu" div, create an unordered list <ul> and inside this, add <li> for each menu item on the navigation bar.
Create another <div> after "menu" with a class name "search-box" to add a search box.
Add an <input> element inside the "search-box" div to represent the search input field.
Then, add a <button> element to represent the search button.
Use the CSS transitions to create the animation effect when focusing on the search input field.
Example
In the following example, we are designing a navigation bar with an Animated Search bar using HTML and CSS −
<!DOCTYPE html>
<html>
<head>
<title>Navigation bar with animated search box</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-12N37f5QGtxзVEgiss14W3ExzMWZxybE1SJSESQP9S+oqd12jhcu+A56EbclzFSJ" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.nav-bar {
background-color: lightblue;
height: 60px;
}
.menu {
float: left;
}
.menu ul {
display: flex;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 22px;
line-height: 60px;
text-decoration: none;
color: white;
transition: 0.5s;
}
.menu ul li a:hover {
background: seagreen;
}
.search-box {
float: right;
display: flex;
margin: 10px 25px;
transition: width 0.5s;
}
.tbox {
padding: 10px;
width: 0;
transition: width 0.5s;
}
.tbox:focus {
width: 250px;
}
.btn {
width: 50px;
background-color: seagreen;
}
</style>
</head>
<body>
<div class="nav-bar">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Coding ground</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Whiteboard</a></li>
<li><a href="#">Tools</a></li>
</ul>
</div>
<div class="search-box">
<input type="text" class="tbox" placeholder="Type to search..." />
<button class="btn"><i class="fas fa-search"></i></button>
</div>
</div>
</body>
</html>
After executing the above program, click on the search input text field to see the animation effect −
854 Views
