javascript - 在导航菜单中添加一个向下滑动的搜索框

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