Création d'un script de navigation dynamique pour l'état actif et les menus extensibles

Lors de la création d'une application Web dynamique, l'interface utilisateur (UI) doit offrir une expérience de navigation intuitive. Qu'il s'agisse d'un site de commerce électronique avec plusieurs catégories de produits ou d'un tableau de bord d'administration riche en contenu, le fait d'avoir des états actifs et des menus extensibles améliore la convivialité. Dans cet article de blog, nous expliquerons la création d'un script JavaScript qui met en évidence de manière dynamique la page actuelle dans la navigation et développe les sections pertinentes en fonction du chemin de l'utilisateur.

Le problème

Lorsque les utilisateurs naviguent dans des menus à plusieurs niveaux, nous souhaitons :

1. Un état actif sur le lien de la page actuelle.
2. Sections extensibles qui s'ouvrent automatiquement si l'utilisateur se trouve sur une page imbriquée dans un menu.

Regardons un exemple de structure HTML et comment ajouter du JavaScript pour rendre notre menu intelligent.

Exemple de structure de menu

Voici une structure de menu imbriquée typique. Nous travaillerons avec menu-item pour chaque élément du menu, menu-link pour les liens et menu-sub pour les sous-menus pliables.

<!-- Categories -->
<li>



<p>In this structure:</p>

<ul>
<li>Each main menu link (menu-toggle) opens a submenu when clicked.</li>
<li>The actual pages are in the submenu links (menu-link).</li>
</ul>

<h3>
  
  
  The JavaScript Solution
</h3>

<p>We’ll use JavaScript to:</p>

<ol>
<li>Identify the current page.</li>
<li>Apply an active class to the link that matches the current URL.</li>
<li>Add an open class to the parent menu if the link is inside a collapsed submenu.</li>
</ol>

<p>Here’s the JavaScript code:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    window.onload = function () {
        const currentPath = window.location.pathname; // Get the current path
        const links = document.querySelectorAll('.menu-link'); // Select all menu links

        links.forEach(function (link) {
            // Check if the link's href matches the current page's path
            if (link.getAttribute('href') === currentPath) {
                // Add 'active' class to the parent 'li' element of the link
                const menuItem = link.closest('.menu-item');
                if (menuItem) {
                    menuItem.classList.add('active');

                    // Check if the link is within a 'menu-sub', expand the parent menu
                    const parentMenu = menuItem.closest('.menu-sub');
                    if (parentMenu) {
                        // Add 'open' class to the parent 'menu-item' of the submenu
                        const parentMenuItem = parentMenu.closest('.menu-item');
                        if (parentMenuItem) {
                            parentMenuItem.classList.add('open');
                        }
                    }
                }
            }
        });
    };
</script>

Décrypter le code

1. Obtenir le chemin actuel :

   const currentPath = window.location.pathname;

Cela récupère le chemin de la page actuelle (par exemple, /inventory-issues), que nous utiliserons pour comparer avec le href de chaque lien dans le menu.

1. Sélectionnez les liens du menu :

   const links = document.querySelectorAll('.menu-link');

Nous sélectionnons tous les éléments avec le lien de menu de classe, en supposant qu'ils contiennent des liens vers différentes sections du site.

1. Correspondance à la page actuelle :

   if (link.getAttribute('href') === currentPath) {

Pour chaque lien, nous vérifions si son href correspond au currentPath. Si tel est le cas, ce lien concerne la page actuelle.

1. Définition de l'état actif :

   menuItem.classList.add('active');

Nous ajoutons une classe active à l'élément de menu le plus proche, nous permettant de styliser le lien de la page active.

1. Agrandissement du menu parent :

   const parentMenuItem = parentMenu.closest('.menu-item');
   parentMenuItem.classList.add('open');

Si le lien actif se trouve dans un sous-menu (menu-sub), cette partie du code trouve l'élément de menu parent contenant ce sous-menu et ajoute la classe ouverte, en la développant.

Ajout de CSS pour les états actifs et ouverts

Vous souhaiterez définir des styles pour les classes actives et ouvertes dans votre CSS :

<!-- Categories -->
<li>



<p>In this structure:</p>

<ul>
<li>Each main menu link (menu-toggle) opens a submenu when clicked.</li>
<li>The actual pages are in the submenu links (menu-link).</li>
</ul>

<h3>
  
  
  The JavaScript Solution
</h3>

<p>We’ll use JavaScript to:</p>

<ol>
<li>Identify the current page.</li>
<li>Apply an active class to the link that matches the current URL.</li>
<li>Add an open class to the parent menu if the link is inside a collapsed submenu.</li>
</ol>

<p>Here’s the JavaScript code:<br>
</p>

<pre class="brush:php;toolbar:false"><script>
    window.onload = function () {
        const currentPath = window.location.pathname; // Get the current path
        const links = document.querySelectorAll('.menu-link'); // Select all menu links

        links.forEach(function (link) {
            // Check if the link's href matches the current page's path
            if (link.getAttribute('href') === currentPath) {
                // Add 'active' class to the parent 'li' element of the link
                const menuItem = link.closest('.menu-item');
                if (menuItem) {
                    menuItem.classList.add('active');

                    // Check if the link is within a 'menu-sub', expand the parent menu
                    const parentMenu = menuItem.closest('.menu-sub');
                    if (parentMenu) {
                        // Add 'open' class to the parent 'menu-item' of the submenu
                        const parentMenuItem = parentMenu.closest('.menu-item');
                        if (parentMenuItem) {
                            parentMenuItem.classList.add('open');
                        }
                    }
                }
            }
        });
    };
</script>

Avantages de cette approche

• État actif automatique : pas besoin de coder en dur le lien actif sur chaque page. Ce script met à jour le lien actif de manière dynamique.
• Menus extensibles : les utilisateurs voient uniquement les sections pertinentes pour leur page actuelle, réduisant ainsi le besoin d'ouvrir manuellement les menus.
• Réutilisable : ce script est suffisamment générique pour fonctionner avec diverses structures de menus imbriquées, ce qui le rend adaptable à plusieurs types de sites.

? de Eddiegulay

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!