كيفية إنشاء قائمة متحركة من نوع Off-Canvas باستخدام CSS: دليل شامل ومفصل

تُعد القوائم المتحركة من نوع Off-Canvas من الاتجاهات الحديثة في تصميم واجهات المستخدم (UI) التي أصبحت شائعة جداً في تصميم المواقع والتطبيقات، خصوصاً مع تزايد استخدام الأجهزة المحمولة التي تتطلب توفير مساحة عرض أكبر ومرونة في التنقل بين المحتويات. يُمكن اعتبار قائمة Off-Canvas نافذة جانبية مخفية تظهر أو تختفي بحركة انسيابية لتوفير تجربة مستخدم سلسة وفعالة.

في هذا المقال سنغوص في شرح شامل ومفصل حول كيفية إنشاء قائمة Off-Canvas متحركة باستخدام CSS فقط، مع التركيز على الجانب العملي والنظري، ونستعرض أفضل الممارسات في كتابة الكود مع التأكيد على تحسين الأداء وتوافق التصميم مع جميع الأجهزة.

تعريف قائمة Off-Canvas

قائمة Off-Canvas هي نوع من القوائم التي تبقى مخفية خارج إطار الشاشة (خارج العرض المرئي) حتى يقوم المستخدم بتنشيطها، عادةً عبر زر أو إيماءة، فتتحرك القائمة إلى داخل الشاشة مع تأثير انزلاقي أو انسيابي، ثم تختفي بنفس الطريقة عند إغلاقها. هذا الأسلوب يوفر مساحة عرض أكبر للمحتوى الأساسي، ويُستخدم بشكل كبير في تصميم التطبيقات والمواقع ذات الشاشات الصغيرة.

مزايا استخدام قائمة Off-Canvas

• تحسين تجربة المستخدم: تعطي الشعور بالمساحة المفتوحة وترتيب المحتوى بطريقة أكثر تنظيماً.

• ملائمة الأجهزة المحمولة: توفر حلاً عملياً لعرض قوائم معقدة على الشاشات الصغيرة دون إزعاج المستخدم.

• تصميم عصري ومرن: يمكن تكييف القوائم بسهولة لتتناسب مع مختلف أحجام الشاشات.

• تعزيز التفاعل: حركة الانزلاق تضيف بعداً ديناميكياً لتجربة المستخدم.

المتطلبات الأساسية لإنشاء قائمة Off-Canvas متحركة باستخدام CSS

1. HTML نظيف ومنظم: الهيكل الأساسي للقائمة مع عناصر تفعيل وإغلاق.

2. CSS لإخفاء القائمة خارج الشاشة وإظهارها بحركة انسيابية.

3. استخدام خصائص التحويل (transform) والانتقال (transition): لتحقيق حركة سلسة.

4. توفير إمكانية الوصول (Accessibility): لجعل القائمة قابلة للاستخدام من قبل جميع المستخدمين.

5. تعامل جيد مع الأجهزة المختلفة (Responsive Design).

هيكل HTML الأساسي لقائمة Off-Canvas

في البداية نحتاج إلى بنية HTML واضحة تشمل:

• زر التفعيل: لفتح القائمة.

• القائمة نفسها: والتي تكون مخفية خارج الشاشة.

• محتوى الصفحة الرئيسي: الذي قد يتحرك أو يتغير حجمه عند فتح القائمة.

مثال على هيكل بسيط:

html
CopyEdit
<button id="menu-toggle" aria-expanded="false" aria-controls="offcanvas-menu">☰ القائمةbutton>

<nav id="offcanvas-menu" class="offcanvas-menu" aria-hidden="true">
  <ul>
    <li><a href="#">الرئيسيةa>li>
    <li><a href="#">عن الموقعa>li>
    <li><a href="#">الخدماتa>li>
    <li><a href="#">اتصل بناa>li>
  ul>
nav>

<main id="main-content">
  <h1>مرحبا بك في الموقعh1>
  <p>محتوى الصفحة هنا...p>
main>

CSS الأساسي لإنشاء حركة Off-Canvas

1. تحديد مكان القائمة خارج الشاشة

