- 712
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
Всем привет, вот нашел довольно интересную плюшку, интересное оформления поля поиска на бутстрапе. Ну похожих реализаций довольно много,и все требуют дополнительных скриптов и обычно jquery. Ну здесь тоже используется jquery, также используется подключение шрифтовых иконок fontawesome ,ну и стандартное подключение bootstrap 4.1.1
И так первое у нас должен быть подключен bootstrap 4.1.1 , jquery и fontawesome ну примерно так
Код:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
Конечно,все это может грузится и сайта, скачиваете скрипты стили,заливаете в папки шаблона и подключаете в шаблон.
Далее само поле поиска, добавляем туда где хотим его видеть
Код:
<div class="searchbar">
<input class="search_input" type="text" name="" placeholder="Search...">
<a href="#" class="search_icon"><i class="fas fa-search"></i></a>
</div>
Код:
.searchbar{
margin-bottom: auto;
margin-top: auto;
height: 60px;
background-color: #353b48;
border-radius: 30px;
padding: 10px;
}
.search_input{
color: white;
border: 0;
outline: 0;
background: none;
width: 0;
caret-color:transparent;
line-height: 40px;
transition: width 0.4s linear;
}
.searchbar:hover > .search_input{
padding: 0 10px;
width: 450px;
caret-color:red;
transition: width 0.4s linear;
}
.searchbar:hover > .search_icon{
background: white;
color: #e74c3c;
}
.search_icon{
height: 40px;
width: 40px;
float: right;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color:white;
}Можешь почитать и вот эту статейку "Замена лоадера GIF на анимацию CSS"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
