how can i create a search bar that slide to the left on clicking the label

Question

I'd like to achieve this effect via css and possibly jQuery. That is to create a search bar that is hidden, and will nicely slide to the left on clicking the search icon in the label. But I just couldn't. I did manage to achieve something but it was rather boring. I want transition is to lookalike the one that is in W3school and many other websites. Here is my code:

   <nav> 
       <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contac</a></li>
     </ul>  

       <div id="search-enclose">
            <form>
                 <div id="label-enclose">
                      <label></labe>
                 </div>
                 <div id="input-enclose">
                      <input type="text" placeholder="Enter Keyword">
                 </div>
                 </form>
                 </div>
   </nav>

CSS:

 nav {
          position: relative;
     }
     ul {
          position: absolute;
          left: 25%;
          list-stye: none;
          z-index: 10;
       }
      li{
          float: right;
        }
        #search-enclose {
             width: 500px;
        }
        #label-enclose {
              position: absolute;
              top: 46px;
              left: 30%;
              height: 35px;
              width: 60px;
              line-height: 35px;
              z-index: 20;
         }

              #label-enclose label {
              display: block;
              height: 35px;
              width: 60px;
              cursor: pointer;
            }

            #input-enclose {
                 position: absolute;
                 top: 46px;
                 width: 300px;
                 height: 35px;
                  z-index: 5;
                 overflow: hidden;

                  }
                  #input {
                      display: block;
                      position: absolute;
                      width: 270px;
                      height: 35px;
                      margin: 0;
                      border: none;
                      color: #fff;
                      font-size: 18px;
                      backface-visibility: none;
                      border-radius: 0;
                      transition: left 0;   
                       }

                  #input-enclose input:focus {
                        outline: none;
                      }

                 #input-enclose .focus {
                       display: block;
                     }

                   #input-enclose .focus input {
                        left: 0;
                        transition: left 0.3s;
                      }

JavaScript

 var searchImage = document.getElementById('img');
        var input = document.getElementById('input');
         searchImage.addEventListener('click', function() {
                    if (classie.hasClass(input,'focus')) {
                    classie.removeClass(input,'focus')
                   }else {
                       classie.addClass(input, 'focus')
                       }
           }); 

For what its worth this is almost a copy of a code i found online, My formatting and css my be terrible, but i know what i want, with a good direction, i can achieve that. Just wanted the search bar to be shown atop the navigation list items, when clicked in a nice way, i did thought the CSS transition could achieve that, but it didnt. Can anybody please give me a direction to follow?

Answer 1

Here's an example with CSS only.

It's the focus state that triggers field opening. Clicking anywhere else will close the search field.

I did not include the search button but you could add it next to the field, hide it and on focus, reveal the button and hide the label.

body {
  font-family: sans-serif;
  font-size: 16px;
}
#search-enclose {
  border: 1px solid #ccc;
  overflow: hidden;
}

#label-enclose {
  border-left: 1px solid #ccc;
  float: right;
}

#label-enclose label {
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}

#input-enclose {
  float: right;
  font-size: 0;
}

#input-enclose input {
  border: none;
  border-left: 1px solid #ccc;
  padding: 1.1em 0;
  font-size: 16px;
  width: 0;
  margin-right: -1px;
  transition: all .3s;
}

#input-enclose input:focus {
  width: 15em;
  padding-left: 1em;
  padding-right: 1em;
  outline: none;
}

button {
  border: none;
  border-left: 1px solid #ccc;
  padding: 1.1em 0;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  width: 0;
  margin-right: -1px;
  overflow: hidden;
  transition: all .3s;
}

#input-enclose input:focus + button {
  width: 5em;
  padding: 1.1em;
  border-right: 1px solid #ccc;
  margin-right: -3.1em;
}

svg {
  width: 1em;
  height: 1em;
}

