В этом мануале подробно рассмотрим тему, как можно самостоятельно создать на сайте выдвигающуюся форму поиска. Которая по умолчанию идет простой кнопкой, то только стоит сделать клик, как форма поиска их этого элемента появляется. Где даже можно в стилистике выставить скорость появление.
Это форма поиска отличается от других, такой вид можно наблюдать на современном шаблоне сайта, что теперь можно поставить на свои интернет ресурс. Здесь представлены стили CSS, которые полностью подключены под анимацию, но и сам код под каркас дизайна. Что только нужно выставить свои операторы или ссылки, что отвечают за внутренний поиск на этом сервис
Так выглядит по умолчанию:
Здесь появляется панель после клика:
Приступаем к установке:
HTML
Код
<form id="becausarwaysd">
<input type="text" name="input" class="mokamitelus">
<button type="reset" class="bumasformative"></button>
</form>
CSS
Код
#becausarwaysd {
position: absolute;
height: 50px;
width: 300px;
margin-left: 170px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#becausarwaysd.on {
-webkit-animation-name: in-out;
animation-name: in-out;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
input {
box-sizing: border-box;
width: 50px;
height: 50px;
border: 4px solid #FFFFFF;
border-radius: 50%;
background: none;
color: #fff;
font-size: 16px;
font-weight: 400;
font-family: Roboto;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.bumasformative {
background: none;
position: absolute;
top: 0px;
left: 0;
height: 50px;
width: 50px;
padding: 0;
border-radius: 100%;
outline: 0;
border: 0;
color: inherit;
cursor: pointer;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.bumasformative:before {
content: "";
position: absolute;
width: 20px;
height: 4px;
background-color: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 26px;
margin-left: 17px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.demanbuman {
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.demanbuman:before {
content: "";
position: absolute;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.demanbuman:after {
content: "";
position: absolute;
width: 27px;
height: 4px;
background-color: #fff;
margin-top: -1px;
margin-left: -13px;
cursor: pointer;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.nbumanymed {
box-sizing: border-box;
padding: 0 40px 0 10px;
width: 300px;
height: 50px;
border: 4px solid #FFFFFF;
border-radius: 0;
background: none;
color: #fff;
font-family: Roboto;
font-size: 16px;
font-weight: 400;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
-webkit-transition-delay: 0.4s, 0s, 0.4s;
transition-delay: 0.4s, 0s, 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
JS
Код
function expand() {
$(".bumasformative").toggleClass("demanbuman");
$(".mokamitelus").toggleClass("nbumanymed");
if ($('.bumasformative').hasClass('demanbuman')) {
$('mokamitelus').focus();
} else {
$('mokamitelus').blur();
}
}
$('button').on('click', expand);
Здесь аналогично можно самостоятельно оформить под дизайн сайта, ведь идет все стандартно.
Демонстрация
