ナビゲーション・メニューにスライド・ダウン検索ボックスを追加する

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

テスト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'); 
});