如何创建一个单击标签时向左滑动的搜索栏

Question

我想通过 css 和可能的 jQuery 来实现这种效果。也就是说，创建一个隐藏的搜索栏，并且在单击标签中的搜索图标时可以很好地向左滑动。但我就是做不到。我确实取得了一些成就，但相当无聊。我想要的过渡是与 W3school 和许多其他网站中的过渡相似。这是我的代码：

   <nav> 
       <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contac</a></li>
     </ul>  

       <div id="search-enclose">
            <form>
                 <div id="label-enclose">
                      <label></labe>
                 </div>
                 <div id="input-enclose">
                      <input type="text" placeholder="Enter Keyword">
                 </div>
                 </form>
                 </div>
   </nav>

CSS：

 nav {
          position: relative;
     }
     ul {
          position: absolute;
          left: 25%;
          list-stye: none;
          z-index: 10;
       }
      li{
          float: right;
        }
        #search-enclose {
             width: 500px;
        }
        #label-enclose {
              position: absolute;
              top: 46px;
              left: 30%;
              height: 35px;
              width: 60px;
              line-height: 35px;
              z-index: 20;
         }

              #label-enclose label {
              display: block;
              height: 35px;
              width: 60px;
              cursor: pointer;
            }

            #input-enclose {
                 position: absolute;
                 top: 46px;
                 width: 300px;
                 height: 35px;
                  z-index: 5;
                 overflow: hidden;

                  }
                  #input {
                      display: block;
                      position: absolute;
                      width: 270px;
                      height: 35px;
                      margin: 0;
                      border: none;
                      color: #fff;
                      font-size: 18px;
                      backface-visibility: none;
                      border-radius: 0;
                      transition: left 0;   
                       }

                  #input-enclose input:focus {
                        outline: none;
                      }

                 #input-enclose .focus {
                       display: block;
                     }

                   #input-enclose .focus input {
                        left: 0;
                        transition: left 0.3s;
                      }

JavaScript

 var searchImage = document.getElementById('img');
        var input = document.getElementById('input');
         searchImage.addEventListener('click', function() {
                    if (classie.hasClass(input,'focus')) {
                    classie.removeClass(input,'focus')
                   }else {
                       classie.addClass(input, 'focus')
                       }
           }); 

就其价值而言，这几乎是我在网上找到的代码的副本，我的格式和 CSS 很糟糕，但我知道我想要什么，只要有一个好的方向，我就可以实现这一目标。只是想让搜索栏显示在导航列表项的顶部，当以良好的方式单击时，我确实认为 CSS 过渡可以实现这一点，但事实并非如此。有人可以给我一个遵循的方向吗？

Answer 1

这是一个仅使用 CSS 的示例。

这是触发场打开的焦点状态。单击其他任意位置将关闭搜索字段。

我没有包含搜索按钮，但您可以将其添加到字段旁边，将其隐藏，然后在焦点上显示按钮并隐藏标签。

body {
  font-family: sans-serif;
  font-size: 16px;
}
#search-enclose {
  border: 1px solid #ccc;
  overflow: hidden;
}

#label-enclose {
  border-left: 1px solid #ccc;
  float: right;
}

#label-enclose label {
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}

#input-enclose {
  float: right;
  font-size: 0;
}

#input-enclose input {
  border: none;
  border-left: 1px solid #ccc;
  padding: 1.1em 0;
  font-size: 16px;
  width: 0;
  margin-right: -1px;
  transition: all .3s;
}

#input-enclose input:focus {
  width: 15em;
  padding-left: 1em;
  padding-right: 1em;
  outline: none;
}

button {
  border: none;
  border-left: 1px solid #ccc;
  padding: 1.1em 0;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  width: 0;
  margin-right: -1px;
  overflow: hidden;
  transition: all .3s;
}

#input-enclose input:focus + button {
  width: 5em;
  padding: 1.1em;
  border-right: 1px solid #ccc;
  margin-right: -3.1em;
}

svg {
  width: 1em;
  height: 1em;
}

<nav> 
  <div id="search-enclose">
    <form>
      <div id="label-enclose">
        <label for="fldSearch"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="fill: rgb(0, 0, 0);" xml:space="preserve">
<path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" style="fill: rgb(0, 0, 0);"></path>
</svg></label>
      </div>
      <div id="input-enclose">
        <input type="text" placeholder="Enter Keyword" id="fldSearch">
        <button type="submit">Search</button>
      </div>
    </form>
  </div>
</nav>