我如何創建一個搜索欄，滑動到左側點擊標籤

我想通過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轉換可以實現，但它沒有。任何人都可以請我指出一個方向嗎？

來源

2016-11-16 pedroyanky

你想搜索欄上點擊搜索圖標擴大？你覺得它什麼時候應該再次崩潰？我的意思是再次點擊圖標或其他方式？ –

它應該最初隱藏，並顯示圖標被點擊的時間，但它顯示的方式是它會向左滑動併產生一些過渡效果。那就是在w3school。他們的搜索欄 – pedroyanky

您也可以從這些鏈接中獲得創意[鏈接1]（http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/）和[鏈接2]（http： //callmenick.com/post/expanding-search-bar-using-css-transitions）。 –

$("#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-->

來源

2016-11-16 09:19:12

謝謝毫無疑問，這是我正在尋找，我會研究這些代碼，看看它如何加起來。只有，我想在沒有靴子的情況下實現它 – pedroyanky

@pedroyanky很高興它幫助你。關於bootstrap，這段代碼不依賴於bootstrap。我從bootstrap cdn中包含的CSS僅用於導入搜索和交叉圖標。你可以使用你自己的圖標。 –

在標籤上單擊以動畫到左：使用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; 
         }

來源

2016-11-16 08:18:27

下面是一個例子僅限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>

來源

2016-11-16 08:31:36 Manuszep

我如何創建一個搜索欄，滑動到左側點擊標籤

回答

相關問題