• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты HTML для сайта » Создать выпадающий CSS блок сайта по клику (Создание блока с выезжающий конструкцией при помощи CSS и JS)
Создать выпадающий CSS блок сайта по клику
Kosten
Дата: Пятница, 2020-05-01, 20:34 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29297
Награды: 62


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

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

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



При клике выезжает блок:



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

HTML

Код
<menu class="menu"></menu>

<! -- Это ваша кнопка меню -->
<! -- Он загружается в HTML после меню -->

<nav class="menu-btn">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

CSS

Код
body {
  background-color: #5d1049;
  margin: 0;
}

/* Это просто сбрасывает стили нашего неупорядоченного списка, что делает наш значок гамбургера */
ul {
  list-style: none;
  padding: 0;
}

/* Стили для кнопки меню */
.menu-btn {
  background-color: #e30425;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  cursor: pointer;
  height: 56px;
  left: 24px;
  position: fixed;
  top: 24px;
  width: 56px;
}

/* Стили для меню */
.menu {
  bottom: 0;
  background-color: #ffffff;
  left: 0;
  margin: 0;
  padding: 32px;
  position: fixed;
  top: 0;
  width: 288px;
  
  transform: translate3d(-100%, 0, 0);
  transition: transform .2s linear;
}

/* Создание иконки гамбургера */
.menu-btn li {
  background-color: #ffffff;
  bottom: 0;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 16px;
  top: 0;
  transition: all .3s ease-in-out;
}

/* Следующие две строки выделяют три строки нашего значка гамбургер */
.menu-btn li:first-child {
  transform: translate3d(0, -4px, 0);
}

.menu-btn li:last-child {
  transform: translate3d(0, 4px, 0);
}

/* Мы сейчас на анимационной территории. Это классы, которые вы включаете с помощью нашей функции Javascript. */
.menu-btn--on li:first-child {
  transform: rotate(135deg) translate3d(0, 0, 0);
}

.menu-btn--on li:last-child {
  transform: rotate(-135deg) translate3d(0, 0, 0);
}

.menu-btn--on li:nth-child(2) {
  opacity: 0;
}

.menu--open {
  transform: translate3d(0, 0, 0);
}

JS

Код
function toggleClass(targetElement, addedClass) {
  if (targetElement.classList.contains(addedClass)) {
    targetElement.classList.remove(addedClass);
  }
  else {
    targetElement.classList.add(addedClass);
  }
};

// Это функция, которую мы добавляем к нашей кнопке меню, чтобы включить ее функцию щелчка
document.querySelector('.menu-btn').addEventListener('click', function() {
  
  // Этот класс toggleClass предназначен для добавления HTML-элемента нашего меню. Это откроет меню.
  toggleClass(document.querySelector('.menu'), 'menu--open');
  
  // Этот toggleClass предназначен для добавления «.menu-btn - on» в HTML-элемент нашей кнопки меню. Это создает анимацию значка гамбургера / хот-дога к значку закрытия.
  toggleClass(document.querySelector('.menu-btn'), 'menu-btn--on');
});

На этом вся установка завершена!

Демонстрация
Прикрепления: 5922960.png(2.5 Kb) · 1691955.png(12.3 Kb) · css-general-fun.zip(5.2 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты HTML для сайта » Создать выпадающий CSS блок сайта по клику (Создание блока с выезжающий конструкцией при помощи CSS и JS)
  • Страница 1 из 1
  • 1
Поиск: