Un menu de navigation dynamique en Vanilla Javascript

Voici un exemple de menu de navigation dynamique en CSS et Vanilla Javascript. Le menu ne laisse apparaître que les icones, et ne se déplie pour laisser apparaitre les noms des rubriques que lorsque le curseur passe dessus.

.slideDown() en Vanilla Javascript

Lorsque l’on passe un élément de height:0 à height:auto, la taille qu’il vas prendre dépend de son contenu, elle n’est pas fixe. Cela est incompatible avec une transition CSS. La transition ne peut s’applique que lorsque l’on passe d’un taille définie à une autre. Que ce soit en em, px, %, peu-importe, mais la taille doit être définie, CSS ne peut pas appliquer une fonction de transition vers height:auto.

Pour réaliser cet effet slideDown en Vanilla Javascript, il faut mettre le contenu à déplier dans un conteneur supplémentaire .wrap-body-content. La taille de ce conteneur est alors définie par son contenu. Voici le HTML :

<div class="wrap" onmouseenter="unwrap(this)">
    <div class="wrap-head">
      Hover to unwrap
    </div>
    <div class="wrap-body">
      <div class="wrap-body-content">
        Wrapped Content
      </div>
    </div>
  </div>

C’est sur l’élément parent wrap-body que la propriété height vas être modifiée. En combinant ça avec overflow:hidden, on arrive à recréer le même effet qu’en Jquery. Le CSS :

.wrap-body {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
}

Ainsi, il suffira en javascript de calculer la taille de .wrap-body-content, puis de donner cette taille à : .wrap-body :

let unwrap = (element) => {
  const body = element.querySelector(".wrap-body");
  const body_content = body.querySelector(".wrap-body-content");
  body.style.height = body_content.offsetHeight + "px";
};

On arrive alors au même effet qu’avec la fonction jQuery slideDown() ou slideToggle().