我正在尝试构建一个向下滑动的搜索框。按下搜索图标后,我希望搜索框向下滑动。 (我希望它完全像这样 - 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>
&#13;
答案 0 :(得分:1)
测试一个。
HTML:
-I/usr/include -L/usr/lib
<强> CSS 强>
<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>
jQuery的:
/*--------------------------------------------------------------
## 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;
}