Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

114
Views
CSS transition property issue in JavaScript

I'm having issues in adding transitions to a hamburger menu.

const mobileMenu = document.getElementById('menu-btn');
const mobileLinks = document.getElementById('links')

mobileMenu.addEventListener('click', () => {
  console.log('Clicked')
  if (mobileLinks.style.display === "none") {
    mobileLinks.style.display = "block";
    mobileLinks.style.width = "100%";
    mobileLinks.style.transition = "width 2s ease-in-out";
  } else {
    mobileLinks.style.display = "none";
    mobileLinks.style.width = "0%";
    mobileLinks.style.transition = "width 2s ease-in-out";
  }
})
<div class="menu" id="menu-btn">
  <div class="hamburger"></div>
  <div class="hamburger"></div>
  <div class="hamburger"></div>
</div>

<div class="mobile-links" id="links" style="display:none;">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li>
      <a href="#" Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
</div>

But the transition property is not working for some reason.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!