title: how can i create a search bar that slide to the left on clicking the label
body: <p>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:</p>
  
  <pre><code>   &lt;nav&gt; 
         &lt;ul&gt;
             &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#"&gt;Contac&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;  
  
         &lt;div id="search-enclose"&gt;
              &lt;form&gt;
                   &lt;div id="label-enclose"&gt;
                        &lt;label&gt;&lt;/labe&gt;
                   &lt;/div&gt;
                   &lt;div id="input-enclose"&gt;
                        &lt;input type="text" placeholder="Enter Keyword"&gt;
                   &lt;/div&gt;
                   &lt;/form&gt;
                   &lt;/div&gt;
     &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code> 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;
                        }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code> 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')
                         }
             }); 
  </code></pre>
  
  <p>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?</p>