` برای محتوای اصلی. یه دکمه هم برای باز و بسته کردن سایدبار لازمه.
<div class="dashboard-layout">
<aside id="sidebar" class="sidebar">
<div class="sidebar-header">
<img src="logo.png" alt="لوگو" class="logo">
<button id="toggle-sidebar" class="toggle-btn" aria-label="جمعکردن سایدبار">
<!-- آیکون همبرگر یا فلش -->
</button>
</div>
<nav class="sidebar-nav">
<ul>
<li><a href="#"><i class="icon-dashboard"></i> <span class="nav-text">داشبورد</span></a></li>
<li><a href="#"><i class="icon-products"></i> <span class="nav-text">محصولات</span></a></li>
<!-- لینکهای بیشتر -->
</ul>
</nav>
<div class="sidebar-footer">
<a href="https://fa-tools.ir/contact/">پشتیبانی</a>
</div>
</aside>
<main id="main-content" class="main-content">
<!-- محتوای اصلی داشبورد -->
<h1>به داشبورد خود خوش آمدید!</h1>
<p>اینجا محتوای اصلی شما قرار میگیرد.</p>
<a href="https://fa-tools.ir/shop/">مشاهده ابزارهای ما</a>
</main>
</div>کپی کد
۲. استایل و حرکت با CSS (CSS Styling & Animations)
حالا وقتشه به سایدبارمون جون بدیم. CSS مسئول ظاهر، رنگبندی و انیمیشنهای باز و بسته شدن سایدباره. از `transition` برای انیمیشنهای روان استفاده کن و از `transform` برای حرکت دادن به جای `width` یا `margin-left`، چون پرفورمنس بهتری داره.
.dashboard-layout {
display: flex;
min-height: 100vh;
}
.sidebar {
width: 250px; /* عرض اولیه سایدبار */
background-color: #2C3E50;
color: #ECF0F1;
transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
flex-shrink: 0; /* جلوگیری از کوچک شدن سایدبار */
display: flex;
flex-direction: column;
}
.sidebar.collapsed {
width: 60px; /* عرض سایدبار در حالت جمع شده */
/* text-indent: -9999px; // برای مخفی کردن متن و فقط نمایش آیکون */
}
.sidebar.collapsed .nav-text {
opacity: 0;
width: 0;
overflow: hidden;
white-space: nowrap;
transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out;
}
.sidebar-nav ul li a {
display: flex;
align-items: center;
padding: 15px 20px;
color: #ECF0F1;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
}
.sidebar-nav ul li a i {
font-size: 1.2em;
margin-right: 10px;
}
.sidebar.collapsed .sidebar-nav ul li a i {
margin-right: 0; /* حذف فاصله در حالت جمع شده */
}
.main-content {
flex-grow: 1;
padding: 20px;
transition: margin-left 0.3s ease-in-out; /* برای جابجایی محتوای اصلی */
margin-left: 250px; /* متناظر با عرض سایدبار */
}
.dashboard-layout.collapsed .main-content {
margin-left: 60px; /* متناظر با عرض سایدبار جمع شده */
}
.toggle-btn {
background: none;
border: none;
color: #ECF0F1;
cursor: pointer;
font-size: 1.5em;
padding: 10px;
display: block;
margin-left: auto;
}
/* استایل رسپانسیو برای موبایل */
@media (max-width: 768px) {
.sidebar {
position: fixed;
left: -250px; /* مخفی کردن سایدبار به طور کامل */
top: 0;
height: 100%;
z-index: 1000;
box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}
.sidebar.open {
transform: translateX(250px); /* نمایش سایدبار از سمت چپ */
}
.main-content {
margin-left: 0; /* در موبایل سایدبار روی محتوا میاد */
}
.dashboard-layout.collapsed .main-content {
margin-left: 0;
}
}کپی کد
۳. مغز متفکر با JavaScript (JavaScript Logic)
JavaScript کلاسی رو به سایدبار و یا به کل Layout اضافه میکنه تا CSS بتونه اون تغییرات رو اعمال کنه. یه `EventListener` روی دکمه Toggle میذاریم تا با هر کلیک، کلاس `collapsed` رو اضافه یا حذف کنه.
document.addEventListener('DOMContentLoaded', () => {
const toggleButton = document.getElementById('toggle-sidebar');
const sidebar = document.getElementById('sidebar');
const dashboardLayout = document.querySelector('.dashboard-layout');
const mainContent = document.getElementById('main-content'); // اضافه شد
if (toggleButton && sidebar && dashboardLayout) {
toggleButton.addEventListener('click', () => {
sidebar.classList.toggle('collapsed');
dashboardLayout.classList.toggle('collapsed'); // اضافه کردن کلاس به layout برای جابجایی main-content
// در حالت موبایل، کلاس open را مدیریت میکنیم
if (window.innerWidth <= 768) {
sidebar.classList.toggle('open');
}
});
}
// ذخیره وضعیت سایدبار در localStorage
const savedState = localStorage.getItem('sidebarCollapsed');
if (savedState === 'true') {
sidebar.classList.add('collapsed');
dashboardLayout.classList.add('collapsed');
}
sidebar.addEventListener('transitionend', () => {
localStorage.setItem('sidebarCollapsed', sidebar.classList.contains('collapsed'));
});
// مدیریت وضعیت سایدبار در تغییر اندازه صفحه
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
// اگر از حالت موبایل خارج شدیم، مطمئن میشیم سایدبار 'open' نیست
sidebar.classList.remove('open');
// وضعیت ذخیره شده را اعمال میکنیم
const savedStateDesktop = localStorage.getItem('sidebarCollapsed');
if (savedStateDesktop === 'true') {
sidebar.classList.add('collapsed');
dashboardLayout.classList.add('collapsed');
} else {
sidebar.classList.remove('collapsed');
dashboardLayout.classList.remove('collapsed');
}
} else {
// در حالت موبایل، اگر سایدبار باز بود، باز نگهش میداریم، در غیر اینصورت مخفیش میکنیم
// و کلاس collapsed را حذف میکنیم تا CSS موبایل عمل کند
sidebar.classList.remove('collapsed');
dashboardLayout.classList.remove('collapsed');
}
});
// برای نمایش دکمه در موبایل
// مثلاً اگر یک دکمه همبرگری در هدر داشتیم
// const mobileMenuButton = document.getElementById('mobile-menu-btn');
// if (mobileMenuButton) {
// mobileMenuButton.addEventListener('click', () => {
// sidebar.classList.toggle('open');
// });
// }
});کپی کد
function copyCode(button) {
پیادهسازی گامبهگام: از صفر تا صد
خب، حالا که با اجزا آشنا شدیم، بیاین قدم به قدم سایدبار خودمون رو بسازیم. این یه راهنمای عملیه که میتونی ازش تو پروژههات استفاده کنی.
۱. آمادهسازی محیط
مطمئن شو که فایلهای HTML، CSS و JS رو به درستی به هم لینک کردی. مثلاً “ در “ و “ قبل از بستن تگ “.
۲. ساختار HTML اولیه
همون کدی که بالاتر گذاشتم رو استفاده کن. فقط مطمئن شو که IDها و کلاسها به درستی تنظیم شدن.
۳. استایلدهی پایه (Base Styling)
استایلهای پایه رو که در بخش CSS دیدی، اعمال کن. رنگها، فونتها، فاصلهگذاریها. اینجا میتونی خلاقیت به خرج بدی و سایدبار رو به سلیقه خودت دربیاری. فقط حواست باشه کنتراست رنگی مناسبی داشته باشی تا خوانایی حفظ بشه.
۴. افزودن منطق JavaScript
کد JavaScript رو هم تو فایل `script.js` قرار بده. این کد مسئول جابجایی کلاس `collapsed` و `open` خواهد بود. بهت پیشنهاد میکنم برای نگهداری وضعیت سایدبار از `localStorage` استفاده کنی تا وقتی کاربر صفحه رو رفرش میکنه، سایدبار تو همون وضعیت قبلیش بمونه. این یه ریزه کاریه که خیلی تو UX تاثیرگذاره.
۵. تست و اصلاح
حالا که همه چی رو پیاده کردی، وقتشه تست کنی. سایدبار رو باز و بسته کن، صفحه رو رفرش کن، با سایزهای مختلف مرورگر (با کشیدن لبههای پنجره) تست کن تا مطمئن بشی همه چیز درست کار میکنه. اگر باگ یا مشکل ظاهری دیدی، برگرد و اصلاحش کن. بعضی وقتا یه `z-index` اشتباه یا یه `overflow: hidden` جا افتاده میتونه کل طراحی رو به هم بریزه.
قابلیت پاسخگویی (Responsiveness) برای همه دیوایسها
امروز دیگه طراحی رسپانسیو یه گزینه نیست، ضرورته! سایدبار شما باید روی هر دستگاهی، از موبایلهای کوچیک گرفته تا تبلتها، لپتاپها و حتی تلویزیونهای هوشمند، به درستی نمایش داده بشه و کار کنه.
نکات طلایی برای رسپانسیو کردن سایدبار:
Media Queries هوشمند: از `min-width` و `max-width` در CSS برای تعریف نقاط شکست (breakpoints) استفاده کن. مثلاً زیر 768px برای تبلت و موبایل.منوی همبرگری (Hamburger Menu): تو سایزهای کوچیک (مثلاً موبایل) سایدبار رو کاملاً مخفی کن و یک دکمه همبرگری تو هدر بذار که با کلیک روش، سایدبار به صورت Overly یا Push از کنار باز بشه.انیمیشنهای متفاوت: شاید برای موبایل، به جای جمع شدن، سایدبار کلاً از صفحه خارج بشه و بعد با یک انیمیشن اسلایدینگ برگرده.فونت و آیکونها: مطمئن شو که آیکونها و فونتها در همه سایزها خوانا و واضح هستن و زیاد کوچک یا بزرگ نمیشن. برای آیکونها، SVG یا فونتهای آیکون بهترین انتخابن.
بهینهسازی پرفورمنس: سرعت، سرعت، سرعت!
هیچکس از یه سایدبار کند و لگدار خوشش نمیاد. بهینهسازی پرفورمنس باعث میشه تجربه کاربری عالی باشه.
چطور سایدبار رو سریعتر کنیم؟
CSS Transitions/Transforms: همیشه برای انیمیشنها از `transition` و `transform` استفاده کن. اینها روی GPU اجرا میشن و خیلی روانتر از تغییر `width` یا `margin-left` هستن که CPU رو درگیر میکنن.Lazy Loading برای آیکونها: اگه کلی آیکون داری، میتونی از تکنیک Lazy Loading استفاده کنی. یعنی فقط آیکونهایی که الان تو دید کاربر هستن رو لود کنی.کد جاوااسکریپت بهینه: کدهات رو تمیز و کارآمد بنویس. از `debounce` برای Event Listenerهایی که ممکنه زیاد فعال بشن (مثل resize) استفاده کن.حذف استایلهای غیرضروری: هر CSS اضافهای رو پاک کن. هر چی کدت کمتر باشه، سریعتر لود میشه و مرورگر کمتر درگیر میشه.
امنیت و دسترسیپذیری (Accessibility): برای همه
طراحی یه سایدبار مدرن یعنی طراحی برای همه، از جمله افرادی با نیازهای خاص. دسترسیپذیری یا Accesssibility یه جنبه اساسی و اغلب فراموششدس.
نکات مهم برای دسترسیپذیری:
ARIA Attributes: از `aria-label`، `aria-expanded`، `aria-controls` استفاده کن. مثلاً دکمه جمعکننده سایدبار باید `aria-label=”جمعکردن سایدبار”` یا `aria-label=”گسترش سایدبار”` داشته باشه. اینها به Screen Readerها کمک میکنن.Focus Management: وقتی سایدبار باز میشه، مطمئن شو که فوکوس کیبورد به اولین آیتم قابل تعامل منتقل میشه. وقتی بسته میشه، فوکوس رو به دکمهای که سایدبار رو باز کرد برگردون.کنتراست رنگی مناسب: کنتراست رنگ متن و پسزمینه باید حداقل به استاندارد WCAG 2.1 AA برسه تا برای افراد کمبینا هم قابل خواندن باشه.ناوبری با کیبورد: تمام آیتمهای سایدبار باید با کلید Tab قابل دسترسی و با Enter قابل انتخاب باشن.
اشتباهات رایج و راهحلها (Troubleshooting)
تو مسیر طراحی سایدبار، ممکنه به مشکلاتی بربخوری. نگران نباش، این طبیعیه. اینجا یه لیست از مشکلات رایج و راهحلهاشون رو برات آوردم تا دیگه تو دام نیفتی.
جدول عیبیابی سریع سایدبار جمعشونده
مشکل رایج
راه حل عملی
سایدبار هنگام باز و بسته شدن لرزش (Flicker) دارد.
از `transform: translateX()` به جای `width` یا `margin-left` برای انیمیشن استفاده کنید. `will-change: transform;` را به سایدبار اضافه کنید تا مرورگر آن را بهینهسازی کند.
محتوای اصلی زیر سایدبار پنهان میشود.
`z-index` سایدبار را بیشتر از محتوای اصلی قرار دهید. یا از `position: fixed` برای سایدبار و `margin-left` برای محتوای اصلی استفاده کنید.
سایدبار در موبایل به درستی کار نمیکند.
`@media queries` را برای نمایشگرهای کوچک تنظیم کنید. سایدبار را با `position: fixed; left: -WIDTH;` مخفی و با `transform: translateX(WIDTH);` باز کنید. از یک دکمه همبرگری در هدر برای Toggle استفاده کنید.
متن آیتمهای منو در حالت جمعشده سایدبار کامل مخفی نمیشود.
برای `span` حاوی متن، `opacity: 0; width: 0; overflow: hidden; white-space: nowrap;` را در حالت `collapsed` اعمال کنید و `transition` مناسب به آن بدهید.
سایدبار بعد از رفرش صفحه به حالت اولیه برمیگردد.
وضعیت سایدبار را (باز یا بسته بودن) در `localStorage` ذخیره کنید و هنگام بارگذاری صفحه، آن را بازیابی کنید.
مشکلات کلیک خارج از سایدبار در موبایل برای بستن آن.
یک `overlay` نیمه شفاف بسازید که کل صفحه را بپوشاند و با کلیک روی آن، سایدبار بسته شود. `overlay` را تنها در حالت موبایل و زمانی که سایدبار باز است نمایش دهید.
امیدوارم این راهنمایی جامع برات مفید بوده باشه و بتونی یه سایدبار جمعشونده خفن و مدرن برای پروژههات طراحی کنی. یادته، تو دنیای وب، همه چیز به تجربه کاربری برمیگرده. پس همیشه بهترین رو به کاربرانت ارائه بده. اگه دنبال کدهای آماده و اسنیپتهای کاربردی هستی که کارت رو راه بندازه، حتماً به صفحه کدهای آماده و اسنیپت ما سر بزن. کلی چیزهای به درد بخور اونجا پیدا میکنی! برای سوالات بیشتر هم میتونی با شماره 09202232789 با ما در تماس باشی.
—
❓ سوالات متداول (FAQ)
چه روشهایی برای افزایش پرفورمنس انیمیشن سایدبار وجود دارد؟
بهترین روش استفاده از `transform: translateX()` یا `transform: scale()` در CSS به جای تغییر `width` یا `height` است. این ویژگیها توسط GPU مرورگر پردازش میشوند و انیمیشنهای روانتری را ارائه میدهند. همچنین، استفاده از `will-change` میتواند به مرورگر کمک کند تا انیمیشن را از قبل بهینهسازی کند.
چگونه سایدبار را برای موبایل و تبلت بهینه کنیم؟
برای دستگاههای کوچک، معمولاً سایدبار به صورت پیشفرض مخفی میشود و با یک دکمه (معمولاً آیکون همبرگری) قابل دسترسی است. میتوانید از `media queries` در CSS برای تغییر رفتار سایدبار استفاده کنید. مثلاً در سایزهای کوچک، سایدبار را با `position: fixed` از دید پنهان کرده و با کلیک روی دکمه، آن را با `transform: translateX()` نمایان کنید.
آیا باید وضعیت باز یا بسته بودن سایدبار را ذخیره کرد؟
بله، برای بهبود تجربه کاربری توصیه میشود وضعیت سایدبار را در `localStorage` مرورگر ذخیره کنید. این کار باعث میشود کاربر پس از رفرش صفحه یا جابجایی بین صفحات، سایدبار را در همان وضعیتی که رها کرده بود، ببیند و نیاز به تنظیم مجدد نداشته باشد.
چگونه دسترسیپذیری سایدبار را افزایش دهیم؟
استفاده صحیح از `ARIA attributes` مانند `aria-label` برای دکمههای کنترلی و `aria-expanded` برای نمایش وضعیت سایدبار، بسیار مهم است. همچنین، اطمینان حاصل کنید که تمام عناصر قابل کلیک در سایدبار با کیبورد قابل ناوبری (با کلید Tab) و فعالسازی (با کلید Enter) هستند و کنتراست رنگی مناسبی دارند
