创建一个CSS下拉菜单，其中包含从搜索图标弹出的搜索框

Creating a CSS drop-down menu with a search box the pops down from the search icon

本文关键字：搜索 搜索图 包含 图标 一个 下拉菜单 CSS 创建      更新时间：2023-11-24

我正在创建一个CSS悬停下拉菜单。我有一个搜索图标，上面也有一个悬停。当你将鼠标悬停在图标上时，它会下拉一个搜索输入。但是，当鼠标离开该区域时，搜索框将消失。只要光标在输入字段内，或者输入被聚焦，就希望将框保持在那里。

如果你需要我发布我刚刚告诉我的内容，但基本上只是一个标准的纯CSS悬停下拉列表，这是基本的HTML设置：

<li class="search">
    <ul class="search">
        <li><input placeholder="enter search" action=""></li>

所以它是有效的，但正如我所说，当你离开时，即使光标闪烁，它也会再次隐藏。我假设我需要某种JavaScript来实现这一点，但不确定从哪里开始。

您可以使用JavaScript向li添加和删除一个类。不过，下面的代码在jQuery中。

        $( ".search" ).onmouseenter( function() {
            $( "input" ).addClass( "seeMe" ).focus();
        });
        $( "input" ).blur( function() {
            $( this ).removeClass( "seeMe" );
        });

这使输入可见，并在悬停搜索li时使其聚焦，并在输入失去焦点时隐藏。

请在我的jsFiddle上查看这方面的修改版本。

纯CSS解决方案

不需要JavaScript来做到这一点。使用纯CSS。我将使用O作为搜索图标。我还为元素添加了边框，以便可视化它们的碰撞框。

查看此答案底部的进一步阅读部分，了解更多信息。

解决方案

.search {
  list-style: none;
  padding: 0;
  width: fit-content;
  border: 1px solid black;
  /*border added to visualise collision box*/
}
.search-bar {
  display: none;
}
.search-icon {
  width: fit-content;
  border: 1px solid red;
  /*border added to visualise collision box*/
}
.search-icon:hover+.search-bar {
  display: block;
}
.search-bar:hover {
  display: block;
}
<ul class="search">
  <li class="search-icon">O</li>
  <li class="search-bar"><input placeholder="enter search" action=""></li>
</ul>

动画解决方案

.search {
  list-style: none;
  padding: 0;
  width: fit-content;
  border: 1px solid black;
  /*border added to visualise collision box*/
}
.search-bar {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: all 200ms ease-in;
}
.search-icon {
  width: fit-content;
  border: 1px solid red;
  /*border added to visualise collision box*/
}
.search-icon:hover+.search-bar {
  opacity: 1;
  width: 100px;
}
.search-bar:hover {
  opacity: 1;
  width: 100px;
}
<ul class="search">
  <li class="search-icon">O</li>
  <li class="search-bar">
    <input placeholder="enter search" action="">
  </li>
</ul>

进一步阅读

  • 查看CSS Selectors-Combinators
  • 子组合子&
  • MDN上的相邻同级合并器
相关文章：