Full code: https://codepen.io/vvaciej/pen/abPdEBN
CSS part
html body main .sidebar-area {
display: none;
height: max-content;
position: fixed;
background-color: #171717;
border-radius: 0px 0px 5px 0px;
box-shadow: 0px 0px 5px #171717;
}
html body main .active {
display: block;
}
JS
closeButton.addEventListener('click', closingMenuByButton);
const menuButton = document.querySelector('.fa-bars');
function showSidebar () {
if (!dropdownArea.classList.contains('active')) {
dropdownArea.classList.add('active');
} else {
dropdownArea.classList.remove('active');
}
};
menuButton.addEventListener('click', showSidebar);
function hideSidebarByClickOutside(e) {
if (dropdownArea.classList.contains('active') && !menuButton.contains(e.target) && !dropdownArea.contains(e.target)) {
dropdownArea.classList.remove('active');
}
};
bodyArea.addEventListener('click', hideSidebarByClickOutside);
Want to add simple animation of displaying dropdown.
I’m counting on your help.
2
Answers
transition
is a CSS rule, you follow it with a colon:
. Then, you list what you want totransition
(width
, for example) and how long the transition should take, separated by comma,
. Example:Proof-of-concept:
Your
transition
values lack the subject as of whosetransition
time are we speaking about.