البرمجة

إنشاء قائمة منسدلة باستخدام CSS

اخر تحديث 10/06/2025
14 تمت قراءة 6 دقيقة
جدول المحتوى

إنشاء قائمة منسدلة (Dropdown Menu) باستخدام CSS فقط

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

مفهوم القوائم المنسدلة وأهميتها في تصميم الويب

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

مواضيع ذات صلة

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

المبادئ الأساسية لإنشاء قائمة منسدلة باستخدام CSS

عند إنشاء قائمة منسدلة باستخدام CSS فقط، يجب فهم كيفية تعامل CSS مع عناصر HTML والتفاعل بين العناصر عند تغيّر حالتها (مثل مرور الماوس فوق عنصر معين). يعتمد تنفيذ القائمة المنسدلة على عدة مفاهيم رئيسية في CSS، منها:

  1. وضعية العنصر (Positioning): تستخدم خصائص مثل relative وabsolute لتحديد مكان ظهور القائمة الفرعية بالنسبة للعنصر الرئيسي.

  2. الظهور والاختفاء (Visibility and Display): يتم التحكم في ظهور القائمة الفرعية عن طريق تغيير خصائص مثل display أو visibility أو opacity عند التفاعل.

  3. التفاعل (Interaction): يتم تفعيل ظهور القائمة عند حدث مرور المؤشر فوق العنصر (hover) أو التركيز (focus) باستخدام محددات CSS.

  4. الانتقالات (Transitions): يمكن إضافة تأثيرات انتقالية لجعل ظهور واختفاء القائمة أكثر سلاسة وجاذبية.

هيكل HTML الأساسي للقائمة المنسدلة

قبل الخوض في تفاصيل CSS، من الضروري فهم الهيكلية الأساسية للقائمة المنسدلة التي سنبنيها. بشكل عام، تتكون القائمة المنسدلة من عنصر قائمة رئيسي

    يحتوي على عناصر فرعية

  • ، حيث يحتوي أحد عناصر القائمة الرئيسية على قائمة فرعية أخرى تظهر عند التفاعل.

    مثال على هيكلية HTML بسيطة للقائمة:

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

    في هذا الهيكل، عنصر

  • الذي يحمل الصنف dropdown يحتوي على قائمة فرعية
      ذات الصنف dropdown-menu التي تمثل القائمة المنسدلة التي ستظهر عند التفاعل مع عنصر “الخدمات”.

      كتابة CSS لإنشاء القائمة المنسدلة

      1. إعداد القوائم الأساسية

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

      css
      .navbar {
  background-color: #004080;
  font-family: Arial, sans-serif;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu > li {
  position: relative; /* لتكون القائمة الفرعية مرتبطة بهذا العنصر */
}

.menu > li > a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.menu > li > a:hover {
  background-color: #003366;
}

      في هذه المرحلة، تظهر القائمة الرئيسية كصف أفقي من العناصر مع تنسيق الألوان والخطوط، مع تأثير بسيط عند مرور الماوس.

      2. إعداد القائمة الفرعية (القائمة المنسدلة)

      نأتي الآن إلى إعداد القائمة الفرعية التي ستكون مخفية بشكل افتراضي. يجب أن تظهر فقط عند التفاعل مع العنصر الرئيسي.

      css
      .dropdown-menu {
  list-style: none;
  position: absolute;
  top: 100%; /* ظهور القائمة أسفل العنصر الرئيسي */
  left: 0;
  background-color: #0066cc;
  min-width: 180px;
  padding: 0;
  margin: 0;
  display: none; /* مخفية بشكل افتراضي */
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
}

.dropdown-menu li a {
  display: block;
  padding: 12px 20px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.dropdown-menu li a:hover {
  background-color: #005bb5;
}

      3. التحكم في ظهور القائمة المنسدلة عند التفاعل

      الآن نربط ظهور القائمة المنسدلة بحدث مرور الماوس (hover) على العنصر الرئيسي الذي يحتويها:

      css
      .dropdown:hover > .dropdown-menu {
  display: block;
}

      بهذا يصبح لدى المستخدم تجربة تفاعلية سلسة، حيث تظهر القائمة المنسدلة فقط عندما يمر الماوس فوق عنصر “الخدمات”.

      4. تحسين التجربة بإضافة تأثيرات انتقالية

      لجعل ظهور القائمة أكثر نعومة وجاذبية، يمكن استخدام خاصية opacity وvisibility مع الانتقالات بدلاً من display، وذلك لأن display لا يمكن تفعيل الانتقالات عليه.

      css
      .dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  display: block; /* ضروري لكي تعمل الانتقالات */
}

.dropdown:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

      مع هذه التعديلات، تختفي القائمة المنسدلة تدريجيًا وتظهر بنفس الطريقة عند التفاعل.

      5. جعل القائمة المنسدلة متجاوبة مع الشاشات الصغيرة

      في التصميم الحديث، يجب أن تكون القوائم متوافقة مع مختلف أحجام الشاشات، خاصة الهواتف الذكية والأجهزة اللوحية. لذلك، يمكن تعديل تصميم القائمة لتحويلها إلى قائمة عمودية مع قائمة فرعية قابلة للفتح بالنقر.

      يمكن استخدام @media queries للتحكم في عرض القائمة على الشاشات الصغيرة:

      css
      @media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }

  .dropdown-menu {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none;
    display: none;
  }

  .dropdown:hover > .dropdown-menu,
  .dropdown:focus-within > .dropdown-menu {
    display: block;
  }
}

      هذا التحول يجعل القائمة المنسدلة تظهر بشكل متدرج أسفل العنصر الرئيسي في الشاشات الصغيرة، مما يضمن سهولة التصفح على الهواتف.

      تفاصيل متقدمة لتحسين القوائم المنسدلة باستخدام CSS فقط

      إضافة مؤشرات بصرية (أسهم) للعناصر التي تحتوي على قائمة فرعية

      لزيادة وضوح العناصر التي تحتوي على قوائم فرعية، يُفضل إضافة رمز سهم صغير يشير إلى وجود خيارات منسدلة. يمكن تحقيق ذلك عبر CSS باستخدام خاصية ::after:

      css
      .dropdown > a::after {
  content: " ▼";
  font-size: 0.6em;
  margin-left: 6px;
  color: #fff;
}

      هذه الإضافة البسيطة تساعد المستخدم على معرفة أن العنصر يحتوي على قائمة منسدلة.

      دعم التنقل عبر لوحة المفاتيح (Accessibility)

      لجعل القوائم أكثر سهولة في الاستخدام للأشخاص الذين يستخدمون لوحة المفاتيح، يمكن الاعتماد على خاصية :focus-within التي تظهر القائمة عند تركيز لوحة المفاتيح على العنصر:

      css
      .dropdown:focus-within > .dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}

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

      تصميم متعدد المستويات (قوائم فرعية داخل قوائم فرعية)

      يمكن توسيع القوائم المنسدلة لتشمل مستويات متعددة من القوائم، وهو أمر شائع في المواقع الكبيرة التي تحتوي على تنظيم معقد.

      على سبيل المثال، قائمة فرعية داخل قائمة فرعية:

      html
      <ul class="dropdown-menu">
  <li class="dropdown-submenu">
    <a href="#">تطوير التطبيقاتa>
    <ul class="submenu">
      <li><a href="#">تطبيقات الويبa>li>
      <li><a href="#">تطبيقات الهواتفa>li>
    ul>
  li>