لتبدأ القائمة مخفية على الجانب الأيسر (أو الأيمن حسب التصميم) خارج العرض، نستخدم خاصية transform: translateX(-100%) للقائمة التي تبدأ خارج العرض إلى اليسار.

css
CopyEdit
.offcanvas-menu {
  position: fixed;
  top: 0;
  left: 0; /* لتكون القائمة على الجانب الأيسر */
  width: 250px;
  height: 100%;
  background-color: #333;
  color: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 1000;
}

2. إظهار القائمة عبر إضافة صنف CSS

عند الضغط على زر التفعيل، يتم إضافة صنف مثل .active يجعل القائمة تنزلق إلى داخل الشاشة.

css
CopyEdit
.offcanvas-menu.active {
  transform: translateX(0);
}

3. تصميم زر التفعيل

css
CopyEdit
#menu-toggle {
  position: fixed;
  top: 15px;
  left: 15px;
  background-color: #008cba;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 1100;
  font-size: 18px;
  border-radius: 4px;
}

4. تأثير تحريك المحتوى الرئيسي

لزيادة واقعية الحركة، يمكن تحريك المحتوى الرئيسي قليلاً عند ظهور القائمة.

css
CopyEdit
#main-content {
  transition: transform 0.3s ease;
}

#main-content.shifted {
  transform: translateX(250px);
}

إضافة التفاعل باستخدام CSS وHTML فقط (بدون JavaScript)

رغم أن JavaScript تسهل التحكم، يمكننا استخدام تقنيات CSS حديثة مثل: checkbox hack لجعل القائمة تعمل بدون جافاسكريبت.

طريقة Checkbox Hack

1. نستخدم عنصر input من نوع checkbox مخفي ليكون عنصر التحكم في القائمة.

2. نستخدم label كزر التفعيل المرتبط بالـ checkbox.

3. نستغل خاصية :checked في CSS للتحكم في ظهور القائمة وتحريك المحتوى.

مثال:

html
CopyEdit
<input type="checkbox" id="menu-toggle" hidden>
<label for="menu-toggle" class="menu-button">☰ القائمةlabel>

<nav class="offcanvas-menu">
  <ul>
    <li><a href="#">الرئيسيةa>li>
    <li><a href="#">عن الموقعa>li>
    <li><a href="#">الخدماتa>li>
    <li><a href="#">اتصل بناa>li>
  ul>
nav>

<main class="main-content">
  <h1>مرحبا بك في الموقعh1>
  <p>محتوى الصفحة هنا...p>
main>

والـ CSS المرتبط:

css
CopyEdit
.menu-button {
  position: fixed;
  top: 15px;
  left: 15px;
  background-color: #008cba;
  color: white;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 4px;
  z-index: 1100;
}

.offcanvas-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background-color: #333;
  color: white;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  z-index: 1000;
}

#menu-toggle:checked ~ .offcanvas-menu {
  transform: translateX(0);
}

.main-content {
  transition: transform 0.3s ease;
  padding: 20px;
}

#menu-toggle:checked ~ .main-content {
  transform: translateX(250px);
}

اعتبارات تصميمية وتجربة المستخدم

• الوصولية (Accessibility): يجب مراعاة علامات الـ ARIA لتوضيح حالة القائمة للمستخدمين الذين يعتمدون على برامج قراءة الشاشة، مثل استخدام aria-expanded، aria-controls، وaria-hidden.

• إغلاق القائمة: يمكن إضافة زر إغلاق داخل القائمة أو السماح بالنقر خارج القائمة لإغلاقها.

• التوافق مع الأجهزة: التأكد من أن القائمة تعمل بشكل جيد مع الهواتف المحمولة، الأجهزة اللوحية، وأجهزة الحاسوب.

• تأثيرات الانتقال: ضبط مدة وسرعة الانتقال لتكون سلسة ومريحة للعين.

تحسينات إضافية بالقائمة Off-Canvas

1. إضافة تأثير التعتيم على الخلفية

لزيادة التركيز على القائمة عند ظهورها، يمكن إضافة طبقة خلفية قاتمة تتفاعل مع فتح القائمة.

html
CopyEdit
<div class="overlay">div>

css
CopyEdit
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 900;
}

#menu-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}

2. إمكانية إغلاق القائمة بالنقر على التعتيم

