Animated Search Box CSS on Click with Menu Bar

Author
In CSS Tutorial, Search Boxes Last updated Jan 20, 2017
Animated Search Box CSS

It’s time to show you more creativity by building up animated search box CSS on Click with the menu bar. I decided to write more in the search box to help you while creating an impressive website design. Our previous tutorial was to design Stylish Search Box CSS by using CSS3. Today, I become with some nice animation and will create CSS search box which will animate on Click the search button.

These search boxes are work well on all type of devices and compatible with all major browsers. We keep the code semantic and with proper commenting. The animated search box is so easy to implement, all you need to copy the HTML, CSS, and Javascript code.

Animated Search Box CSS

This tutorial will enhance your web design experience and give you a unique idea of building web page menu with the search bar. It always a great thing when we have unique types of the header of our website. We will show you three different kinds of examples for search box animation with the navigation menu.

We have made beautiful and clean menu bar on the left side of the header and then place the search button on the right side. The menu links also provide animation on hover whereas the search button will open a search field on click. We will see each example step by step.

Animated Search Box CSS Overview

We have to define each header separately with unique ID. Each header includes the nav HTML element that has a search button and navigation links. The search button work as toggle button which gets done using a simple anchor link. The menus for each header are typically ul, li, and the search form, a simple HMTL form with input type search field. So let’s have a look all the examples.

First of all, we need to add some general style that should need for any example. If you want to insert the second example, then you still need the following CSS to make it look like the demo.

General Style

/* General Style */
.header {
padding: 6em 0 8em;
}
.header-nav {
margin: 0 auto;
max-width: 720px;
padding-right: 3em;
position: relative;
}
.header-nav:before, 
.header-nav:after {
content: '';
display: table;
}
.header-nav:after {
clear: both;
}

Navigation Style

Let’s do some styling with the navigation menu, and we need to some basic stuff here. All we need to make the menu link inline, add some color, font size, and padding, etc. We also added some hover animation border by using :before CSS3 property.

/* Navigation Men bar */
.menu {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
}
.menu li a {
font-size:14px;
color: #5b3256;
display: block;
padding: 5px 20px;
position: relative;
-webkit-transition: color 0.3s;
transition: color 0.3s;
text-decoration: none;
}
.menu li a:before {
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
left: 15%;
right: 15%;
top: 0;
bottom: 0;
border-left: 2px solid #763568;
border-right: 2px solid #763568;
}
.menu li a:hover,
.menu li .current a {
color: #763568;
}
.menu li a:hover:before,
.menu li .current a:before {
opacity: 1;
left: 0;
right: 0;
}

Search Button

We will build the search button using pure CSS3, and we will use :before and :after property to get this done. We also used transition and transform for rotating the button style after been clicked. Here is complete CSS code.

/* Search Box Button*/
.search-button {
position: absolute;
right: 20px;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.search-toggle {
position: relative;
display: block;
height: 10px;
width: 10px;
}
.search-toggle::before, 
.search-toggle::after {
content: '';
position: absolute;
display: block;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
.search-toggle::before {
border: 2px solid #5b3256;
border-radius: 50%;
width: 100%;
height: 100%;
left: -2px;
top: -2px;
}
.search-toggle::after {
height: 2px;
width: 7px;
background: #5b3256;
top: 10px;
left: 8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.search-toggle.active::before {
width: 0;
border-width: 1px;
border-radius: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: -1px;
left: 4px;
}
.search-toggle.active::after {
width: 12px;
left: -1px;
top: 4px;
}
.search-input:focus {
outline: none;
}

Example #1

The unique ID we talk above is header-1 for first example. We define header HTML5 element and place nav as a child element. We simply need to place a toggle button, anchor links and a search form as shown below.

<header id="header-1" class="header">  
<nav class="header-nav">
<div class="search-button">
<a href="#" class="search-toggle" data-selector="#header-1"></a>
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Awesome</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Map</a></li>
<li><a href="#">Contact</a></li>
</ul>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>

Let’s have a look the CSS code for the first example of animated search box. This example opens a search box bottom of the menu when to click on search button. To get this done, we make the position absolute for search form and it’s max-height will be zero at the normal position. The height will change when you clicked the button, and we will use .show class with jquery.

#header-1 {
background: #ECF0F1 none repeat scroll 0 0;
}
#header-1 .search-box {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
max-height: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
background-color: #f4d03f;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#header-1 .search-box .search-input {
width: 100%;
height: 100%;
padding: 0 1em;
border: 0;
background-color: transparent;
opacity: 0;
color: #fff;
}
#header-1 .search-box .search-input::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.4);
}
#header-1.show .search-box {
max-height: 40px;
padding:5px 0;
}
#header-1.show .search-box .search-input {
opacity: 1;
}