ul>

      والـ CSS الخاصة بها:

      css
      .dropdown-submenu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 0;
  left: 100%; /* ظهور القائمة على يمين القائمة الفرعية */
  background-color: #0073e6;
  min-width: 180px;
  display: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.dropdown-submenu:hover > .submenu {
  display: block;
}

      هذا يسمح ببناء قوائم معقدة متداخلة، مع المحافظة على تفاعل سلس عبر CSS فقط.

      مقارنة بين استخدام CSS فقط مقابل استخدام JavaScript في القوائم المنسدلة

      مزايا استخدام CSS فقط

      • الأداء: القوائم المنسدلة المعتمدة على CSS فقط تعمل بشكل أسرع لأنها لا تتطلب تحميل أو تنفيذ سكريبتات.

      • البساطة: تسهل عملية التطوير والصيانة من خلال تقليل الأكواد المعقدة.

      • التوافق: تعمل بشكل جيد عبر معظم المتصفحات الحديثة دون الحاجة إلى تعديلات.

      • الأمان: تقليل استخدام جافاسكريبت يقلل من مخاطر الثغرات الأمنية الناتجة عن تنفيذ السكريبتات.

      عيوب استخدام CSS فقط

      • القيود في التفاعل: بعض التفاعلات المعقدة أو الديناميكية لا يمكن تنفيذها بواسطة CSS فقط.

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

      • قابلية التخصيص: إمكانيات التخصيص أقل مقارنة بالبرمجة باستخدام JavaScript.

      جدول مقارنة بين الخصائص المستخدمة في القوائم المنسدلة باستخدام CSS فقط

      الخاصية الدور ملاحظات
      position: relative تحديد موضع العنصر الرئيسي يحدد نقطة المرجع للقائمة الفرعية
      position: absolute تحديد موضع القائمة الفرعية تسمح بوضع القائمة الفرعية أسفل العنصر الرئيسي
      display: none/block إخفاء وإظهار القائمة طريقة شائعة لكنها لا تدعم الانتقالات
      opacity وvisibility إخفاء وإظهار مع تأثيرات انتقال تسمح بظهور وانسياب سلس للقائمة
      :hover إظهار القائمة عند مرور الماوس أساسي لتفاعل المستخدم مع القوائم
      :focus-within دعم التنقل بلوحة المفاتيح يعزز من قابلية الوصول
      ::after إضافة رموز أو مؤشرات لتحسين وضوح العناصر التي تحتوي قوائم فرعية

      نصائح وأفضل الممارسات عند تصميم القوائم المنسدلة باستخدام CSS فقط

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

      • التأكد من قابلية الوصول: توفير دعم التنقل عبر لوحة المفاتيح والقراءة بواسطة برامج المساعدة.

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

      • تصميم متجاوب: الحرص على أن تكون القوائم صالحة للعرض بشكل جيد على كافة أحجام الشاشات.

      • توفير مؤشرات بصرية: إضافة أسهم أو رموز توضح وجود قوائم فرعية.

      • تجنب الاعتماد فقط على hover: خاصة للأجهزة اللمسية حيث لا يعمل hover كما هو الحال في الحواسيب.

      الخلاصة

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

      تعد هذه الطريقة مناسبة بشكل خاص للمشاريع التي تتطلب أداءً عالياً وبساطة في الصيانة، وهي تمثل الحل الأمثل للقوائم ذات التفاعل البسيط والمتوسط، مع إمكانات كافية لتلبية معظم احتياجات التصميم الحديثة.

      المراجع

      1. CSS-Tricks – “CSS Dropdowns”: https://css-tricks.com/

      2. MDN Web Docs – “Creating a dropdown menu with CSS”: https://developer.mozilla.org/

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

اخر تحديث 10/06/2025
14 تمت قراءة 6 دقيقة