ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Компактная форма поиска сайта по клику

Компактная форма поиска сайта по клику

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

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

Сегодня мы создадим окно поиска с эффектом анимации с помощью JQuery и JavaScript, плюс HTML и CSS, где само основы также имеет эффект расширения с помощью jquery. При нажатии на значок поиска появится окно поиска, что безусловно будет очень крутой эффект для вашего сайта или блога. Плюс вы самостоятельно все можете оформить, ведь весь дизайн состоит из стилистики CSS, где только добавил обвод, хотя изначально хотел еще тени прописать, но возможно кто-то устанавливать станет на темный формат, где они не очень так и нужны.

Анимированное окно поиска в JavaScript HTML & CSS

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

Здесь видим кнопку, что появится с открытием страницы или блока.

Это уже навели курсор для клика, и видим как плавно выезжает сама структура для заполнения.

Эффективный способ для реализации компактной формы поиска

Приступаем к установке:

HTML

Код

CSS

Код

.vetectum-nounced {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}

.moduces-dunuveg {
  width: 763px;
  height: 100px;
  position: relative;
}

.nsolestagend {
  position: absolute;
  top: 17px;
  right: 51px;
  box-sizing: border-box;
  width: 0px;
  height: 62px;
  padding: 0 15px;
  outline: none;
  font-size: 20px;
  border-radius: 100px;
  color: #2b2626;
  border: 3px solid #6fc5ef;
  transition: all 0.8s ease;
}

.kaseg {
  position: absolute;
  width: 75px;
  height: 75px;
  background: #1b8dc3;
  border-radius: 50%;
  right: 45px;
  top: 10px;
  cursor: pointer;
  text-align: center;
  line-height: 80px;
  font-size: 20px;
  color: #fdfdfd;
  transition: all 0.8s ease;
  border: 2px solid #b9b2b2;
}

.nsolestagend.nicuprovem {
  width: 347px;
  right: 100px;
}

.kaseg.ledated {
  transform: rotate(-360deg);
  right: 100px;
}

Код

$(".kaseg").click(function(){
  $(".nsolestagend").toggleClass("nicuprovem").focus;
  $(this).toggleClass("ledated");
  $(".nsolestagend").val("");
});

Прежде чем производить установку, то давайте немного узнаем о самом материале. Это анимированное окно поиска в javascript-программе, в основном встроенное в Jquery, вот почему нужно подключать jquery, чтобы легко и быстро создавать сложные javascript-программы.

Также задействованы свойство CSS transform: rotate(-360deg); для эффекта анимации. Это когда кто-то наживает на значок поиска, то автоматически появится окно, и при втором нажатие вы убираете основу, а точнее окно исчезнет.

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

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

12 Июля 2019 Загрузок: 1 Просмотров: 1732 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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