html - .搜索 :focus I want the expanding search Box to overlap menu part not Push them w/o Jquery or Javascript

Question

我有一个简单的搜索框，它也是一个位动画 →

<input class="search" type="search" placeholder="Search">

我通过 Focus 效果制作了扩展搜索框 →

.search:focus {
    width: 225px;
    outline: none;
}

我也试过一个属性→

`Position: absolute`, 

但还是没有达到我想要的效果。

我想要什么？ 当我点击搜索框时，它应该像现在一样展开，但它应该与菜单重叠。目前正在推开菜单项。

可视化我想要的东西的最佳方式是检查 stackoverflow.com 的搜索框我想要相同的扩展效果 → 展开 + 重叠在菜单上而不是推送。

用于浏览器故障排除的有效 Live 代码 can be found here .

Answer 1

我认为将搜索元素包装在列表项中在实现效果的方向上会稍微好一些。

即使您已经快速解决了您的问题，我仍然在这里为您提供了一个我同时写的小解决方法。这没什么大不了的，只是在结构方面更好一些，标记更可靠。

我在下面做了什么:

• 将搜索输入框包装在 li 中以保持列表的流动
• 称它为search-wrap，给它一个宽度(等于我们的搜索框)，让它相对定位，这样它就可以承载我们绝对定位的搜索框
• 绝对定位搜索框
• 为 :focus 上的搜索框添加了一些样式

看看。

.header-menu ul li {
  display: inline-block;
  vertical-align: middle;
}

.search-wrap {
  width: 175px;
  position: relative;
  height: 27px;
  vertical-align: middle;
  display: inline-block;
}

.search {
  border: 1px solid #ccc;
  padding: 5px 7px;
  margin-left: 15px;
  width: 175px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  transition: all .5s ease;
  position: absolute;
  right: 0;
  top: 0;
}

.search:focus {
  width: 225px;
}

<nav class="header-menu">
  <ul>
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>

    <li class="search-wrap">
      <input class="search" type="search" placeholder="Search"></li>
  </ul>
</nav>

您可能想要考虑改进此特定部分的另一件事是(始终)考虑在表单内使用表单输入元素。

就是这样。希望它增加了一些值(value)。干杯!