Ajouter un sous-menu à un menu vertical à l'aide de javascript

Question

J'ai réussi à concevoir un menu vertical à l'aide de javascript, mais j'échoue lamentablement lorsque j'essaie d'y ajouter un sous-menu.

Voici l'exemple http://www.bootply.com/isPSKNdGCG#

Quelqu'un peut-il me donner un indice sur la façon d'ajouter le sous-menu à ouvrir sous le premier niveau ?

Merci.

--

J'ai réussi à le faire fonctionner grâce à ce code jquery, pas sûr que ce soit la meilleure pratique, mais ça a bien marché.

• Relatório

  function toggle_visibility(id) {
    var e = document.getElementById(id);
  
    if (e.style.display == 'block') {
      e.style.display = 'none';
    } else {
      e.style.display = 'block';
    }
  }
  
  <li>
    <div class="dl_parent">
      <span onclick="toggle_visibility('dl_sub_dd');">
        <a href="#">Relatório <span class="caret" style="margin-left: 10px;"></span></a>
      </span>
      <div id="dl_sub_dd">
        <ul>
          <li><a href="#">Secretaria</a></li>
          <li><a href="#">Tesouraria</a></li>
          <li><a href="#">Tesouraria</a></li>
          <li><a href="#">Chancelaria</a></li>
        </ul>
      </div>
  </li>

Answer 1

Principes fondamentaux des menus CSS

La solution classique consiste à modifier soit l'attribut CSS display, soit l'attribut CSS visibility d'un div. La dernière de ces deux solutions nécessitera un arrière-plan non transparent et un indice Z plus élevé pour les volets du menu. Votre exemple de code utilise la première des deux solutions, qui est plus lente et moins jolie dans la plupart des conceptions.

Pour un menu imbriqué, il suffit d'imbriquer la hiérarchie div-ul-li-bouton à l'intérieur du volet de menu li du parent.

<button onwhatever=...> <!-- optional -->
<div class='parent-menu'>
  <ul>
    <li>
      <button onwhatever=...>
      <div id=...>
        <ul>
          <li>
            <button onwhatever=...>
            <div id=...>
              <ul>
                <li>
                  <button onclick=...>

Le sous-menu se développe comme son parent, sauf que vous devez donner des identifiants aux volets pour pouvoir associer les événements de l'utilisateur au sous-menu qu'il souhaite développer. (Pour les volets petits-enfants, vous devez utiliser des ids enfant et petit-enfant distincts, en suivant généralement un modèle simple).

Il est préférable, du point de vue de la conception structurelle HTML5, d'utiliser des balises de bouton au lieu de balises d'entrée ou de réutiliser la balise div à la fois pour le conteneur ul et le bouton. Si vous optez pour cette structure plus propre et plus lisible, utilisez également les boutons dans les volets, par souci de cohérence. De cette façon, vous avez toujours affaire à des événements de bouton pour piloter vos actions d'expansion, de contraction et de sélection finale du menu.

Conception de style en cascade

Vous n'avez besoin que d'une seule classe CSS. Tout le reste peut être sélectionné par CSS par rapport à la base div.parent-menu. La façon dont vous utilisez les mises en page en bloc, en ligne ou autres dépend largement de la conception de votre page et peut changer en temps réel en fonction de la largeur du port d'affichage du navigateur. De même, les conceptions de pages réactives modifient souvent la disposition du menu en fonction du type de média.

Commencez par faire fonctionner votre mécanisme, puis ajustez votre style en le testant sur plusieurs appareils et en variant la largeur de la fenêtre de votre bureau.

Choix et association de vos événements

En fonction du comportement souhaité, vous utiliserez onclick ou onmouseover pour déclencher les modifications appropriées. L'événement mouse over est rapide, mais parfois trop rapide pour l'utilisateur si la mise en page est compacte.

Mécanismes d'affichage et de masquage gracieux

Dans le cadre de la conception réactive, vous pouvez faire preuve de doigté dans la manière dont le menu et le sous-menu s'étendent en fonction de la largeur de l'écran ou du type de média.

Il existe des moyens de ralentir la mécanique d'affichage ou d'expansion ou la vitesse à laquelle l'écriture apparaît ou s'estompe en utilisant des polynômes du troisième degré. La plupart des composants de bibliothèque que les gens aiment brancher ne sont pas aussi sophistiqués. Ils fournissent parfois des mécanismes linéaires du premier degré. Néanmoins, beaucoup les apprécient parce qu'ils fournissent les éléments de base dès la sortie de la boîte, qu'ils sont testés sur plusieurs navigateurs et qu'ils sont conçus pour répondre aux besoins des utilisateurs.

En général, quelques lignes seulement de JavaScript suffisent à assurer la grâce mécanique, ce qui permet d'éviter l'activité HTTP supplémentaire et de garder votre code bien visible, surtout si vous nommez vos fonctions et vos variables au moins aussi bien qu'un bachelier.