CSS Animated Search Box with HTML

I this tutorial, you will learn how to create a CSS animated search box with jQuery & HTML. It also has an expanding effect which works when the user clicks on the search icon or a button.

In our previous article, we did design a nice & beautiful expanding search bar with jQuery and CSS3. But here I am going to show you another version which works with the main navigation.

Our goal to create a list of menu items and keep them on the left side of the header and then place a  search button on the right side.

When someone mouse over the menu links, it offers a clean border animation whereas the search button will open a search field on click.

We have created three different examples and you can pick anyone which you like. Also, you can easily customize any of these examples in terms of color, background, and font, etc to match with your site design.

The process of making a search form that works with the navigation bar is easy. All we will define anheader element with a unique ID.

Each includesheader the nav HTML element which holds the menus items by using the ul and  li.

The search magnifies glass icons work as toggle buttons which gets done using a simple anchor link. It opens a search form when someone clicks.

CSS Animated Search Box Example #1

The unique ID we talk above is header-1 for the first example. We define the header HTML5 element and place the 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>

Animated Search Style

Let’s have a look at the CSS code for the first example of an animated search box. This example opens a search box bottom of the menu when to click on the search button.

To get this done, we make the position absolute for the 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 the .showclass 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;
}

Animated Search Form Example #2

The HTML code of example 2 is similar to the first example, but we have a 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>

The CSS Style

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 General Style

To make work any of the above examples. It is important that you should add some 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;
}

1. Navigation Style

Let’s do some styling with the navigation menu, and we need 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 borders 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;
}

2. Add a 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 the 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;
}

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 in 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.

You Might Be Interested In: