آموزش کامل ساخت سایدبار متحرک (Toggle) فقط با CSS

<div class="wrapper">
 <input type="checkbox" id="menuToggler" class="input-toggler"/>
 <label for="menuToggler" class="menu-toggler">
 <span class="menu-toggler__line"></span>
 <span class="menu-toggler__line"></span>
 <span class="menu-toggler__line"></span>
 </label>
</div>

نکته مهم: حتماً از id برای چک‌باکس و for متناظر برای لیبل استفاده کنید. این کار اتصال بین این دو عنصر را برقرار می‌کند.

استایل‌دهی و انیمیشن با CSS

حالا با استفاده از CSS، این ساختار ساده را به یک آیکون زیبا و متحرک تبدیل می‌کنیم. برای خوانایی و مدیریت بهتر کد، از متغیرهای CSS استفاده می‌کنیم.

/* متغیرهای CSS برای مدیریت ساده‌تر */
:root {
  --toggler-size: 30px;
  --toggler-line-number: 3;
  --toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1));
  --toggler-offset-left: 10px;
  --toggler-offset-top: 10px;
  --toggler-color: Tomato;
  --toggler-color-hover: Tomato;
}

/* ریست کردن استایل‌های پیش‌فرض */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* استایل‌دهی به لیبل که به عنوان دکمه عمل می‌کند */
.menu-toggler {
  display: block;
  width: var(--toggler-size);
  height: var(--toggler-size);
  position: fixed;
  top: var(--toggler-offset-top);
  left: var(--toggler-offset-left);
  cursor: pointer;
  z-index: 1;
}

/* استایل‌دهی به خطوط آیکون همبرگر */
.menu-toggler__line {
  height: var(--toggler-line-size);
  background: var(--toggler-color);
  position: absolute;
  border-radius: calc(var(--toggler-line-size) / 2);
  left: 0;
  right: 0;
  transition: all .25s ease-out;
}

/* جای‌دهی خطوط با استفاده از حلقه در Sass */
.total: 3;
.num: 1;

@while .num <= .total {
  .menu-toggler__line:nth-child(.num) {
    top: calc(var(--toggler-line-size) * .num + (var(--toggler-line-size) * (.num - 2)));
  }
  .num: .num + 1;
}

/* مخفی کردن چک‌باکس اصلی */
.input-toggler {
  position: absolute;
  left: -100%;
}

