php Dropdownmenu javascript

[Akushi 75]

???????? ???????

 

(function() {
    function openDropdown(event, width){
        event.target.parentNode.classList.add("toggle");
        event.target.parentNode.lastElementChild.setAttribute('style', 'width:' + width + 'px');
    }

    function resetDropdown(){
        let element = document.querySelector(".dropdown.toggle");
        if(element) {
            element.classList.remove("toggle");
        }
    }

    function documentHandler(){
        resetDropdown();
        document.removeEventListener('click', documentHandler , false);
    }

    document.addEventListener('DOMContentLoaded', function () {
        let elements = document.querySelectorAll('.dropdown-toggle');
        if(elements.length > 0) {
            elements.forEach(el => {
                el.addEventListener('click', function (e) {
                    let isActive = e.target.parentNode.classList.contains("toggle");
                    resetDropdown();
                    if (isActive) {
                        return;
                    }
                    e.stopPropagation();
                    e.preventDefault();

                    openDropdown(e, this.offsetWidth);
                    document.addEventListener('click', documentHandler, false);
                }, false);
            });
        }
    });
})();

 

Pour faire simple il va cherche dans votre html tous ce qui correspond au dropdown-toggle il vérifié si il y'en n'a plus de 0 si ces ok il pour chaque " .dropdown-toggle " il ajoute un événement que quand ont clique sa effectue une action.

Le isActive vérifie si le menu n'est pas déjà dérouler si il l'ai il le referme le reste du script ouvre le menu et permet de le refermer et d'ouvrir directement l'autre quand ont clique.

 

Passons au HTML:

<li class="dropdown">
  <a class="nav-link dropdown-toggle">Menu déroulant</a>
  <ul class="dropdown-content">
    <li><a class="nav-items" href="#">Déroulant 1</a></li>
    <li><a class="nav-items" href="#">Déroulant 2</a></li>
    <li><a class="nav-items" href="#">Déroulant 3</a></li>
  </ul>
</li>

 

A noté que les class nav-link et nav-items ne sont pas obligatoire.

 

J'espère que cette mini release vous auras plu.

 

Pour toutes autres questions ou aide contactez moi sur discord : Clayton#6933

[Tig3r 36]

Merci pour le partage

[Supra 10]

Merci à toi