Barra di ricerca espandibile facendo clic sull'icona in Materializecss/Material Design

Question

Lavorando su un layout utilizzando Materializecss e nella mia intestazione/nav ho bisogno di visualizzare un'icona di ricerca che, quando si fa clic, espande la barra di ricerca.

Idealmente mi piacerebbe prendere solo l'intera intestazione/topnav, ma tutto ciò che espande il/in una barra di ricerca va bene.

La documentazione (http://materializecss.com/navbar.html) non approfondisce la barra di ricerca, oltre a menzionare il codice di base:

<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> 

Come andare su questo? Esiste un metodo standard per farlo in Materializecss/Material Design di cui non sono a conoscenza?

Grazie tanto

Answer 1

EDIT: cerca nella aggiornato fiddle per una migliore versione di espansione di ricerca barra di navigazione :) (senza comportamenti indesiderati in cromo)

bene dal momento che vogliono qualcosa di diverso, come ho pensata prima, guarda a questo fiddle. sono tenuti alcune funzioni di base jQuery:

$(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'); 
    }); 

});