將向下滑動的搜索框添加到導航菜單

Question

我正在嘗試構建一個向下滑動的搜索框。我想讓搜索框在您按下搜索圖標後向下滑動。 （我想完全像這樣 - http://www.marieclaire.co.uk/）。當它滑落時，我希望它是全寬。我已經開始構建實際的搜索框，但我無法弄清楚如何讓它從搜索圖標上滑下來。有沒有人有任何解決方案？

的jsfiddle - https://jsfiddle.net/zx06d7vz/（搜索畫面底部盒）

/*-------------------------------------------------------------- 
 
## Search 
 
--------------------------------------------------------------*/ 
 
.search-site { 
 
    float: right; 
 
    font-size: 1.2em; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    padding: 0 15px 
 
} 
 

 
.search-form { 
 
    -webkit-transition: all .3s ease-in-out; 
 
    -o-transition: all .3s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
    -webkit-transition: all .3s ease-in-out 250ms ease; 
 
    -moz-transition: all .3s ease-in-out 250ms ease; 
 
    -ms-transition: all .3s ease-in-out 250ms ease; 
 
    -o-transition: all .3s ease-in-out 250ms ease; 
 
    transition: all .3s ease-in-out 250ms ease; 
 
    background: #fff; 
 
    height: 0; 
 
    left: 50%; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    padding-left: calc((100vw - 1200px)/2); 
 
    padding-right: calc((100vw - 1200px)/2); 
 
    position: absolute; 
 
    top: calc(100% + 1px); 
 
    transform: translateX(-50%); 
 
    width: 100vw; 
 
    z-index: 999999 
 
} 
 

 
.search-form.search-visible { 
 
    opacity: 1; 
 
    height: 200px 
 
} 
 

 
.search-form.search-form-permanent { 
 
    border-bottom: none; 
 
    height: 100px !important; 
 
    left: 0; 
 
    opacity: 1 !important; 
 
    padding: 0; 
 
    position: relative; 
 
    transform: none; 
 
    width: 100%; 
 
    z-index: 5 
 
} 
 

 
.search-form.search-form-permanent .input-group { 
 
    padding: 0; 
 
    top: 0 
 
} 
 

 
.search-form.search-form-permanent .button-search { 
 
    color: #33f; 
 
    outline: none 
 
} 
 

 
.search-form.search-form-permanent .button-search:hover { 
 
    color: #b4c5cd 
 
} 
 

 
.search-form .input-group { 
 
    padding: 0 10px; 
 
    position: relative; 
 
    top: 72px; 
 
    width: 100% 
 
} 
 

 
.search-form .form-control { 
 
    background: #fff; 
 
    border: none; 
 
    border-bottom: 1px #b4c5cd solid; 
 
    border-radius: 0; 
 
    box-shadow: none; 
 
    float: left; 
 
    height: auto; 
 
    padding: 0; 
 
    outline: none; 
 
    width: calc(100% - 36px) !important 
 
} 
 

 
.search-form .form-control:focus { 
 
    background: #fff !important 
 
} 
 

 
.search-form .button-search { 
 
    background: transparent; 
 
    border: none; 
 
    float: right; 
 
    font-size: 1.4em; 
 
    padding: 6px 0 0 0; 
 
    width: 36px 
 
    background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat; 
 
}

<form role="search" method="get" class="search-form form-inline search-visible" action=""> 
 
      <div class="input-group"> 
 
       <input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search"> 
 
       <button type="submit" class="button-search icon-search"></button> 
 
      </div> 
 
     </form>

Answer 1

測試的那一個。

HTML：

<h1 class="search">S</h1> 
<form role="search" method="get" class="search-form form-inline" action=""> 
      <div class="input-group"> 
       <input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search"> 
       <button type="submit" class="button-search icon-search"></button> 
      </div> 
     </form> 

CSS

/*-------------------------------------------------------------- 
## Search 
--------------------------------------------------------------*/ 
.search-site { 
    float: right; 
    font-size: 1.2em; 
    height: 50px; 
    line-height: 50px; 
    padding: 0 15px 
} 

.search-form { 
    -webkit-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    -webkit-transition: all .3s ease-in-out 250ms ease; 
    -moz-transition: all .3s ease-in-out 250ms ease; 
    -ms-transition: all .3s ease-in-out 250ms ease; 
    -o-transition: all .3s ease-in-out 250ms ease; 
    transition: all .3s ease-in-out 250ms ease; 
    background: #fff; 
    left: 50%; 
    opacity: 0; 
    overflow: hidden; 
    padding-left: calc((100vw - 1200px)/2); 
    padding-right: calc((100vw - 1200px)/2); 
    position: absolute; 
    top: -100px; 
    transform: translateX(-50%); 
    width: 100vw; 
    z-index: 999999 
} 

.search-form.search-visible { 
    opacity: 1; 
    height: 200px; 
    top: 0; 
} 

.search-form.search-form-permanent { 
    border-bottom: none; 
    height: 100px !important; 
    left: 0; 
    opacity: 1 !important; 
    padding: 0; 
    position: relative; 
    transform: none; 
    width: 100%; 
    z-index: 5 
} 

.search-form.search-form-permanent .input-group { 
    padding: 0; 
    top: 0 
} 

.search-form.search-form-permanent .button-search { 
    color: #33f; 
    outline: none 
} 

.search-form.search-form-permanent .button-search:hover { 
    color: #b4c5cd 
} 

.search-form .input-group { 
    padding: 0 10px; 
    position: relative; 
    top: 72px; 
    width: 100% 
} 

.search-form .form-control { 
    background: #fff; 
    border: none; 
    border-bottom: 1px #b4c5cd solid; 
    border-radius: 0; 
    box-shadow: none; 
    float: left; 
    height: auto; 
    padding: 0; 
    outline: none; 
    width: calc(100% - 36px) !important 
} 

.search-form .form-control:focus { 
    background: #fff !important 
} 

.search-form .button-search { 
    background: transparent; 
    border: none; 
    float: right; 
    font-size: 1.4em; 
    padding: 6px 0 0 0; 
    width: 36px 
    background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat; 
} 

的jQuery：

$('.search').on('click', function() { 
$('.search-form').addClass('search-visible'); 
});