Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Design a Navigation Bar with Animated Search Box
The Navigation bar in HTML is a horizontal bar typically positioned at the top of a webpage containing links, dropdowns, and search boxes that connect to appropriate sections or pages. This helps users navigate through the website effortlessly. Navigation bars can be implemented in various ways, with horizontal and vertical layouts being the most traditional approaches.
In this article, we will design a navigation bar with an animated search box using HTML and CSS. The search box expands smoothly when clicked, creating an engaging user experience.
Approach
Following is the step-by-step approach to create a navigation bar with an animated search box
Create a
<div>element with class"nav-bar"to design the navigation container.Inside the
"nav-bar"div, create another<div>element with class"menu"to hold menu items.Inside the
"menu"div, create an unordered list<ul>and add<li>elements for each navigation item.Create another
<div>with class"search-box"to contain the search functionality.Add an
<input>element inside the search-box div for the search field.Add a
<button>element with a search icon to trigger the search action.Use CSS transitions to create smooth animation effects when the search input field gains focus.
HTML Structure
The basic HTML structure for the navigation bar includes a container div, menu items, and a search box
<div class="nav-bar">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</div>
<div class="search-box">
<input type="text" class="search-input" placeholder="Search...">
<button class="search-btn"><i class="fas fa-search"></i></button>
</div>
</div>
CSS Animation Technique
The animation effect is achieved using CSS transitions on the input field's width property. Initially, the search input has a width of 0, making it invisible. When focused, the width expands to reveal the search field
.search-input {
width: 0;
transition: width 0.5s ease;
}
.search-input:focus {
width: 250px;
}
Complete Example
Following example demonstrates a complete navigation bar with an animated search box
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar with Animated Search Box</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.nav-bar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.menu ul {
display: flex;
list-style: none;
}
.menu ul li {
margin: 0 10px;
}
.menu ul li a {
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
font-weight: 500;
}
.menu ul li a:hover {
background-color: rgba(255,255,255,0.2);
}
.search-box {
display: flex;
align-items: center;
background: rgba(255,255,255,0.1);
border-radius: 25px;
overflow: hidden;
}
.search-input {
width: 0;
padding: 12px;
border: none;
outline: none;
background: transparent;
color: white;
font-size: 16px;
transition: width 0.5s ease, padding 0.5s ease;
}
.search-input:focus {
width: 300px;
padding-left: 20px;
}
.search-input::placeholder {
color: rgba(255,255,255,0.7);
}
.search-btn {
width: 50px;
height: 50px;
border: none;
background: rgba(255,255,255,0.2);
color: white;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.search-btn:hover {
background: rgba(255,255,255,0.3);
}
.search-btn i {
font-size: 18px;
}
</style>
</head>
<body>
<div class="nav-bar">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Coding Ground</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Tools</a></li>
</ul>
</div>
<div class="search-box">
<input type="text" class="search-input" placeholder="Type to search...">
<button class="search-btn"><i class="fas fa-search"></i></button>
</div>
</div>
</body>
</html>
When you click on the search input field, it smoothly expands from 0 width to 300px, creating an elegant animation effect. The navigation bar uses a gradient background and modern styling for an attractive appearance.
Navigation bar with Home, Tutorials, Coding Ground, Jobs, Tools links on the left Animated search box on the right that expands when clicked
Key Features
The animated navigation bar includes the following features
Smooth Transitions CSS transitions provide smooth width expansion of the search input field.
Modern Styling Gradient backgrounds and rounded corners create a contemporary look.
Responsive Design Flexbox layout ensures proper alignment and spacing.
Interactive Elements Hover effects on navigation links and search button enhance user experience.
Font Awesome Icons Professional search icon from Font Awesome library.
Customization Options
You can customize the animation by modifying these CSS properties
Animation Duration Change
transition: width 0.5s easeto adjust speed.Search Box Width Modify the focused width from
300pxto your preferred size.Colors Update the gradient colors or background colors to match your design.
Border Radius Adjust
border-radiusvalues for different corner styles.
Conclusion
An animated search box enhances the visual appeal of a navigation bar by providing smooth, engaging interactions. Using CSS transitions on the width property creates an elegant expansion effect that improves user experience. This technique can be easily customized and integrated into any website design.
1K+ Views
