Question

我正在尝试构建一个带有一些图标和搜索栏的物化导航栏。我关闭了，但点击搜索时我的输入框位置太高。我实际上希望能够允许用户单击搜索图标，并且栏会延伸到整个导航栏。但我无法先解决这个问题。

我写了jsfiddle来说明我的问题。您可能需要根据屏幕大小拉伸结果面板。我需要改变什么？这是HTML

＆＃13;

$(document).ready(function() {
  $(".button-collapse").sideNav();
});

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<nav class="nav-border">
  <div class="nav-wrapper container">
    <a href="#!" class="brand-logo">Logo</a>
    <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li>
        <form>
          <div class="input-field">
            <input id="search" type="search" required>
            <label class="label-icon" for="search"><i class="material-icons ">search</i>
            </label>
            <i class="material-icons">close</i>
          </div>
        </form>
      </li>
      <li><a href="collapsible.html"><i class="material-icons">power_settings_new</i></a>
      </li>
    </ul>
    <ul class="side-nav" id="mobile-menu">
      <li><a href="collapsible.html"><i class="material-icons">power_settings_new</i></a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

＆＃13;

Answer 1

您可以使用列在导航栏中定位徽标，搜索栏和右侧链接，然后在搜索处于活动状态时将搜索组件的位置属性更改为fixed。

这应该让你开始。

工作示例：

$(document).ready(function() {
  $(".button-collapse").sideNav();
});

.nav-wrapper .input-field input[type=search] {
  height: 64px;
}
.nav-wrapper input[type="search"]:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.input-field label {
  max-height: 64px;
}
.nav-wrapper input[type="search"]:focus ~ .label-icon.active {
  position: fixed;
  left: 10px;
}
.nav-wrapper input[type="search"]:focus ~ .closed {
  position: fixed;
  right: 10px;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<nav class="nav-border">
  <div class="nav-wrapper">
    <div class="container">

      <div class="row">
        <div class="col s2">
          <a href="#" class="brand-logo">Logo</a>
          <a href="#" data-activates="mobile-menu" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>

        <div class="col s8 hide-on-med-and-down">
          <form>
            <div class="input-field">
              <input id="search" type="search" required>
              <label class="label-icon" for="search"><i class="material-icons">search</i>
              </label>
              <i class="material-icons closed">close</i>
            </div>
          </form>
        </div>

        <div class="col s2 hide-on-med-and-down">
          <ul class="right">
            <li><a href="#"><i class="material-icons">power_settings_new</i></a>
            </li>
          </ul>
        </div>
      </div>

      <ul class="side-nav" id="mobile-menu">
        <li><a href="#"><i class="material-icons">power_settings_new</i></a>
        </li>
      </ul>

    </div>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

将导航栏中的搜索输入与实现

1 个答案: