В статье узнаете, как можно создать боковой блок, который по умолчанию с открытием страницы скрыт. И только кнопка выдает, что по клику этот блок выезжает. И все правильно, это похоже на боковое меню, но в нашем случай идет полноценный блок, только по информации пустой, но с полностью рабочими функциями, но здесь вы уже самостоятельно решите, что вы добавите, так как в большинстве много зависит от тематики сайта.
Как вы знаете, почти все заданные по конструкции является объектами под функционал. Также являются объектами и могут использоваться таким же образом при входе на сайт и регистраций. Это позволяет передать функции в качестве входных данных для другой функции, которая часто используется и важные мероприятия.
При открытие сайта или страницы:
При клике выезжает блок:
Установочный процесс:
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');
});
На этом вся установка завершена!
Демонстрация
