title: Expand input on click in search icon
body: <p>I´m trying to do something like when I click in my search icon the input expands with nice effect. I found a tutorial here explain what I was trying to do. I follow the tutorial but in my example is not working, I guess I did everything correct. Anyone there already tried to do this? Can give a help?
  The only difference that I have from the example is that I have the input inside my menu like this:</p>
  
  <pre><code>&lt;nav id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="Products.php"&gt;Products&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="Services.php"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="About.php"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="Contacts.php"&gt;Contacts&lt;/a&gt;&lt;/li&gt; 
          &lt;li style="float:right; list-style:none"&lt;/li&gt;
              &lt;div id="sb-search" class="sb-search"&gt;
                  &lt;form&gt;
                      &lt;input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search"&gt;
                      &lt;input class="sb-search-submit" type="submit" value=""&gt;
                      &lt;span class="sb-icon-search"&gt;&lt;/span&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;  
  &lt;/nav&gt; 
  </code></pre>
  
  <p><strong>The link for tutorial:</strong> <a href="http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/" rel="nofollow">http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/</a></p>
  
  <p><strong>What I´m getting:</strong> <a href="http://jsfiddle.net/ritz/knprc/2/" rel="nofollow">http://jsfiddle.net/ritz/knprc/2/</a></p>