/* استایل‌دهی در حالت تیک خوردن چک‌باکس (منو باز) */
.input-toggler:checked ~ .menu-toggler {
  .menu-toggler__line:not(:first-child):not(:last-child) {
    opacity: 0; /* خط وسط محو می‌شود */
  }
  .menu-toggler__line:first-child,
  .menu-toggler__line:last-child {
    background-color: var(--toggler-color-hover);
  }
  .menu-toggler__line:first-child {
    transform: translateY(calc(var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(45deg);
  }
  .menu-toggler__line:last-child {
    transform: translateY(calc(-1 * var(--toggler-line-size) * (var(--toggler-line-number) - 1))) rotate(-45deg);
  }
}

گام نهایی: ساخت سایدبار و اتصال به دکمه

تا اینجا دکمه‌ی متحرک را ساختیم. حالا نوبت به ساخت خودِ سایدبار می‌رسد. ما از یک تگ <nav> برای سایدبار و یک لیست نام‌رتب (<ul>) برای آیتم‌های منو استفاده می‌کنیم. برای بهبود دسترسی‌پذیری، از ویژگی‌های ARIA نیز کمک می‌گیریم.

ساختار HTML نهایی با سایدبار

کد HTML قبلی را با افزودن بخش سایدبار تکمیل می‌کنیم. سایدبار باید در کنار چک‌باکس و لیبل قرار گیرد تا بتوانیم با استفاده از انتخابگر‌های CSS به آن دسترسی داشته باشیم.

<div class="wrapper">
  <input type="checkbox" id="menuToggler" class="input-toggler" value="1" autofocus="true"/>
  <label for="menuToggler" id="menuTogglerLabel" class="menu-toggler" role="button" aria-pressed="false" aria-expanded="false" aria-label="Navigation button">
    <span class="menu-toggler__line"></span>
    <span class="menu-toggler__line"></span>
    <span class="menu-toggler__line"></span>
  </label>
  <nav id="sidebar" class="sidebar" role="navigation" aria-labelledby="menuTogglerLabel" aria-hidden="true">
    <ul id="menubar" class="menu" role="menubar" aria-orientation="vertical">
      <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">Home</a></li>
      <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">Blog</a></li>
      <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">About</a></li>
      <li class="menu__item" role"none"><a class="menu__link" href="#" role="menuitem" tabindex="-1">Contact</a></li>
    </ul>
  </nav>
</div>

استایل‌دهی به سایدبار و ایجاد انیمیشن slide

در نهایت، CSS مربوط به سایدبار را می‌نویسیم. سایدبار باید به طور پیش‌فرض خارج از صفحه (مثلاً از سمت چپ) قرار داشته باشد و زمانی که چک‌باکس تیک می‌خورد، با یک انیمیشن روان وارد صفحه شود.

/* استایل‌دهی به سایدبار */
.sidebar {
  position: fixed;
  top: 0;
  left: -250px; /* در حالت عادی خارج از صفحه است */
  width: 250px;
  height: 100%;
  background-color: #333;
  color: white;
  padding-top: 60px; /* فاصله از بالا برای جلوگیری از هم‌پوشانی با دکمه */
  transition: left 0.3s ease-in-out; /* انیمیشن نرم برای باز و بسته شدن */
  z-index: 0;
}

/* نمایش سایدبار با تیک خوردن چک‌باکس */
.input-toggler:checked ~ .sidebar {
  left: 0; /* وارد صفحه می‌شود */
}

/* استایل‌دهی به آیتم‌های منو */
.menu {
  list-style: none;
  padding: 0;
}

.menu__link {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  transition: background-color 0.2s;
}

.menu__link:hover {
  background-color: #555;
}

مزایای این روش و نکات تکمیلی

استفاده از این روش برای ساخت سایدبار CSS مزایای متعددی دارد:

• عملکرد بالا: بدون جاوا اسکریپت، بار پردازشی مرورگر کاهش می‌یابد و سرعت صفحه افزایش می‌یابد.
• دسترسی‌پذیری: کاربرانی که جاوا اسکریپت را غیرفعال کرده‌اند یا از صفحه‌خوان‌ها استفاده می‌کنند، همچنان می‌توانند از منو استفاده کنند.
• سادگی و سبکی: کدنویسی کمتر و وابستگی به کتابخانه‌های خارجی وجود ندارد.
• سئو دوست: موتورهای جستجو محتوای داخل سایدبار را به راحتی ایندکس می‌کنند، زیرا همیشه در DOM موجود است.

می‌توانید با تغییر متغیرهای CSS، به سادگی رنگ‌ها، اندازه‌ها و سرعت انیمیشن‌ها را شخصی‌سازی کنید. برای مثال، می‌توانید سایدبار را از بالا، پایین یا سمت راست باز کنید یا انیمیشن‌های پیچیده‌تری برای باز و بسته شدن آن طراحی نمایید.

نتیجه‌گیری

در این آموزش دیدیم که چگونه با استفاده از قدرت CSS و یک ترفند خلاقانه با چک‌باکس، می‌توان یک سایدبار متحرک کاملاً کاربردی و زیبا ساخت. این روش نه تنها کارآمد و سریع است، بلکه استانداردهای وب مدرن از جمله دسترسی‌پذیری و عملکرد بالا را نیز رعایت می‌کند. با تمرین و تغییر در مقادیر، می‌توانید منوهای کناری متنوعی را برای پروژه‌های خود طراحی کنید و تجربه کاربری بهتری ارائه دهید.