Comment mettre en place la fermeture automatique du menu de navigation après avoir cliqué sur un lien d'ancrage dans Elementor

Configurer un répertoire pour qu'il se ferme après avoir cliqué sur un lien d'ancrage dans Elementor (tel qu'un menu réduit ou un menu de navigation) peut être réalisé en utilisant un code personnalisé. Voici les étapes exactes :

Étape 1 : Modifier le modèle de message individuel

1. s'inscrireTableau de bord WordPress.
2. Naviguer vers Elementormodèle > Modèles enregistrés.

3. Trouvez votre modèle de message individuel et cliquez sur "Modifier avec Elementor".

Étape 2 : Ajout d'éléments HTML

1. Dans l'éditeur de modèle, trouvez la section où vous devez ajouter le code, généralement à la fin de la page.
2. Glisser-déposer un élément HTML dans le modèle.

Étape 3 : Coller le code JavaScript personnalisé

Dans l'élément HTML, collez le code JavaScript suivant :

<script
document.addEventListener('DOMContentLoaded', function() {
    var menuItems = document.querySelectorAll('.elementor-table-of-contents a') ; // remplacez .elementor-table-of-contents par votre classe de catalogue

    menuItems.forEach(function(menuItem) {
        menuItem.addEventListener('click', function() {
            var menuToggle = document.querySelector('.elementor-menu-toggle') ; // remplacez .elementor-menu-toggle par votre classe de bouton de menu à bascule

            if (menuToggle) {
                menuToggle.click() ; // déclenche la fermeture du menu
            }
        }).
    }) ;
}).
</script

explication

1. correspondance des noms de classe: :
   • .elementor-table-of-contents est le nom de classe du répertoire, vous devez le remplacer par le nom de classe réel du répertoire.
   • .elementor-menu-toggle est le nom de classe du bouton de menu à bascule, vous devez le remplacer par le nom de classe du bouton de menu à bascule.
   Vous pouvez vérifier le nom de la classe utilisée dans les outils de développement de votre navigateur (F12).
2. auditeur d'événements: :
   • document.addEventListener('DOMContentLoaded', function() { ... }) ; Assurez-vous que le code est exécuté après le chargement complet de la page.
   • menuItem.addEventListener('click', function() { ... }) ; Ajoutez un récepteur d'événement de clic pour chaque lien du catalogue.
3. Menu de déclenchement désactivé: :
   • menuToggle.click() ; Simule le fait de cliquer sur le bouton de basculement du menu, ce qui ferme le menu.

Étape 4 : Enregistrer et publier

1. Nommez votre code personnalisé (par exemple "Anchor Links Close Directory").
2. Sélectionnez "Tout le site web" comme champ d'application du code.
3. Enregistrez et publiez le code.

Résumé :

En ajoutant un code JavaScript personnalisé à un modèle d'article unique, vous pouvez mettre en œuvre une fermeture automatique du répertoire après qu'Elementor a cliqué sur un lien d'ancrage. Les étapes clés consistent à éditer le modèle, à ajouter des éléments HTML et à coller le code. Veillez à faire correspondre correctement le nom de la classe pour que la fonctionnalité fonctionne correctement. Cette configuration permet non seulement d'optimiser l'utilisation du menu de navigation, mais aussi d'améliorer l'expérience globale de l'utilisateur et l'interactivité du site. Le choix de cette méthode permet de conserver un site professionnel et fonctionnel.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.