Хаки и Скрипты Next Generation CMS : Bootstrap 4, Интерфейс : Оформляем поле поиска

irbees2008 Опубликовано - 14 - января Bootstrap 4

Адаптировал: 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;
    }

Вот и все пользуемся.

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

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.