ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выдвижная панель поиска сайта на CSS

Выдвижная панель поиска сайта на CSS

В материале узнайте, как создать окно поиска при помощи HTML и CSS, которое идет в выдвижном виде, где при наведении на кнопку форма появляется. Также поиск полностью адаптивный, что можно им пользоваться на сайте с мобильных и больших мониторов, где корректно отображается. Ведь по умолчанию мы наблюдаем одну круглую кнопку, где по центру выставлен шрифтовой знак, который и будет оповещать.

Но стоит навести клик на элемент, то сразу выезжает само моде, которое аналогично по цветовой гамме, той кнопки, где идет при открытии страницы. Также у вас есть возможность изменить все, как вам нравится, ведь дизайн полностью отзывчивый по своему формату. Не нужно подключать скриптов и также библиотеку, все исполнено на чистом стиле CSS, это касается анимации, но и безусловно основного дизайна.

При открытии сайта или страницы:

Здесь наводим клик и появляется поля для заполнения.

Установочный процесс:

HTML

Код

<div class="kavormu-poiska">
  <input class="kasuvaudusya" type="text" name="" placeholder="Search">
  <button class="animirovanaya-forma" href="#">
  <i class="material-icons">search</i>
  </button>
</div>

CSS

Код

.kavormu-poiska {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  background: #2f3640;
  height: 40px;
  border-radius: 40px;
  padding: 10px;
}
.kavormu-poiska:hover>.kasuvaudusya {
  width: 258px;
  padding: 0 6px;
}
.kavormu-poiska:hover>.animirovanaya-forma {
  background: white;
  color: #2f3640;
}
.animirovanaya-forma {
  color: #f7f1f1;
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2c3138;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  cursor: pointer;
}
.kasuvaudusya {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: white;
  font-size: 16px;
  transition: 0.4s;
  line-height: 40px;
  width: 0px;
}
@media screen and (max-width: 620px) {
  .kavormu-poiska:hover>.kasuvaudusya {
  width: 150px;
  padding: 0 6px;
  }
}

Это отличное решение для мобильных сайтов, а также интернет ресурса где очень мало место, что такой поиск по сайту станет отличным предложением, что впишется под разный дизайн, ведь его можно оригинально оформить, но это уже самостоятельно под свой основной стиль.

Демонстрация

16 Сентября 2019 Загрузок: 2 Просмотров: 1896 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0