I've gotten my drop down working fine, however on click I would like to add a transition but I read that transitions cannot be added to display properties
Secondly, I would like to rotate the font awesome carat -180deg upon clicking my dropdown list
This is what I have got so far:
const dropdown = document.querySelector('.dropdown-btn');
const options = document.querySelector('.options');
const rotate = document.querySelector('.fas fa-angle-down');
dropdown.addEventListener('click', function() {
options.classList.toggle('active');
});li {
background: red;
list-style-type: none;
}
.options {
padding-left: 0;
margin-bottom: 0;
height: 100%;
}
.options li {
display: none;
padding: 10px;
transition: 350ms ease;
margin-bottom: 15px;
}
.rotate-carat {
transform: rotate(-180px);
}
.options.active li {
display: block;
opacity: 1;
transition: 350ms all;
font-size: 0.875rem;
}<li>
<a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i>
<span>Company Profile</span>
<i class="fas fa-angle-down" style="float: right;"></i>
</a>
</li>
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li>First, I would fix your html - your options ul should be inside the li
Then I would toggle the class on the clicked button and change your css to use the adjacent child selector.
For the options transition, I would change it from using display to using opacity, this way you can hide your ul using height and then transition the opacity of the li once your change the height back to auto
For the rotation, you need to use deg instead of px
I have commented the code below
const dropdown = document.querySelector('.dropdown-btn');
dropdown.addEventListener('click', function(event) { // pass the event into the function
// toggle the class on the clicked button
event.currentTarget.classList.toggle('active');
});li {
background: red;
list-style-type: none;
}
.options {
display: block;
height: 0; /* height 0 to start off hidden */
overflow: hidden;
padding-left: 0;
margin-bottom: 0;
}
.options li {
display: block;
opacity: 0;
padding: 10px;
transition: opacity 0.5s ease; /* transition opacity instead of display */
margin-bottom: 15px;
font-size: 0.875rem;
}
/* add a rotation to your icon */
.fa-angle-down {
transition: transform 350ms ease;
}
.active .fa-angle-down {
transform: rotate(-180deg); /* use deg instead of px */
}
/* change your active options selector to use the adjacent sibling selector */
.active+.options {
height: auto; /* this will show the list before the opacity transitions */
}
.active+.options li {
opacity: 1;
}<ul>
<li>
<a href="#" class="dropdown-btn">
<i class="fas fa-address-card"></i>
<span>Company Profile</span>
<i class="fas fa-angle-down" style="float: right;">test</i>
</a>
<!-- fix your html and move your options ul here -->
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
</ul>check this out!
const dropdown = document.querySelector('.dropdown-btn');
const options = document.querySelector('.options');
const rotate = document.querySelector('.rotate-carat');
dropdown.addEventListener('click', function() {
options.classList.toggle('active');
rotate.classList.toggle('active');
});li {
background: red;
list-style-type: none;
}
.options {
padding-left: 0;
margin-bottom: 0;
transition: 350ms all linear;
transform: scaleY(0);
/*height: 0;*/
overflow: hidden;
opacity: 0;
transform-origin: top;
}
.options li {
display: block;
padding: 10px;
margin-bottom: 15px;
font-size: 0.875rem;
}
.rotate-carat {
display: inline-block;
float: right;
transition: all 300ms linear;
}
.rotate-carat.active {
transform: rotate(180deg);
}
.options.active {
opacity: 1;
transform: scaleY(1);
/*height: 10rem;*/
/*animation: 1s height 350ms forwards;*/
}
@keyframe height {
from {
height: 10rem;
} to {
height: auto;
}
}<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
<li>
<a href="#" class="dropdown-btn"><i class="fas fa-address-card"></i>
<span>Company Profile</span>
<span class="rotate-carat">
<i class="fas fa-angle-down"></i>
</span>
</a>
</li>
<ul class="options">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li>An easy way to add a nice transition that you see on many websites is to use translateX().
So, the menu is displayed, but outside the viewport, so you don't see it. And when it is toggled, it slides in and out.
const list = document.querySelector('ul');
const toggle = document.querySelector('#menu-toggle');
toggle.addEventListener('click', (e) => {
list.classList.toggle('active');
});ul{
transform: translateX(-100%);
transition: transform .3s;
}
ul.active{
transform: translateX(0);
}<button id='menu-toggle'>Show Menu</button>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>Else, i'd recommend watching this video: Kevin Powell - Animating from display none.