<nav> 
  <div id="search-enclose">
    <form>
      <div id="label-enclose">
        <label for="fldSearch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="fill: rgb(0, 0, 0);" xml:space="preserve">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" style="fill: rgb(0, 0, 0);"></path>
</svg></label>
      </div>
      <div id="input-enclose">
        <input type="text" placeholder="Enter Keyword" id="fldSearch">
        <button type="submit">Search</button>
      </div>
    </form>
  </div>
</nav>

Answer 2

$("#searchbar .search-label").on("click", function(e){
  e.preventDefault();
  $("#searchbar").toggleClass("collapsed");
});//click

#searchbar
{
  position: relative;
}

#searchbar #sliding-panel-outer
{
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 30px;
  width: 240px;
  transition: width 0.4s ease;
}

#searchbar #sliding-panel-inner
{
  width: 240px;
}

#searchbar .search-label
{
  width: 30px;
  height: 30px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
}

#searchbar .search-label .fa-times,
#searchbar.collapsed .search-label .fa-search
{
  display: inline-block;
}
#searchbar .search-label .fa-search,
#searchbar.collapsed .search-label .fa-times
{
  display: none;
}

#searchbar.collapsed #sliding-panel-outer
{
  width: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div id="searchbar" class="collapsed">
   <div id="search-box">
     <div id="sliding-panel-outer">       
      <div id="sliding-panel-inner">
      <input type="text" id="search-input" />
      <button id="search-submit">Search</button>
      </div><!--#sliding-panel-inner-->
     </div><!--#sliding-panel-outer-->
     
      <div class="search-label">
        <i class="fa fa-search"></i>
        <i class="fa fa-times"></i>
      </div>
   </div><!--#search-box-->
</div><!--#searchbar-->

Answer 3

On label click it animate to left: Using JQuery animation:

HTML:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<nav> 
   <ul>
       <li onclick="animateMe()" ><a href="#">Home</a></li> 
       <li onclick="animateMe()"><a href="#">About</a></li>
       <li onclick="animateMe()"><a href="#">Contac</a></li>
 </ul>  
<br>
<br>
   <div id="search-enclose" >
        <form>
             <div id="label-enclose">
                  <label></labe>
             </div>
             <div id="input-enclose">
                  <input type="text" placeholder="Enter Keyword">
             </div>
             </form>
             </div>
</nav>

JS:

 var searchImage = document.getElementById('img');
             var input = document.getElementById('input');
             searchImage.addEventListener('click', function() {
                    if (classie.hasClass(input,'focus')) {
                    classie.removeClass(input,'focus')
                   }else {
                       classie.addClass(input, 'focus')
                       }
                       }) 
   function animateMe(){
   $("#search-enclose").css({left:left}).animate({"left":"0%"}, "slow");
   }

CSS:

nav {
          position: relative;
     }
     ul {
          position: absolute;
          left: 25%;
          list-stye: none;
          z-index: 10;
       }
      li{
          float: right;
        }
        #search-enclose {
             width: 500px;
             position :absolute;
             left:20%;
        }
        #label-enclose {
              position: absolute;
              top: 46px;
              left: 30%;
              height: 35px;
              width: 60px;
              line-height: 35px;
              z-index: 20;
              display:none;
         }

              #label-enclose label {
              display: block;
              height: 35px;
              width: 60px;
              cursor: pointer;
            }

            #input-enclose {
                 position: absolute;
                 top: 46px;
                 width: 300px;
                 height: 35px;
                  z-index: 5;
                 overflow: hidden;

                  }
                  #input {
                      display: block;
                      position: absolute;
                      width: 270px;
                      height: 35px;
                      margin: 0;
                      border: none;
                      color: #fff;
                      font-size: 18px;
                      backface-visibility: none;
                      border-radius: 0;
                      transition: left 0;   
                       }

                  #input-enclose input:focus {
                        outline: none;
                      }

                 #input-enclose .focus {
                       display: block;
                     }

                   #input-enclose .focus input {
                        left: 0;
                        transition: left 0.3s;
                      }