Extensible search bar by clicking the icon in Materializecss / Material Design

Question

Working with the layout using Materializecss, and in my title / navigation I need to display a search icon, which when clicked opens in the search bar.

Ideally, I would like it to just grab the whole / topnav header, but anything that extends the search string / to the search string is fine.

The documentation ( http://materializecss.com/navbar.html ) does not specify in the search bar except mentioning the base code:

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

How to do it? Is there a standard way to do this in Materializecss / Material Design? I dont know?

Thank you very much

Answer 1

EDIT: see updated fiddle for an improved version of the search extension on the navigator :) (without undesirable behavior in chrome)

well, since he wants something else, as I thought in the first place, look at the fiddle . Some basic jquery functions are needed:

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