像谷歌这样的材料设计精简版中的搜索框

Question

我正在使用 Material Design lite 创建导航栏。我想创建如下图所示的导航栏。

我尝试了一些代码，它有点好。但不如图片中的那么好。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
    <!-- Top row, always visible -->
    <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>
        <div class="mdl-layout-spacer"></div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
              mdl-textfield--floating-label mdl-textfield--align-right">
            <label class="mdl-button mdl-js-button mdl-button--icon"
                   for="waterfall-exp">
                <i class="material-icons">search</i>
            </label>
            <div class="mdl-textfield__expandable-holder">
                <input class="mdl-textfield__input" type="text" name="sample"
                       id="waterfall-exp">
            </div>
        </div>
    </div>
    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation -->
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Electronics</a>
            <a class="mdl-navigation__link" href="">Cloths</a>
            <a class="mdl-navigation__link" href="">men</a>
            <a class="mdl-navigation__link" href="">Women</a>
        </nav>
    </div>
</header>
<div class="mdl-layout__drawer">
    <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>
    <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
    </nav>
</div>
<main class="mdl-layout__content">
    <div class="page-content">@RenderBody()</div>
</main>

请有人帮我使用谷歌材料设计创建导航栏，如图所示

我的代码生成了如下所示的导航栏

Answer 1

.mdl-layout__header-row,
.mdl-textfield {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: blue;
}

.mdl-layout__header-row:nth-child(1) {
  border-bottom: thin solid lightgray;
  padding-right: 2em;
}

.mdl-layout__header-row:nth-child(2) {
  padding: .5em 2em .5em 0;
}

.mdl-button {
  background-color: orange;
  color: white;
  padding: .4em
}

.mdl-textfield__input {
  padding: .5em;
}

.mdl-navigation a {
  color: white;
}

<div class="demo-layout-waterfall mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--waterfall">
    <!-- Top row, always visible -->
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title"><img src="http://placehold.it/50" width="50" height="50" /></span>
      <div class="mdl-layout-spacer"></div>
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
              mdl-textfield--floating-label mdl-textfield--align-right">

        <div class="mdl-textfield__expandable-holder">
          <input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp">
        </div>
        <label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">
                <i class="material-icons">search</i>
            </label>
      </div>
    </div>
    <!-- Bottom row, not visible on scroll -->
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Electronics</a>
        <a class="mdl-navigation__link" href="">Cloths</a>
        <a class="mdl-navigation__link" href="">men</a>
        <a class="mdl-navigation__link" href="">Women</a>
      </nav>
    </div>
  </header>

  <main class="mdl-layout__content">
    <div class="page-content"></div>
  </main>

Answer 2

HTML

<header class="mdl-layout__header mdl-layout__header--waterfall">
        <!-- Top row, always visible -->
        <div class="mdl-layout__header-row mdl-layout__header">
            <span class="mdl-layout-title"><img src="~/images/transfeteBirdLogo.png" width="50" height="50" /></span>

            <!-- Displayed on Computer and Tablet -->
            <!-- Search -->
            <div class="mdh-expandable-search mdl-cell--hide-phone">
                <form action="#">
                    <input type="text" placeholder="Search for Product , Brands ..">
                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" style="background: #009688">
                        <i class="material-icons">search</i>
                    </button>

                </form>
            </div>


            <div class="mdl-layout-spacer mdl-cell--hide-tablet mdl-cell--hide-desktop"></div>
            <div class="mdl-cell--hide-tablet mdl-cell--hide-desktop mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
                <label class="mdl-button mdl-js-button mdl-button--icon"
                       for="waterfall-exp">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" name="sample"
                           id="waterfall-exp">
                </div>
            </div>

            <!-- Buttons -->
            <!-- Right aligned menu below button -->
            <button id="demo-menu-lower-right"
                    class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">more_vert</i>
            </button>

            <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                for="demo-menu-lower-right">
                <li class="mdl-menu__item">Mobile App</li>
                <li class="mdl-menu__item">Customer Care</li>
                <li class="mdl-menu__item">Track Order</li>
                <li class="mdl-menu__item">Log in</li>
            </ul>
        </div>
        <!-- Bottom row, not visible on scroll -->
        <div class="mdl-layout__header-row" style="height: 35px;">
            <!-- Navigation -->
            <nav class="mdl-navigation">
                <a class="mdl-navigation__link" href="">Electronics</a>
                <a class="mdl-navigation__link" href="">Cloths</a>
                <a class="mdl-navigation__link" href="">men</a>
                <a class="mdl-navigation__link" href="">Women</a>
            </nav>
        </div>
    </header>

CSS

.mdh-expandable-search {
    margin: 0 50px;
    align-items: center;
    justify-content: center;
}

    .mdh-expandable-search form {
        max-width: 700px;
    }

    .mdh-expandable-search,
    .mdh-expandable-search form,
    .mdh-expandable-search input {
        /* Cross browser flex-grow */
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

        .mdh-expandable-search,
        .mdh-expandable-search form {
            /* Cross browser inline-flex */
            display: -webkit-inline-box;
            display: -webkit-inline-flex;
            display: -moz-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
        }



            .mdh-expandable-search input {
                outline: none;
                border: none;
                font-size: 16px;
                color: #131212;
                /* background-color: #fcfdfd; */
                padding: 0px 35px 0px 10px;
                height: 40px;
                line-height: 40px;
                border-radius: 5px 5px 5px 5px;
                -moz-border-radius: 5px 5px 5px 5px;
                -webkit-border-radius: 5px 5px 5px 5px;
            }