동적 웹 애플리케이션을 구축할 때 사용자 인터페이스(UI)는 직관적인 탐색 경험을 제공해야 합니다. 여러 제품 카테고리가 있는 전자 상거래 사이트이든 콘텐츠가 많은 관리 대시보드이든 활성 상태와 확장 가능한 메뉴가 있으면 유용성이 향상됩니다. 이 블로그 게시물에서는 탐색에서 현재 페이지를 동적으로 강조 표시하고 사용자 경로에 따라 관련 섹션을 확장하는 JavaScript 스크립트를 만드는 방법을 살펴보겠습니다.
사용자가 다층 메뉴를 탐색할 때 원하는 것은 다음과 같습니다.
예제 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>
const currentPath = window.location.pathname;
현재 페이지의 경로(예: /inventory-issues)를 가져와서 메뉴에 있는 각 링크의 href와 비교하는 데 사용할 것입니다.
const links = document.querySelectorAll('.menu-link');
사이트의 다양한 섹션에 대한 링크가 포함되어 있다는 가정 하에 수업 메뉴 링크로 모든 요소를 선택합니다.
if (link.getAttribute('href') === currentPath) {
각 링크에 대해 해당 href가 currentPath와 일치하는지 확인합니다. 그렇다면 해당 링크는 현재 페이지에 대한 것입니다.
menuItem.classList.add('active');
가장 가까운 메뉴 항목에 활성 클래스를 추가하여 활성 페이지 링크의 스타일을 지정할 수 있습니다.
const parentMenuItem = parentMenu.closest('.menu-item'); parentMenuItem.classList.add('open');
활성 링크가 하위 메뉴(menu-sub) 내에 있는 경우 코드의 이 부분은 해당 하위 메뉴가 포함된 상위 메뉴 항목을 찾아 공개 클래스를 추가하여 확장합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!