ホームページ > 記事 > ウェブフロントエンド > アクティブ状態および展開可能なメニュー用の動的ナビゲーション スクリプトの作成
動的 Web アプリケーションを構築する場合、ユーザー インターフェイス (UI) は直感的なナビゲーション エクスペリエンスを提供する必要があります。複数の製品カテゴリを含む電子商取引サイトであっても、コンテンツの多い管理ダッシュボードであっても、アクティブな状態と展開可能なメニューがあると使いやすさが向上します。このブログ投稿では、ナビゲーション内の現在のページを動的に強調表示し、ユーザーのパスに基づいて関連セクションを展開する JavaScript スクリプトの作成について説明します。
ユーザーが多層メニューをナビゲートするとき、次のことが必要です。
HTML 構造の例と、JavaScript を追加してメニューをスマートにする方法を見てみましょう。
これは典型的なネストされたメニュー構造です。メニュー内の各項目には menu-item、リンクには menu-link、折りたたみ可能なサブメニューには menu-sub を使用して作業します。
<!-- 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>
?エディギュレーより
以上がアクティブ状態および展開可能なメニュー用の動的ナビゲーション スクリプトの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。