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>