활성 상태 및 확장 가능한 메뉴에 대한 동적 탐색 스크립트 만들기

동적 웹 애플리케이션을 구축할 때 사용자 인터페이스(UI)는 직관적인 탐색 경험을 제공해야 합니다. 여러 제품 카테고리가 있는 전자 상거래 사이트이든 콘텐츠가 많은 관리 대시보드이든 활성 상태와 확장 가능한 메뉴가 있으면 유용성이 향상됩니다. 이 블로그 게시물에서는 탐색에서 현재 페이지를 동적으로 강조 표시하고 사용자 경로에 따라 관련 섹션을 확장하는 JavaScript 스크립트를 만드는 방법을 살펴보겠습니다.

문제

사용자가 다층 메뉴를 탐색할 때 원하는 것은 다음과 같습니다.

1. 현재 페이지 링크의 활성 상태
2. 사용자가 메뉴 내에 중첩된 페이지에 있는 경우 자동으로 열리는 확장 가능한 섹션

예제 HTML 구조와 JavaScript를 추가하여 메뉴를 스마트하게 만드는 방법을 살펴보겠습니다.

예제 메뉴 구조

다음은 일반적인 중첩 메뉴 구조입니다. 메뉴의 각 항목에 대한 메뉴 항목, 링크에 대한 메뉴 링크, 접을 수 있는 하위 메뉴에 대한 메뉴 하위를 사용하여 작업할 것입니다.

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

이 접근 방식의 이점

• 자동 활성 상태: 모든 페이지의 활성 링크를 하드코딩할 필요가 없습니다. 이 스크립트는 활성 링크를 동적으로 업데이트합니다.
• 확장 가능한 메뉴: 사용자는 현재 페이지와 관련된 섹션만 볼 수 있으므로 메뉴를 수동으로 열 필요가 줄어듭니다.
• 재사용 가능: 이 스크립트는 다양한 중첩 메뉴 구조에서 작동할 만큼 일반적이므로 여러 유형의 사이트에 적용할 수 있습니다.

? eddiegulay에서

위 내용은 활성 상태 및 확장 가능한 메뉴에 대한 동적 탐색 스크립트 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!