为活动状态和可扩展菜单创建动态导航脚本

构建动态 Web 应用程序时，用户界面 (UI) 需要提供直观的导航体验。无论是具有多个产品类别的电子商务网站还是内容丰富的管理仪表板，拥有活动状态和可扩展菜单都可以增强可用性。在这篇博文中，我们将逐步创建一个 JavaScript 脚本，该脚本动态突出显示导航中的当前页面，并根据用户的路径展开相关部分。

问题

当用户浏览多层菜单时，我们希望：

1. 当前页面链接上的活动状态。
2. 可扩展部分，如果用户位于嵌套在菜单中的页面上，则会自动打开。

让我们看一个示例 HTML 结构以及如何添加 JavaScript 以使我们的菜单变得智能。

菜单结构示例

这是一个典型的嵌套菜单结构。我们将为菜单中的每个项目使用 menu-item，为链接使用 menu-link，为可折叠子菜单使用 menu-sub。

<!-- 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>

分解代码

1. 获取当前路径：

   const currentPath = window.location.pathname;

这会获取当前页面的路径（例如，/inventory-issues），我们将用它来与菜单中每个链接的 href 进行比较。

1. 选择菜单链接：

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

我们选择具有菜单链接类的所有元素，假设这些元素包含指向网站各个部分的链接。

1. 匹配当前页面：

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

对于每个链接，我们检查其 href 是否与 currentPath 匹配。如果是，则该链接适用于当前页面。

1. 设置活动状态：

   menuItem.classList.add('active');

我们向最近的菜单项添加一个活动类，允许我们设置活动页面链接的样式。

1. 展开父菜单：

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

如果活动链接位于子菜单 (menu-sub) 内，这部分代码将查找包含该子菜单的父菜单项并添加开放类，将其展开。

为活动和开放状态添加 CSS

您需要为 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>

这种方法的好处

• 自动活动状态：无需在每个页面上对活动链接进行硬编码。该脚本动态更新活动链接。
• 可扩展菜单：用户只能看到与当前页面相关的部分，减少手动打开菜单的需要。
• 可重用：该脚本足够通用，可以与各种嵌套菜单结构一起使用，使其适应多种类型的网站。

？来自埃迪古莱

以上是为活动状态和可扩展菜单创建动态导航脚本的详细内容。更多信息请关注PHP中文网其他相关文章！