Example #2

The HTML code of example 2 is similar to the first example, but we have unique ID to handle it’s functionality differently.

<header id="header-2" class="header">
<h3>Example #2</h3>
<nav class="header-nav">
<div class="search-button">
<a href="#" class="search-toggle" data-selector="#header-2"></a>
</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Awesome</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Map</a></li>
<li><a href="#">Contact</a></li>
</ul>
<form action="" class="search-box">
<input type="text" class="text search-input" placeholder="Type here to search..." />
</form>
</nav>
</header>

To create animation for the second example of a search box, we will focus on the nth child which will help us to hide the menu links.

#header-2 {
background: #BDC3C7 none repeat scroll 0 0;
overflow: hidden;
}
#header-2 .menu li {
opacity: 1;
-webkit-transition: opacity 0.2s 0.1s, -webkit-transform 0.3s;
transition: opacity 0.2s 0.1s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.2s 0.1s;
transition: transform 0.3s, opacity 0.2s 0.1s, -webkit-transform 0.3s;
}
#header-2 .menu li:nth-child(1) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
#header-2 .menu li:nth-child(2) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#header-2 .menu li:nth-child(3) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
#header-2 .menu li:nth-child(4) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
#header-2 .menu li:nth-child(5) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#header-2 .search-box {
position: absolute;
left: 0;
height: 100%;
padding-left: 2em;
-webkit-transform: translateX(20%);
transform: translateX(20%);
opacity: 0;
-webkit-transition: all 0.4s 0.3s;
transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
border: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#header-2 .search-box .search-toggle {
width: 14px;
height: 14px;
padding: 0;
position: absolute;
left: 5px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#header-2.show .menu li {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
#header-2.show .search-box {
width: calc(100% - 5em);
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}

The Javascript

We needed to start our function using .ready and used the click javascript function to handle the search button. The toggleClass function allows us to show the hidden element.

$( document ).ready(function() {
$('.header').on('click', '.search-toggle', function(e) {
var selector = $(this).data('selector');
$(selector).toggleClass('show').find('.search-input').focus();
$(this).toggleClass('active');
e.preventDefault();
});
});

The third example you will find in the demo and download source. Hope you like and enjoy this tutorial. You can easily customize the code as per your website design needed. We have placed all the code within the comments so you can easily recognize it and make customization easily. All you need to change the CSS code to make it as you need.

Author

Ashfaq Ahmed is a freelance creative front-end and WordPress developer. He develops modern, highly interactive websites with cutting edge technologies. In his spare time, he loves to do blogging and web experiments.

Website: http://reverie-tech.com/

Social Links:
  • Irish

    Can you use the css only for styling? Because javascript is not familiar for me. I’m still struggling with this. Please respond. As soon as possible

    • Helo Irish, You need to include main jquery file or you can try Expanding Search Bar here. Thanks.

      • Irish

        Hi, I want the codes of demo 2 where can find those stuff.

        • You simply need to download the source code and find the index2.html and component2.css files. Thanks.

  • Irish

    I like your examples but the javascript. it sucks please help

  • Irish

    how can i download it?

    • Irish you can’t find the download button ? See the download button just right below the article image. Thanks.