Apabila membina aplikasi web dinamik, antara muka pengguna (UI) perlu menawarkan pengalaman navigasi yang intuitif. Sama ada tapak e-dagang dengan berbilang kategori produk atau papan pemuka pentadbir yang mempunyai kandungan, mempunyai keadaan aktif dan menu boleh dikembangkan meningkatkan kebolehgunaan. Dalam catatan blog ini, kami akan membuat skrip JavaScript yang menyerlahkan halaman semasa secara dinamik dalam navigasi dan mengembangkan bahagian yang berkaitan berdasarkan laluan pengguna.

Masalahnya

Apabila pengguna menavigasi melalui menu berbilang lapisan, kami mahu:

1. Keadaan aktif pada pautan halaman semasa.
2. Bahagian boleh dikembangkan yang dibuka secara automatik jika pengguna berada pada halaman yang bersarang dalam menu.

Mari lihat contoh struktur HTML dan cara menambahkan JavaScript untuk menjadikan menu kami pintar.

Contoh Struktur Menu

Berikut ialah struktur menu bersarang biasa. Kami akan bekerja dengan item menu untuk setiap item dalam menu, pautan menu untuk pautan dan sub menu untuk submenu boleh lipat.

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

Memecahkan Kod

1. Dapatkan Laluan Semasa:

   const currentPath = window.location.pathname;

Ini mengambil laluan halaman semasa (cth., /inventory-issues), yang akan kami gunakan untuk membandingkan dengan href setiap pautan dalam menu.

1. Pilih Pautan Menu:

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

Kami memilih semua elemen dengan pautan menu kelas, dengan anggapan ini mengandungi pautan ke pelbagai bahagian tapak.

1. Padanan dengan Halaman Semasa:

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

Untuk setiap pautan, kami menyemak sama ada hrefnya sepadan dengan currentPath. Jika ya, pautan itu adalah untuk halaman semasa.

1. Menetapkan Keadaan Aktif:

   menuItem.classList.add('active');

Kami menambah kelas aktif pada item menu terdekat, membolehkan kami menggayakan pautan halaman aktif.

1. Meluaskan Menu Induk:

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

Jika pautan aktif berada dalam submenu (submenu), bahagian kod ini mencari item menu induk yang mengandungi submenu itu dan menambah kelas terbuka, mengembangkannya.

Menambah CSS untuk Negeri Aktif dan Terbuka

Anda perlu menentukan gaya untuk kelas aktif dan terbuka dalam CSS anda:

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

Faedah Pendekatan ini

• Keadaan Aktif Automatik: Tidak perlu mengekod keras pautan aktif pada setiap halaman. Skrip ini mengemas kini pautan aktif secara dinamik.
• Menu Boleh Dikembangkan: Pengguna hanya melihat bahagian yang berkaitan dengan halaman semasa mereka, mengurangkan keperluan untuk membuka menu secara manual.
• Boleh Guna Semula: Skrip ini cukup generik untuk berfungsi dengan pelbagai struktur menu bersarang, menjadikannya boleh disesuaikan dengan pelbagai jenis tapak.

? daripada eddiegulay

Atas ialah kandungan terperinci Mencipta Skrip Navigasi Dinamik untuk Keadaan Aktif dan Menu Boleh Dikembangkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!