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

how can i create a search bar that slide to the left on clicking the label

本文关键字：搜索栏标签何创建创建单击更新时间：2023-09-26

我想通过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的过渡可以做到这一点，但它没有。有人能给我指个方向吗?

这是一个只有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>

$("#searchbar .search-label").on("click", function(e){
  e.preventDefault();
  $("#searchbar").toggleClass("collapsed");
});//click

#searchbar
{
  position: relative;
}
#searchbar #sliding-panel-outer
{
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 30px;
  width: 240px;
  transition: width 0.4s ease;
}
#searchbar #sliding-panel-inner
{
  width: 240px;
}
#searchbar .search-label
{
  width: 30px;
  height: 30px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
}
#searchbar .search-label .fa-times,
#searchbar.collapsed .search-label .fa-search
{
  display: inline-block;
}
#searchbar .search-label .fa-search,
#searchbar.collapsed .search-label .fa-times
{
  display: none;
}
#searchbar.collapsed #sliding-panel-outer
{
  width: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div id="searchbar" class="collapsed">
   <div id="search-box">
     <div id="sliding-panel-outer">       
      <div id="sliding-panel-inner">
      <input type="text" id="search-input" />
      <button id="search-submit">Search</button>
      </div><!--#sliding-panel-inner-->
     </div><!--#sliding-panel-outer-->
     
      <div class="search-label">
        <i class="fa fa-search"></i>
        <i class="fa fa-times"></i>
      </div>
   </div><!--#search-box-->
</div><!--#searchbar-->

在标签上点击它向左动画:使用JQuery动画:

HTML:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<nav> 
   <ul>
       <li onclick="animateMe()" ><a href="#">Home</a></li> 
       <li onclick="animateMe()"><a href="#">About</a></li>
       <li onclick="animateMe()"><a href="#">Contac</a></li>
 </ul>  
<br>
<br>
   <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>

JS:

 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')
                       }
                       }) 
   function animateMe(){
   $("#search-enclose").css({left:left}).animate({"left":"0%"}, "slow");
   }

CSS:

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