{"id":82792,"date":"2024-11-06T17:52:31","date_gmt":"2024-11-06T14:22:31","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf\/"},"modified":"2024-11-06T17:52:31","modified_gmt":"2024-11-06T14:22:31","slug":"creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf\/","title":{"rendered":"\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0646\u0627\u0648\u0628\u0631\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644 \u0648 \u0645\u0646\u0648\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0631\u062a\u0642\u0627"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u067e\u0648\u06cc\u0627\u060c \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0635\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f. \u0686\u0647 \u06cc\u06a9 \u0633\u0627\u06cc\u062a \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9 \u0628\u0627 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u062d\u0635\u0648\u0644 \u0628\u0627\u0634\u062f \u06cc\u0627 \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0631 \u0645\u062d\u062a\u0648\u0627\u060c \u062f\u0627\u0634\u062a\u0646 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0641\u0639\u0627\u0644 \u0648 \u0645\u0646\u0648\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0631\u062a\u0642\u0627\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0645\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0633\u06cc\u0631 \u06a9\u0627\u0631\u0628\u0631 \u06af\u0633\u062a\u0631\u0634 \u0645\u06cc \u062f\u0647\u062f\u060c \u0642\u062f\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06af\u0630\u0627\u0634\u062a.<\/p>\n<p>  \u0645\u0634\u06a9\u0644<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u0645\u0646\u0648\u0647\u0627\u06cc \u0686\u0646\u062f \u0644\u0627\u06cc\u0647 \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645:<\/p>\n<p>\u06cc\u06a9 \u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644 \u062f\u0631 \u0644\u06cc\u0646\u06a9 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc<\/p>\n<p>\u0628\u062e\u0634 \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u06af\u0633\u062a\u0631\u0634 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062a\u0648 \u062f\u0631 \u062a\u0648 \u062f\u0631 \u06cc\u06a9 \u0645\u0646\u0648 \u0628\u0627\u0634\u062f\u060c \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 HTML \u0648 \u0646\u062d\u0648\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f \u06a9\u0631\u062f\u0646 \u0645\u0646\u0648 \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>  \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0646\u0648<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0646\u0648\u06cc \u062a\u0648\u062f\u0631\u062a\u0648\u06cc \u0645\u0639\u0645\u0648\u0644\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0645\u0627 \u0628\u0627 \u0647\u0645 \u06a9\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f menu-item \u0628\u0631\u0627\u06cc \u0647\u0631 \u0622\u06cc\u062a\u0645 \u062f\u0631 \u0645\u0646\u0648\u060c menu-link \u0628\u0631\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u060c \u0648 menu-sub \u0628\u0631\u0627\u06cc \u0632\u06cc\u0631 \u0645\u0646\u0648\u0647\u0627\u06cc \u062c\u0645\u0639 \u0634\u0648\u0646\u062f\u0647<\/p>\n<p>&lt;!&#8211; Categories &#8211;&gt;<br \/>\n&lt;li class=&#8221;menu-item&#8221;&gt;<br \/>\n    &lt;a href=&#8221;javascript:void(0);&#8221; class=&#8221;menu-link menu-toggle&#8221;&gt;<br \/>\n        &lt;i class=&#8217;menu-icon tf-icons bx bx-category&#8217;&gt;&lt;\/i&gt;<br \/>\n        &lt;div class=&#8221;text-truncate&#8221;&gt;Product Categories&lt;\/div&gt;<br \/>\n    &lt;\/a&gt;<br \/>\n    &lt;ul class=&#8221;menu-sub&#8221;&gt;<br \/>\n        &lt;li class=&#8221;menu-item&#8221;&gt;<br \/>\n            &lt;a href=&#8221;\/category-list&#8221; class=&#8221;menu-link&#8221;&gt;Category List&lt;\/a&gt;<br \/>\n        &lt;\/li&gt;<br \/>\n    &lt;\/ul&gt;<br \/>\n&lt;\/li&gt;<\/p>\n<p>&lt;!&#8211; Inventory &#8211;&gt;<br \/>\n&lt;li class=&#8221;menu-item&#8221;&gt;<br \/>\n    &lt;a href=&#8221;javascript:void(0);&#8221; class=&#8221;menu-link menu-toggle&#8221;&gt;<br \/>\n        &lt;i class=&#8217;menu-icon tf-icons bx bx-library&#8217;&gt;&lt;\/i&gt;<br \/>\n        &lt;div class=&#8221;text-truncate&#8221;&gt;Inventory Issues&lt;\/div&gt;<br \/>\n    &lt;\/a&gt;<br \/>\n    &lt;ul class=&#8221;menu-sub&#8221;&gt;<br \/>\n        &lt;li class=&#8221;menu-item&#8221;&gt;<br \/>\n            &lt;a href=&#8221;\/inventory-issues&#8221; class=&#8221;menu-link&#8221;&gt;Recorded Issues&lt;\/a&gt;<br \/>\n        &lt;\/li&gt;<br \/>\n        &lt;li class=&#8221;menu-item&#8221;&gt;<br \/>\n            &lt;a href=&#8221;\/register-issue&#8221; class=&#8221;menu-link&#8221;&gt;Register Issue&lt;\/a&gt;<br \/>\n        &lt;\/li&gt;<br \/>\n    &lt;\/ul&gt;<br \/>\n&lt;\/li&gt;<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631:<\/p>\n<p>\u067e\u06cc\u0648\u0646\u062f \u0647\u0631 \u0645\u0646\u0648\u06cc \u0627\u0635\u0644\u06cc (menu-toggle) \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0641\u0631\u0639\u06cc \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.<br \/>\n\u0635\u0641\u062d\u0627\u062a \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 \u0644\u06cc\u0646\u06a9 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0645\u0646\u0648 \u0647\u0633\u062a\u0646\u062f (menu-link).<\/p>\n<p>  \u0631\u0627\u0647 \u062d\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/p>\n<p>\u0645\u0627 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<p>\u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u06cc\u062f<br \/>\n\u06cc\u06a9 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f active \u06a9\u0644\u0627\u0633 \u0628\u0647 \u067e\u06cc\u0648\u0646\u062f\u06cc \u06a9\u0647 \u0628\u0627 URL \u0641\u0639\u0644\u06cc \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.<br \/>\n\u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f open \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0645\u0646\u0648\u06cc \u0648\u0627\u0644\u062f \u0627\u06af\u0631 \u067e\u06cc\u0648\u0646\u062f \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0632\u06cc\u0631 \u0645\u0646\u0648\u06cc \u062c\u0645\u0639 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a:<\/p>\n<p>&lt;script&gt;<br \/>\n    window.onload = function () {<br \/>\n        const currentPath = window.location.pathname; \/\/ Get the current path<br \/>\n        const links = document.querySelectorAll(&#8216;.menu-link&#8217;); \/\/ Select all menu links<\/p>\n<p>        links.forEach(function (link) {<br \/>\n            \/\/ Check if the link&#8217;s href matches the current page&#8217;s path<br \/>\n            if (link.getAttribute(&#8216;href&#8217;) === currentPath) {<br \/>\n                \/\/ Add &#8216;active&#8217; class to the parent &#8216;li&#8217; element of the link<br \/>\n                const menuItem = link.closest(&#8216;.menu-item&#8217;);<br \/>\n                if (menuItem) {<br \/>\n                    menuItem.classList.add(&#8216;active&#8217;);<\/p>\n<p>                    \/\/ Check if the link is within a &#8216;menu-sub&#8217;, expand the parent menu<br \/>\n                    const parentMenu = menuItem.closest(&#8216;.menu-sub&#8217;);<br \/>\n                    if (parentMenu) {<br \/>\n                        \/\/ Add &#8216;open&#8217; class to the parent &#8216;menu-item&#8217; of the submenu<br \/>\n                        const parentMenuItem = parentMenu.closest(&#8216;.menu-item&#8217;);<br \/>\n                        if (parentMenuItem) {<br \/>\n                            parentMenuItem.classList.add(&#8216;open&#8217;);<br \/>\n                        }<br \/>\n                    }<br \/>\n                }<br \/>\n            }<br \/>\n        });<br \/>\n    };<br \/>\n&lt;\/script&gt;<\/p>\n<p>  \u0634\u06a9\u0633\u062a\u0646 \u06a9\u062f<\/p>\n<p>\u0645\u0633\u06cc\u0631 \u0641\u0639\u0644\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f:<\/p>\n<p>   const currentPath = window.location.pathname;<\/p>\n<p>\u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \/inventory-issues) \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f href \u0627\u0632 \u0647\u0631 \u067e\u06cc\u0648\u0646\u062f \u062f\u0631 \u0645\u0646\u0648<\/p>\n<p>Menu Links \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>   const links = document.querySelectorAll(&#8216;.menu-link&#8217;);<\/p>\n<p>\u0647\u0645\u0647 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u0644\u0627\u0633 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u0645 menu-link\u060c \u0628\u0627 \u0641\u0631\u0636 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646\u0647\u0627 \u062d\u0627\u0648\u06cc \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0628\u0647 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0633\u0627\u06cc\u062a \u0647\u0633\u062a\u0646\u062f.<\/p>\n<p>\u0645\u0637\u0627\u0628\u0642\u062a \u0628\u0627 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc:<\/p>\n<p>   if (link.getAttribute(&#8216;href&#8217;) === currentPath) {<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0647\u0631 \u067e\u06cc\u0648\u0646\u062f\u060c \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06cc\u0627 \u062e\u06cc\u0631 href \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f currentPath. \u0627\u06af\u0631 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0628\u0627\u0634\u062f\u060c \u0622\u0646 \u067e\u06cc\u0648\u0646\u062f \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u0648\u0636\u0639\u06cc\u062a \u0641\u0639\u0627\u0644:<\/p>\n<p>   menuItem.classList.add(&#8216;active&#8217;);<\/p>\n<p>\u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 active \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0646\u0632\u062f\u06cc\u06a9 \u062a\u0631\u06cc\u0646 menu-item\u060c \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0647 \u067e\u06cc\u0648\u0646\u062f \u0635\u0641\u062d\u0647 \u0641\u0639\u0627\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc\u0645.<\/p>\n<p>\u06af\u0633\u062a\u0631\u0634 \u0645\u0646\u0648\u06cc \u0648\u0627\u0644\u062f\u06cc\u0646:<\/p>\n<p>   const parentMenuItem = parentMenu.closest(&#8216;.menu-item&#8217;);<br \/>\n   parentMenuItem.classList.add(&#8216;open&#8217;);<\/p>\n<p>\u0627\u06af\u0631 \u067e\u06cc\u0648\u0646\u062f \u0641\u0639\u0627\u0644 \u062f\u0631 \u06cc\u06a9 \u0632\u06cc\u0631 \u0645\u0646\u0648 \u0628\u0627\u0634\u062f (menu-sub)\u060c \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0632 \u06a9\u062f \u0648\u0627\u0644\u062f \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f menu-item \u062d\u0627\u0648\u06cc \u0622\u0646 \u0632\u06cc\u0631 \u0645\u0646\u0648 \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 open \u06a9\u0644\u0627\u0633\u060c \u0622\u0646 \u0631\u0627 \u06af\u0633\u062a\u0631\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 CSS \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0641\u0639\u0627\u0644 \u0648 \u0628\u0627\u0632<\/p>\n<p>\u0634\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0633\u0628\u06a9 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f active \u0648 open \u06a9\u0644\u0627\u0633 \u0647\u0627 \u062f\u0631 CSS \u0634\u0645\u0627:<\/p>\n<p>\/* Highlight the active link *\/<br \/>\n.menu-item.active &gt; .menu-link {<br \/>\n    font-weight: bold;<br \/>\n    color: #007bff;<br \/>\n}<\/p>\n<p>\/* Display the open submenu *\/<br \/>\n.menu-item.open &gt; .menu-sub {<br \/>\n    display: block; \/* or any style that reveals the submenu *\/<br \/>\n}<\/p>\n<p>  \u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f<\/p>\n<p>\u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644 \u062e\u0648\u062f\u06a9\u0627\u0631: \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0647\u0627\u0631\u062f\u06a9\u062f \u06a9\u0631\u062f\u0646 \u0644\u06cc\u0646\u06a9 \u0641\u0639\u0627\u0644 \u062f\u0631 \u0647\u0631 \u0635\u0641\u062d\u0647. \u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0644\u06cc\u0646\u06a9 \u0641\u0639\u0627\u0644 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0646\u0648\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0631\u062a\u0642\u0627: \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0641\u0642\u0637 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u06cc \u0628\u06cc\u0646\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062f\u0633\u062a\u06cc \u0645\u0646\u0648\u0647\u0627 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f: \u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc \u0639\u0645\u0648\u0645\u06cc \u0627\u0633\u062a \u062a\u0627 \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u0646\u0648\u06cc \u062a\u0648\u062f\u0631\u062a\u0648 \u06a9\u0627\u0631 \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641 \u0633\u0627\u06cc\u062a \u0647\u0627 \u0633\u0627\u0632\u06af\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\ud83d\udc96 \u0627\u0632 eddiegulay<\/p>\n<p>\u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u067e\u0648\u06cc\u0627\u060c \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0635\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f. \u0686\u0647 \u06cc\u06a9 \u0633\u0627\u06cc\u062a \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9 \u0628\u0627 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u062d\u0635\u0648\u0644 \u0628\u0627\u0634\u062f \u06cc\u0627 \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0631 \u0645\u062d\u062a\u0648\u0627\u060c \u062f\u0627\u0634\u062a\u0646 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0641\u0639\u0627\u0644 \u0648 \u0645\u0646\u0648\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0631\u062a\u0642\u0627\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0645\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u062f\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0633\u06cc\u0631 \u06a9\u0627\u0631\u0628\u0631 \u06af\u0633\u062a\u0631\u0634 \u0645\u06cc \u062f\u0647\u062f\u060c \u0642\u062f\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06af\u0630\u0627\u0634\u062a.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf\/#%D9%85%D8%B4%DA%A9%D9%84\" >\u0645\u0634\u06a9\u0644<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf\/#%D9%86%D9%85%D9%88%D9%86%D9%87_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%85%D9%86%D9%88\" >\u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0646\u0648<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf\/#%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\" >\u0631\u0627\u0647 \u062d\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf\/#%D8%B4%DA%A9%D8%B3%D8%AA%D9%86_%DA%A9%D8%AF\" >\u0634\u06a9\u0633\u062a\u0646 \u06a9\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_CSS_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AD%D8%A7%D9%84%D8%AA_%D9%87%D8%A7%DB%8C_%D9%81%D8%B9%D8%A7%D9%84_%D9%88_%D8%A8%D8%A7%D8%B2\" >\u0627\u0641\u0632\u0648\u062f\u0646 CSS \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0641\u0639\u0627\u0644 \u0648 \u0628\u0627\u0632<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/creating-a-dynamic-navigation-script-for-active-state-and-expandable-menus-3ilf\/#%D9%85%D8%B2%D8%A7%DB%8C%D8%A7%DB%8C_%D8%A7%DB%8C%D9%86_%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF\" >\u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f<\/a><\/li><\/ul><\/nav><\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%B4%DA%A9%D9%84\"><\/span>\n<p>  \u0645\u0634\u06a9\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631 \u0645\u0646\u0648\u0647\u0627\u06cc \u0686\u0646\u062f \u0644\u0627\u06cc\u0647 \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u0646\u062f\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645:<\/p>\n<ol>\n<li>\n<strong>\u06cc\u06a9 \u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644<\/strong> \u062f\u0631 \u0644\u06cc\u0646\u06a9 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc<\/li>\n<li>\n<strong>\u0628\u062e\u0634 \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u06af\u0633\u062a\u0631\u0634<\/strong> \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062a\u0648 \u062f\u0631 \u062a\u0648 \u062f\u0631 \u06cc\u06a9 \u0645\u0646\u0648 \u0628\u0627\u0634\u062f\u060c \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ol>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 HTML \u0648 \u0646\u062d\u0648\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f \u06a9\u0631\u062f\u0646 \u0645\u0646\u0648 \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D9%85%D9%88%D9%86%D9%87_%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%85%D9%86%D9%88\"><\/span>\n<p>  \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0646\u0648<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u0646\u0648\u06cc \u062a\u0648\u062f\u0631\u062a\u0648\u06cc \u0645\u0639\u0645\u0648\u0644\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0645\u0627 \u0628\u0627 \u0647\u0645 \u06a9\u0627\u0631 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>menu-item<\/code> \u0628\u0631\u0627\u06cc \u0647\u0631 \u0622\u06cc\u062a\u0645 \u062f\u0631 \u0645\u0646\u0648\u060c <code>menu-link<\/code> \u0628\u0631\u0627\u06cc \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u060c \u0648 <code>menu-sub<\/code> \u0628\u0631\u0627\u06cc \u0632\u06cc\u0631 \u0645\u0646\u0648\u0647\u0627\u06cc \u062c\u0645\u0639 \u0634\u0648\u0646\u062f\u0647\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\">&lt;!-- Categories --&gt;<\/span>\n<span class=\"nt\">&lt;li<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-item\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"javascript:void(0);\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-link menu-toggle\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;i<\/span> <span class=\"na\">class=<\/span><span class=\"s\">'menu-icon tf-icons bx bx-category'<\/span><span class=\"nt\">&gt;&lt;\/i&gt;<\/span>\n        <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"text-truncate\"<\/span><span class=\"nt\">&gt;<\/span>Product Categories<span class=\"nt\">&lt;\/div&gt;<\/span>\n    <span class=\"nt\">&lt;\/a&gt;<\/span>\n    <span class=\"nt\">&lt;ul<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-sub\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;li<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-item\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"\/category-list\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-link\"<\/span><span class=\"nt\">&gt;<\/span>Category List<span class=\"nt\">&lt;\/a&gt;<\/span>\n        <span class=\"nt\">&lt;\/li&gt;<\/span>\n    <span class=\"nt\">&lt;\/ul&gt;<\/span>\n<span class=\"nt\">&lt;\/li&gt;<\/span>\n\n<span class=\"c\">&lt;!-- Inventory --&gt;<\/span>\n<span class=\"nt\">&lt;li<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-item\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"javascript:void(0);\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-link menu-toggle\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;i<\/span> <span class=\"na\">class=<\/span><span class=\"s\">'menu-icon tf-icons bx bx-library'<\/span><span class=\"nt\">&gt;&lt;\/i&gt;<\/span>\n        <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"text-truncate\"<\/span><span class=\"nt\">&gt;<\/span>Inventory Issues<span class=\"nt\">&lt;\/div&gt;<\/span>\n    <span class=\"nt\">&lt;\/a&gt;<\/span>\n    <span class=\"nt\">&lt;ul<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-sub\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;li<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-item\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"\/inventory-issues\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-link\"<\/span><span class=\"nt\">&gt;<\/span>Recorded Issues<span class=\"nt\">&lt;\/a&gt;<\/span>\n        <span class=\"nt\">&lt;\/li&gt;<\/span>\n        <span class=\"nt\">&lt;li<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-item\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"\/register-issue\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"menu-link\"<\/span><span class=\"nt\">&gt;<\/span>Register Issue<span class=\"nt\">&lt;\/a&gt;<\/span>\n        <span class=\"nt\">&lt;\/li&gt;<\/span>\n    <span class=\"nt\">&lt;\/ul&gt;<\/span>\n<span class=\"nt\">&lt;\/li&gt;<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0633\u0627\u062e\u062a\u0627\u0631:<\/p>\n<ul>\n<li>\u067e\u06cc\u0648\u0646\u062f \u0647\u0631 \u0645\u0646\u0648\u06cc \u0627\u0635\u0644\u06cc (<code>menu-toggle<\/code>) \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0645\u0646\u0648\u06cc \u0641\u0631\u0639\u06cc \u0628\u0627\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0635\u0641\u062d\u0627\u062a \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 \u0644\u06cc\u0646\u06a9 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0645\u0646\u0648 \u0647\u0633\u062a\u0646\u062f (<code>menu-link<\/code>).<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%AD%D9%84_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA\"><\/span>\n<p>  \u0631\u0627\u0647 \u062d\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u0627 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<ol>\n<li>\u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u06cc\u06a9 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0646\u06cc\u062f <code>active<\/code> \u06a9\u0644\u0627\u0633 \u0628\u0647 \u067e\u06cc\u0648\u0646\u062f\u06cc \u06a9\u0647 \u0628\u0627 URL \u0641\u0639\u0644\u06cc \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.<\/li>\n<li>\u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>open<\/code> \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0645\u0646\u0648\u06cc \u0648\u0627\u0644\u062f \u0627\u06af\u0631 \u067e\u06cc\u0648\u0646\u062f \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0632\u06cc\u0631 \u0645\u0646\u0648\u06cc \u062c\u0645\u0639 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f.<\/li>\n<\/ol>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a:\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;script&gt;<\/span>\n    <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">onload<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">function <\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">currentPath<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">pathname<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Get the current path<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">links<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.menu-link<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Select all menu links<\/span>\n\n        <span class=\"nx\">links<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"nf\">function <\/span><span class=\"p\">(<\/span><span class=\"nx\">link<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ Check if the link's href matches the current page's path<\/span>\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">link<\/span><span class=\"p\">.<\/span><span class=\"nf\">getAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">href<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">currentPath<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                <span class=\"c1\">\/\/ Add 'active' class to the parent 'li' element of the link<\/span>\n                <span class=\"kd\">const<\/span> <span class=\"nx\">menuItem<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">link<\/span><span class=\"p\">.<\/span><span class=\"nf\">closest<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.menu-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n                <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">menuItem<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                    <span class=\"nx\">menuItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">active<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n                    <span class=\"c1\">\/\/ Check if the link is within a 'menu-sub', expand the parent menu<\/span>\n                    <span class=\"kd\">const<\/span> <span class=\"nx\">parentMenu<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">menuItem<\/span><span class=\"p\">.<\/span><span class=\"nf\">closest<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.menu-sub<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n                    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">parentMenu<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                        <span class=\"c1\">\/\/ Add 'open' class to the parent 'menu-item' of the submenu<\/span>\n                        <span class=\"kd\">const<\/span> <span class=\"nx\">parentMenuItem<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">parentMenu<\/span><span class=\"p\">.<\/span><span class=\"nf\">closest<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.menu-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n                        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">parentMenuItem<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n                            <span class=\"nx\">parentMenuItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n                        <span class=\"p\">}<\/span>\n                    <span class=\"p\">}<\/span>\n                <span class=\"p\">}<\/span>\n            <span class=\"p\">}<\/span>\n        <span class=\"p\">});<\/span>\n    <span class=\"p\">};<\/span>\n<span class=\"nt\">&lt;\/script&gt;<\/span>\n<\/code><\/pre>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B4%DA%A9%D8%B3%D8%AA%D9%86_%DA%A9%D8%AF\"><\/span>\n<p>  \u0634\u06a9\u0633\u062a\u0646 \u06a9\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\n<strong>\u0645\u0633\u06cc\u0631 \u0641\u0639\u0644\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>   <span class=\"kd\">const<\/span> <span class=\"nx\">currentPath<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">location<\/span><span class=\"p\">.<\/span><span class=\"nx\">pathname<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f (\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c <code>\/inventory-issues<\/code>) \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>href<\/code> \u0627\u0632 \u0647\u0631 \u067e\u06cc\u0648\u0646\u062f \u062f\u0631 \u0645\u0646\u0648<\/p>\n<ol>\n<li>\n<strong>Menu Links \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>   <span class=\"kd\">const<\/span> <span class=\"nx\">links<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelectorAll<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.menu-link<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0647\u0645\u0647 \u0639\u0646\u0627\u0635\u0631 \u0631\u0627 \u0628\u0627 \u06a9\u0644\u0627\u0633 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>menu-link<\/code>\u060c \u0628\u0627 \u0641\u0631\u0636 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646\u0647\u0627 \u062d\u0627\u0648\u06cc \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0628\u0647 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0633\u0627\u06cc\u062a \u0647\u0633\u062a\u0646\u062f.<\/p>\n<ol>\n<li>\n<strong>\u0645\u0637\u0627\u0628\u0642\u062a \u0628\u0627 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>   <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">link<\/span><span class=\"p\">.<\/span><span class=\"nf\">getAttribute<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">href<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">currentPath<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0628\u0631\u0627\u06cc \u0647\u0631 \u067e\u06cc\u0648\u0646\u062f\u060c \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06cc\u0627 \u062e\u06cc\u0631 <code>href<\/code> \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f <code>currentPath<\/code>. \u0627\u06af\u0631 \u0627\u06cc\u0646\u0637\u0648\u0631 \u0628\u0627\u0634\u062f\u060c \u0622\u0646 \u067e\u06cc\u0648\u0646\u062f \u0628\u0631\u0627\u06cc \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u0627\u0633\u062a.<\/p>\n<ol>\n<li>\n<strong>\u062a\u0646\u0638\u06cc\u0645 \u0648\u0636\u0639\u06cc\u062a \u0641\u0639\u0627\u0644<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>   <span class=\"nx\">menuItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">active<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u06cc\u06a9 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>active<\/code> \u06a9\u0644\u0627\u0633 \u0628\u0647 \u0646\u0632\u062f\u06cc\u06a9 \u062a\u0631\u06cc\u0646 <code>menu-item<\/code>\u060c \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0647 \u067e\u06cc\u0648\u0646\u062f \u0635\u0641\u062d\u0647 \u0641\u0639\u0627\u0644 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc\u0645.<\/p>\n<ol>\n<li>\n<strong>\u06af\u0633\u062a\u0631\u0634 \u0645\u0646\u0648\u06cc \u0648\u0627\u0644\u062f\u06cc\u0646<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>   <span class=\"kd\">const<\/span> <span class=\"nx\">parentMenuItem<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">parentMenu<\/span><span class=\"p\">.<\/span><span class=\"nf\">closest<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.menu-item<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n   <span class=\"nx\">parentMenuItem<\/span><span class=\"p\">.<\/span><span class=\"nx\">classList<\/span><span class=\"p\">.<\/span><span class=\"nf\">add<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">open<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<\/code><\/pre>\n<\/div>\n<p>\u0627\u06af\u0631 \u067e\u06cc\u0648\u0646\u062f \u0641\u0639\u0627\u0644 \u062f\u0631 \u06cc\u06a9 \u0632\u06cc\u0631 \u0645\u0646\u0648 \u0628\u0627\u0634\u062f (<code>menu-sub<\/code>)\u060c \u0627\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0632 \u06a9\u062f \u0648\u0627\u0644\u062f \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f <code>menu-item<\/code> \u062d\u0627\u0648\u06cc \u0622\u0646 \u0632\u06cc\u0631 \u0645\u0646\u0648 \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 <code>open<\/code> \u06a9\u0644\u0627\u0633\u060c \u0622\u0646 \u0631\u0627 \u06af\u0633\u062a\u0631\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_CSS_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AD%D8%A7%D9%84%D8%AA_%D9%87%D8%A7%DB%8C_%D9%81%D8%B9%D8%A7%D9%84_%D9%88_%D8%A8%D8%A7%D8%B2\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 CSS \u0628\u0631\u0627\u06cc \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0641\u0639\u0627\u0644 \u0648 \u0628\u0627\u0632<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0634\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0633\u0628\u06a9 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0622\u0646 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f <code>active<\/code> \u0648 <code>open<\/code> \u06a9\u0644\u0627\u0633 \u0647\u0627 \u062f\u0631 CSS \u0634\u0645\u0627:\n<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* Highlight the active link *\/<\/span>\n<span class=\"nc\">.menu-item.active<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nc\">.menu-link<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">font-weight<\/span><span class=\"p\">:<\/span> <span class=\"nb\">bold<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#007bff<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c\">\/* Display the open submenu *\/<\/span>\n<span class=\"nc\">.menu-item.open<\/span> <span class=\"o\">&gt;<\/span> <span class=\"nc\">.menu-sub<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"nb\">block<\/span><span class=\"p\">;<\/span> <span class=\"c\">\/* or any style that reveals the submenu *\/<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B2%D8%A7%DB%8C%D8%A7%DB%8C_%D8%A7%DB%8C%D9%86_%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF\"><\/span>\n<p>  \u0645\u0632\u0627\u06cc\u0627\u06cc \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>\n<strong>\u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644 \u062e\u0648\u062f\u06a9\u0627\u0631<\/strong>: \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0647\u0627\u0631\u062f\u06a9\u062f \u06a9\u0631\u062f\u0646 \u0644\u06cc\u0646\u06a9 \u0641\u0639\u0627\u0644 \u062f\u0631 \u0647\u0631 \u0635\u0641\u062d\u0647. \u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0644\u06cc\u0646\u06a9 \u0641\u0639\u0627\u0644 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<strong>\u0645\u0646\u0648\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0631\u062a\u0642\u0627<\/strong>: \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0641\u0642\u0637 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc \u062e\u0648\u062f \u0631\u0627 \u0645\u06cc \u0628\u06cc\u0646\u0646\u062f \u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062f\u0633\u062a\u06cc \u0645\u0646\u0648\u0647\u0627 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<li>\n<strong>\u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f<\/strong>: \u0627\u06cc\u0646 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u06a9\u0627\u0641\u06cc \u0639\u0645\u0648\u0645\u06cc \u0627\u0633\u062a \u062a\u0627 \u0628\u0627 \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u0646\u0648\u06cc \u062a\u0648\u062f\u0631\u062a\u0648 \u06a9\u0627\u0631 \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641 \u0633\u0627\u06cc\u062a \u0647\u0627 \u0633\u0627\u0632\u06af\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<p>\ud83d\udc96 \u0627\u0632 eddiegulay<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u067e\u0648\u06cc\u0627\u060c \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc (UI) \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0635\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f. \u0686\u0647 \u06cc\u06a9 \u0633\u0627\u06cc\u062a \u062a\u062c\u0627\u0631\u062a \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9 \u0628\u0627 \u062f\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0645\u062d\u0635\u0648\u0644 \u0628\u0627\u0634\u062f \u06cc\u0627 \u06cc\u06a9 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0631 \u0645\u062d\u062a\u0648\u0627\u060c \u062f\u0627\u0634\u062a\u0646 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc \u0641\u0639\u0627\u0644 \u0648 \u0645\u0646\u0648\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0631\u062a\u0642\u0627\u060c \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-82792","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/82792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=82792"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/82792\/revisions"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=82792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=82792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=82792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}