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