Хаки и Скрипты Next Generation CMS

Оформляем поле поиска

irbees2008 irbees2008 Опубликовано - 14 - января Bootstrap 4
979 - 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;
}
Вот и все пользуемся.

Можешь почитать и вот эту статейку "Делаем активный номер телефона"

Опрос

Ваше мнение

Вы нашли что искали?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [8]
  • Гости: [8]
  • Были сегодня : [1] Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.425сек
  • Потребление памяти: 5.006 Mb 
  •   яндекс.ћетрика