Question 280389 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to make a transition effect for a dropdown menù

I have a problem using CSS (tried JS and it’s the same, it doesn’t work) for a dropdown menu.
When i click on my button to open the submenu it appears instantly, how can i make the transition smooth?

This is the HTML code:

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <button class="dropdown-btn">Dropdown 
    <div class="dropdown-arrow">▼
    </div>
  </button>
  <div class="dropdown-container">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <a href="#contact">Search</a>
</div>

The CSS:

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 8px 0px 0px 0px;
  display: block;
  border: none;
  background: none;
  text-align: left;
    color: #727272;
    text-decoration: underline;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
  outline: none;
}

.dropdown-arrow {
  padding-left: 2px;
    display: inline-block;
    font-size: 9px;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #a0a0a0;
}

/* Dropdown container (hidden by default). */
.dropdown-container {
  display: none;
  padding-left: 16px;
}

And the JS to let appear the submenu (it let appear dropdown-container):

<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
} 
</script>

First I tried to add the transition: height .4s ease; line in the CSS inside .dropdown-container and nothing, it didn’t work.
Then i added the same transition code line in the JS code like this:

<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var container = document.getElementsByClassName("dropdown-container"); /*ADDED LINE THIS HERE*/
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
      container.style.transition = "transform 0.4s ease"; /*ADDED LINE THIS HERE*/
    }
  });
} 
</script>

Also tried transition: all 0.4s; but the all parameter didn’t work either.

Tags:

2

Answers


  1. 0

    You can’t transition the display property, neither can you transition the height property between a fixed value (say zero) and auto. The easiest options are to transition the opacity property to get a fade effect, or to transition the max-height property to get a fly-in effect.

    Login or Signup to reply.
  2. 0

    It’s difficult give transition for display style. Please change height. It’s make sense. Good luck.

    for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    const height = 100;
    const prevHeight = Number(dropdownContent.style.height.split('px')[0]) || 0;
    dropdownContent.style.height = height - prevHeight;
  });
} 
    .dropdown-container {
  height: 0;
  padding-left: 16px;
  overflow: hidden;
  transition: 0.5s;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search