Erweiterbare Suchleiste durch Klicken auf das Symbol in Materialiscss/Material Design

Question

Ich arbeite an einem Layout mit Materialisecss, und in meiner Kopfzeile/nav muss ich ein Suchsymbol anzeigen, das beim Anklicken die Suchleiste erweitert.

Idealerweise möchte ich, dass es nur die gesamte Kopfzeile/topnav übernimmt, aber alles, was die/zu einer Suchleiste erweitert, ist in Ordnung.

Die Dokumentation (http://materializecss.com/navbar.html) erarbeitet nicht auf der Suchleiste, abgesehen von der Erwähnung des Basiscode:

<nav> 
    <div class="nav-wrapper"> 
     <form> 
     <div class="input-field"> 
      <input id="search" type="search" required> 
      <label for="search"><i class="material-icons">search</i></label> 
      <i class="material-icons">close</i> 
     </div> 
     </form> 
    </div> 
    </nav> 

Wie wäre es damit gehen? Gibt es eine Standardmethode, dies innerhalb von Materialisecss/Material Design zu tun?

Vielen Dank

Answer 1

EDIT: Blick auf die aktualisierte fiddle für eine verbesserte Version von navbar Suche zu erweitern :) (ohne unerwünschtes Verhalten in Chrom)

in Ordnung, da er etwas anderes wollen, wie ich thinked zuerst schauen in dieser fiddle. einige grundlegende jquery Funktionen sind erforderlich:

$(document).ready(function() { 
var trig = 1; 

    //animate searchbar width increase to +150% 
    $('#navbarsearch').click(function(e) { 

    if (trig == 1){ 
     $('#expandtrigger').animate({ 
     width: '+=150' 
     }, 400); 
    trig ++; 
    } 
    //handle other nav elements visibility here 
    $('.search-hide').addClass('hide'); 
    }); 

    // if user leaves the form the width will go back to original state 

    $("#navbarsearch").focusout(function() { 
    $('#expandtrigger').animate({ 
     width: '-=150' 
    }, 400); 
    trig = trig - 1; 
    //handle other nav elements visibility here 
     $('.search-hide').removeClass('hide'); 
    }); 

});