يمكن ربط التعتيم بزر إغلاق عبر استخدام عنصر label مرتبط بالـ checkbox، كما في مثال:

html
CopyEdit
<label for="menu-toggle" class="overlay">label>

مثال كامل متكامل لقائمة Off-Canvas متحركة باستخدام CSS فقط

html
CopyEdit
html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>قائمة Off-Canvas متحركة باستخدام CSStitle>
  <style>
    /* إعدادات أساسية */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      direction: rtl;
      overflow-x: hidden;
    }

    /* زر القائمة */
    .menu-button {
      position: fixed;
      top: 15px;
      right: 15px;
      background-color: #008cba;
      color: white;
      padding: 10px 15px;
      cursor: pointer;
      font-size: 20px;
      border-radius: 4px;
      z-index: 1100;
      user-select: none;
    }

    /* إخفاء checkbox */
    #menu-toggle {
      display: none;
    }

    /* القائمة */
    .offcanvas-menu {
      position: fixed;
      top: 0;
      right: 0;
      width: 280px;
      height: 100%;
      background-color: #222;
      color: white;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      overflow-y: auto;
      z-index: 1050;
      padding-top: 60px;
      box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    }

    /* إظهار القائمة عند تفعيل checkbox */
    #menu-toggle:checked ~ .offcanvas-menu {
      transform: translateX(0);
    }

    /* عناصر القائمة */
    .offcanvas-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .offcanvas-menu ul li a {
      display: block;
      padding: 15px 25px;
      color: white;
      text-decoration: none;
      border-bottom: 1px solid #444;
      transition: background-color 0.3s;
    }

    .offcanvas-menu ul li a:hover {
      background-color: #008cba;
    }

    /* محتوى الصفحة */
    .main-content {
      padding: 20px;
      transition: transform 0.3s ease;
    }

    /* تحريك المحتوى عند فتح القائمة */
    #menu-toggle:checked ~ .main-content {
      transform: translateX(-280px);
    }

    /* طبقة التعتيم */
    .overlay {
      position: fixed;
      top: 0;
      right: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 1040;
    }

    /* إظهار التعتيم */
    #menu-toggle:checked ~ .overlay {
      opacity: 1;
      pointer-events: auto;
    }
  style>
head>
<body>

  <input type="checkbox" id="menu-toggle" />
  <label for="menu-toggle" class="menu-button">☰ القائمةlabel>

  <nav class="offcanvas-menu" role="navigation" aria-label="القائمة الجانبية">
    <ul>
      <li><a href="#">الرئيسيةa>li>
      <li><a href="#">عن الموقعa>li>
      <li><a href="#">الخدماتa>li>
      <li><a href="#">اتصل بناa>li>
    ul>
  nav>

  <label for="menu-toggle" class="overlay">label>

  <main class="main-content">
    <h1>مرحبا بك في الموقعh1>
    <p>هذا مثال عملي لقائمة Off-Canvas متحركة باستخدام CSS فقط دون الحاجة لجافاسكريبت.p>
    <p>تم تصميم القائمة لتكون متجاوبة وسلسة في الاستخدام عبر مختلف الأجهزة.p>
  main>

body>
html>

شرح مفصل لمفاهيم وتقنيات CSS المستخدمة

• transform: translateX(): تستخدم لتحريك العنصر أفقياً دون تغيير موقعه في تدفق الصفحة، مما يجعل الحركة سلسة وأقل استهلاكاً للطاقة.

• transition: تسمح بانتقال سلس بين حالتين للعنصر (مخفي/مرئي).

• position: fixed: تثبيت القائمة بالنسبة للنافذة، لتظل ظاهرة أثناء التمرير.

• z-index: تحديد ترتيب الطبقات لعرض القائمة فوق المحتوى.

• pointer-events: تعطيل التفاعل مع التعتيم حين يكون غير ظاهر، لتجنب منع المستخدم من التفاعل مع المحتوى.

التوافق مع معايير SEO وتحسين الأداء

قائمة Off-Canvas يجب أن تُبنى بشكل لا يؤثر سلباً على أداء الموقع أو قابلية البحث والفهرسة. لذلك:

• استخدام HTML نظيف وواضح: مع وضع عناصر التنقل في وسوم