Summarize this content to 400 words in Persian Lang هنگام ساخت یک برنامه وب پویا، رابط کاربری (UI) باید یک تجربه ناوبری بصری ارائه دهد. چه یک سایت تجارت الکترونیک با دسته بندی های مختلف محصول باشد یا یک داشبورد مدیریت پر محتوا، داشتن حالت های فعال و منوهای قابل ارتقا، قابلیت استفاده را افزایش می دهد. در این پست وبلاگ، ما از طریق ایجاد یک اسکریپت جاوا اسکریپت که به صورت پویا صفحه فعلی را در ناوبری برجسته می کند و بخش های مربوطه را بر اساس مسیر کاربر گسترش می دهد، قدم خواهیم گذاشت.
مشکل
هنگامی که کاربران در منوهای چند لایه حرکت می کنند، می خواهیم:
یک حالت فعال در لینک صفحه فعلی
بخش های قابل گسترش اگر کاربر در یک صفحه تو در تو در یک منو باشد، به طور خودکار باز می شود.
بیایید به یک نمونه ساختار HTML و نحوه اضافه کردن جاوا اسکریپت برای هوشمند کردن منو نگاه کنیم.
نمونه ساختار منو
در اینجا یک ساختار منوی تودرتوی معمولی وجود دارد. ما با هم کار خواهیم کرد menu-item برای هر آیتم در منو، menu-link برای پیوندها، و menu-sub برای زیر منوهای جمع شونده
<!– Categories –>
<li class=”menu-item”>
<a href=”javascript:void(0);” class=”menu-link menu-toggle”>
<i class=’menu-icon tf-icons bx bx-category’></i>
<div class=”text-truncate”>Product Categories</div>
</a>
<ul class=”menu-sub”>
<li class=”menu-item”>
<a href=”/category-list” class=”menu-link”>Category List</a>
</li>
</ul>
</li>
<!– Inventory –>
<li class=”menu-item”>
<a href=”javascript:void(0);” class=”menu-link menu-toggle”>
<i class=’menu-icon tf-icons bx bx-library’></i>
<div class=”text-truncate”>Inventory Issues</div>
</a>
<ul class=”menu-sub”>
<li class=”menu-item”>
<a href=”/inventory-issues” class=”menu-link”>Recorded Issues</a>
</li>
<li class=”menu-item”>
<a href=”/register-issue” class=”menu-link”>Register Issue</a>
</li>
</ul>
</li>
در این ساختار:
پیوند هر منوی اصلی (menu-toggle) با کلیک کردن یک منوی فرعی باز می کند.
صفحات واقعی در لینک های زیر منو هستند (menu-link).
راه حل جاوا اسکریپت
ما از جاوا اسکریپت برای موارد زیر استفاده خواهیم کرد:
صفحه فعلی را شناسایی کنید
یک را اعمال کنید active کلاس به پیوندی که با URL فعلی مطابقت دارد.
یک را اضافه کنید open کلاس به منوی والد اگر پیوند داخل یک زیر منوی جمع شده باشد.
این کد جاوا اسکریپت است:
<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 از هر پیوند در منو
Menu Links را انتخاب کنید:
const links = document.querySelectorAll(‘.menu-link’);
همه عناصر را با کلاس انتخاب می کنیم menu-link، با فرض اینکه اینها حاوی پیوندهایی به بخش های مختلف سایت هستند.
مطابقت با صفحه فعلی:
if (link.getAttribute(‘href’) === currentPath) {
برای هر پیوند، بررسی می کنیم که آیا وجود دارد یا خیر href مطابقت دارد currentPath. اگر اینطور باشد، آن پیوند برای صفحه فعلی است.
تنظیم وضعیت فعال:
menuItem.classList.add(‘active’);
یک را اضافه می کنیم active کلاس به نزدیک ترین menu-item، به ما امکان می دهد به پیوند صفحه فعال استایل دهیم.
گسترش منوی والدین:
const parentMenuItem = parentMenu.closest(‘.menu-item’);
parentMenuItem.classList.add(‘open’);
اگر پیوند فعال در یک زیر منو باشد (menu-sub)، این قسمت از کد والد را پیدا می کند menu-item حاوی آن زیر منو و اضافه کردن open کلاس، آن را گسترش می دهد.
افزودن CSS برای حالت های فعال و باز
شما می خواهید سبک هایی را برای آن تعریف کنید active و open کلاس ها در CSS شما:
/* Highlight the active link */
.menu-item.active > .menu-link {
font-weight: bold;
color: #007bff;
}
/* Display the open submenu */
.menu-item.open > .menu-sub {
display: block; /* or any style that reveals the submenu */
}
مزایای این رویکرد
حالت فعال خودکار: بدون نیاز به هاردکد کردن لینک فعال در هر صفحه. این اسکریپت لینک فعال را به صورت پویا به روز می کند.
منوهای قابل ارتقا: کاربران فقط بخش های مربوط به صفحه فعلی خود را می بینند و نیاز به باز کردن دستی منوها را کاهش می دهد.
قابل استفاده مجدد: این اسکریپت به اندازه کافی عمومی است تا با ساختارهای مختلف منوی تودرتو کار کند و آن را با انواع مختلف سایت ها سازگار می کند.
💖 از eddiegulay
هنگام ساخت یک برنامه وب پویا، رابط کاربری (UI) باید یک تجربه ناوبری بصری ارائه دهد. چه یک سایت تجارت الکترونیک با دسته بندی های مختلف محصول باشد یا یک داشبورد مدیریت پر محتوا، داشتن حالت های فعال و منوهای قابل ارتقا، قابلیت استفاده را افزایش می دهد. در این پست وبلاگ، ما از طریق ایجاد یک اسکریپت جاوا اسکریپت که به صورت پویا صفحه فعلی را در ناوبری برجسته می کند و بخش های مربوطه را بر اساس مسیر کاربر گسترش می دهد، قدم خواهیم گذاشت.
مشکل
هنگامی که کاربران در منوهای چند لایه حرکت می کنند، می خواهیم:
- یک حالت فعال در لینک صفحه فعلی
- بخش های قابل گسترش اگر کاربر در یک صفحه تو در تو در یک منو باشد، به طور خودکار باز می شود.
بیایید به یک نمونه ساختار HTML و نحوه اضافه کردن جاوا اسکریپت برای هوشمند کردن منو نگاه کنیم.
نمونه ساختار منو
در اینجا یک ساختار منوی تودرتوی معمولی وجود دارد. ما با هم کار خواهیم کرد menu-item برای هر آیتم در منو، menu-link برای پیوندها، و menu-sub برای زیر منوهای جمع شونده
<!-- Categories -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-category'></i>
<div class="text-truncate">Product Categories</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="/category-list" class="menu-link">Category List</a>
</li>
</ul>
</li>
<!-- Inventory -->
<li class="menu-item">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class='menu-icon tf-icons bx bx-library'></i>
<div class="text-truncate">Inventory Issues</div>
</a>
<ul class="menu-sub">
<li class="menu-item">
<a href="/inventory-issues" class="menu-link">Recorded Issues</a>
</li>
<li class="menu-item">
<a href="/register-issue" class="menu-link">Register Issue</a>
</li>
</ul>
</li>
در این ساختار:
- پیوند هر منوی اصلی (
menu-toggle) با کلیک کردن یک منوی فرعی باز می کند. - صفحات واقعی در لینک های زیر منو هستند (
menu-link).
راه حل جاوا اسکریپت
ما از جاوا اسکریپت برای موارد زیر استفاده خواهیم کرد:
- صفحه فعلی را شناسایی کنید
- یک را اعمال کنید
activeکلاس به پیوندی که با URL فعلی مطابقت دارد. - یک را اضافه کنید
openکلاس به منوی والد اگر پیوند داخل یک زیر منوی جمع شده باشد.
این کد جاوا اسکریپت است:
<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 از هر پیوند در منو
- Menu Links را انتخاب کنید:
const links = document.querySelectorAll('.menu-link');
همه عناصر را با کلاس انتخاب می کنیم menu-link، با فرض اینکه اینها حاوی پیوندهایی به بخش های مختلف سایت هستند.
- مطابقت با صفحه فعلی:
if (link.getAttribute('href') === currentPath) {
برای هر پیوند، بررسی می کنیم که آیا وجود دارد یا خیر href مطابقت دارد currentPath. اگر اینطور باشد، آن پیوند برای صفحه فعلی است.
- تنظیم وضعیت فعال:
menuItem.classList.add('active');
یک را اضافه می کنیم active کلاس به نزدیک ترین menu-item، به ما امکان می دهد به پیوند صفحه فعال استایل دهیم.
- گسترش منوی والدین:
const parentMenuItem = parentMenu.closest('.menu-item');
parentMenuItem.classList.add('open');
اگر پیوند فعال در یک زیر منو باشد (menu-sub)، این قسمت از کد والد را پیدا می کند menu-item حاوی آن زیر منو و اضافه کردن open کلاس، آن را گسترش می دهد.
افزودن CSS برای حالت های فعال و باز
شما می خواهید سبک هایی را برای آن تعریف کنید active و open کلاس ها در CSS شما:
/* Highlight the active link */
.menu-item.active > .menu-link {
font-weight: bold;
color: #007bff;
}
/* Display the open submenu */
.menu-item.open > .menu-sub {
display: block; /* or any style that reveals the submenu */
}
مزایای این رویکرد
- حالت فعال خودکار: بدون نیاز به هاردکد کردن لینک فعال در هر صفحه. این اسکریپت لینک فعال را به صورت پویا به روز می کند.
- منوهای قابل ارتقا: کاربران فقط بخش های مربوط به صفحه فعلی خود را می بینند و نیاز به باز کردن دستی منوها را کاهش می دهد.
- قابل استفاده مجدد: این اسکریپت به اندازه کافی عمومی است تا با ساختارهای مختلف منوی تودرتو کار کند و آن را با انواع مختلف سایت ها سازگار می کند.
💖 از eddiegulay
