動(dòng)的 Web アプリケーションを構(gòu)築する場(chǎng)合、ユーザー インターフェイス (UI) は直感的なナビゲーション エクスペリエンスを提供する必要があります。複數(shù)の製品カテゴリを含む電子商取引サイトであっても、コンテンツの多い管理ダッシュボードであっても、アクティブな狀態(tài)と展開(kāi)可能なメニューがあると使いやすさが向上します。このブログ投稿では、ナビゲーション內(nèi)の現(xiàn)在のページを動(dòng)的に強(qiáng)調(diào)表示し、ユーザーのパスに基づいて関連セクションを展開(kāi)する JavaScript スクリプトの作成について説明します。

問(wèn)題

ユーザーが多層メニューをナビゲートするとき、次のことが必要です。

1. 現(xiàn)在のページのリンクの アクティブ狀態(tài)。
2. 展開(kāi)可能なセクション。ユーザーがメニュー內(nèi)にネストされたページにいる場(chǎng)合に自動(dòng)的に開(kāi)きます。

HTML 構(gòu)造の例と、JavaScript を追加してメニューをスマートにする方法を見(jiàn)てみましょう。

メニュー構(gòu)造例

これは典型的なネストされたメニュー構(gòu)造です。メニュー內(nèi)の各項(xiàng)目には menu-item、リンクには menu-link、折りたたみ可能なサブメニューには menu-sub を使用して作業(yè)します。

<!-- 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. 現(xiàn)在のパスを取得:

   const currentPath = window.location.pathname;

これにより、現(xiàn)在のページのパス (/inventory-issues など) が取得されます。これを使用して、メニュー內(nèi)の各リンクの href と比較します。

1. メニューリンクを選択:

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

クラスのメニューリンクを持つすべての要素を選択します。これらの要素にはサイトのさまざまなセクションへのリンクが含まれていると仮定します。

1. 現(xiàn)在のページと一致します:

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

リンクごとに、その href が currentPath と一致するかどうかを確認(rèn)します。存在する場(chǎng)合、そのリンクは現(xiàn)在のページに対するものです。

1. アクティブ狀態(tài)の設(shè)定:

   menuItem.classList.add('active');

アクティブなクラスを最も近いメニュー項(xiàng)目に追加し、アクティブなページのリンクのスタイルを設(shè)定できるようにします。

1. 親メニューの展開(kāi):

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

アクティブなリンクがサブメニュー (menu-sub) 內(nèi)にある場(chǎng)合、コードのこの部分はそのサブメニューを含む親メニュー項(xiàng)目を検索し、オープン クラスを追加して展開(kāi)します。

アクティブ狀態(tài)とオープン狀態(tài)の CSS の追加

CSS でアクティブなクラスと開(kāi)いているクラスのスタイルを定義する必要があります。

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

このアプローチの利點(diǎn)

• 自動(dòng)アクティブ狀態(tài): すべてのページでアクティブ リンクをハードコーディングする必要はありません。このスクリプトはアクティブなリンクを動(dòng)的に更新します。
• 展開(kāi)可能なメニュー: ユーザーには現(xiàn)在のページに関連するセクションのみが表示され、手動(dòng)でメニューを開(kāi)く必要が減ります。
• 再利用可能: このスクリプトは、さまざまなネストされたメニュー構(gòu)造で動(dòng)作するのに十分な汎用性を備えているため、複數(shù)のタイプのサイトに適応できます。

?エディギュレーより

以上がアクティブ狀態(tài)および展開(kāi)可能なメニュー用の動(dòng)的ナビゲーション スクリプトの作成の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。