📝 ملخص الصفحة
📚 قائمة همبرغر
المفاهيم الأساسية
قائمة همبرغر (Hamburger): أيقونة من ثلاثة أسطر (خطوط متوازية تشبه البرجر) أعلى الزاوية اليسرى أو اليمنى من الموقع، عند الضغط عليها تفتح قائمة بخيارات إضافية.
خريطة المفاهيم
```markmap
قائمة همبرغر
التعريف
أيقونة من ثلاثة أسطر
تظهر في زاوية الموقع
تفتح قائمة خيارات عند الضغط
آلية العمل
تظهر عند صغر عرض الشاشة
تعرض عناصر القائمة في عمود عند الضغط
يتم التحكم بها بجافا سكربت
خطوات الإنشاء
تحميل مكتبة الأيقونات
#### إضافة الرابط في قسم
#### الرابط: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
إضافة بنية HTML
#### قسم div للقائمة
#### قسم div منفصل للأيقونة
#### فئة الأيقونة لتشغيل جافا سكربت
#### فئة الرمز (icon class) داخل
كتابة جافا سكربت
#### مقطع برمجي لإضافة/إزالة الفئة المستجيبة عند الضغط
إضافة الأنماط (CSS)
#### أنماط للقائمة العادية
#### أنماط للقائمة المستجيبة
```
نقاط مهمة
- الغرض الأساسي من القائمة هو توفير مساحة على الشاشات الصغيرة.
- يتم استخدام مكتبة Font Awesome للحصول على أيقونة القائمة.
- الرابط المضاف في `` هو لملف CSS يحتوي على الأيقونة.
- وظيفة جافا سكربت هي التبديل بين إظهار وإخفاء القائمة (إضافة/إزالة الفئة).
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
قائمة همبرغر
نوع: محتوى تعليمي
قائمة همبرغر (Hamburger) عبارة عن أيقونة من ثلاثة أسطر أعلى الزاوية اليسرى أو اليمنى من الموقع الإلكتروني، عند الضغط عليها، يمكنك فتح قائمة بها مجموعة من الخيارات الإضافية. (تتكون من ثلاثة خطوط متوازية حيث تشبه البرجر التقليدي).
نوع: محتوى تعليمي
باستخدام ملف جافا سكربت، سيتم عرض أيقونة قائمة همبرغر عندما يكون عرض الشاشة صغيراً نسبياً. وفي نفس الوقت، سيتم عرض عناصر القائمة في عمود فقط إذا ضغط المستخدم على الأيقونة.
خطوات إنشاء قائمة همبرغر:
نوع: محتوى تعليمي
نوع: محتوى تعليمي
< حمل مكتبة الأيقونات (Icons Library) إلى ملف HTML الخاص بك، واربطها بعنوان URL الخاص بها، إلى القسم الرئيسي للملف.
< أضف في ملف HTML، داخل قسم div في القائمة، قسم div منفصل يحتوي على:
< فئة الأيقونة (class): التي عند الضغط عليها، تؤدي إلى تشغيل المقطع البرمجي لاجاكا سكربت.
< فئة الرمز (icon class) (بين وسم <i >).
< أنشئ مقطعاً برمجياً لجافا سكربت يجعل القائمة تبدل بين إضافة وإزالة الفئة المستجيبة عندما يضغط المستخدم على الرمز.
< أضف النمط المناسب في قسم القائمة والقائمة المستجيبة.
تحميل مكتبة الأيقونات:
نوع: محتوى تعليمي
تحتاج أولاً إلى إضافة مكتبة الأيقونات (Icons Library) للحصول على أيقونة القائمة التي ستستخدمها، وإضافتها إلى ملف html الخاص بك. عليك إضافة الرابط التالي إلى المقطع البرمجي الخاص بك:
نوع: محتوى تعليمي
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
نوع: محتوى تعليمي
يؤدي هذا الرابط إلى ملف CSS يحتوي على الأيقونة التي تحتاج إلى استخدامها لقائمة هامبرغر.
نوع: محتوى تعليمي
<head>
<title>Football Fan Page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style_with_responsive_menu.css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
نوع: محتوى تعليمي
أضف المكتبة لإظهار الأيقونات في ملف HTML.
🎴 بطاقات تعليمية للمراجعة
عدد البطاقات: 3 بطاقة لهذه الصفحة
ما هي قائمة همبرغر (Hamburger Menu) في تصميم الويب؟
- أ) شريط تنقل ثابت يظهر دائماً في أعلى الصفحة.
- ب) أيقونة من ثلاثة أسطر أعلى الزاوية اليسرى أو اليمنى من الموقع، عند الضغط عليها تفتح قائمة بخيارات إضافية.
- ج) قائمة منسدلة تظهر عند تحويم المؤشر فوق رابط التنقل.
- د) زر كبير في منتصف الصفحة لنقل المستخدم إلى قسم رئيسي.
الإجابة الصحيحة: b
الإجابة: أيقونة من ثلاثة أسطر أعلى الزاوية اليسرى أو اليمنى من الموقع، عند الضغط عليها تفتح قائمة بخيارات إضافية.
الشرح: قائمة همبرغر هي نمط تصميم واجهة مستخدم شائع يستخدم أيقونة مكونة من ثلاثة خطوط أفقية. وظيفتها الأساسية هي إخفاء عناصر التنقل في شريط القائمة الرئيسي وعرضها فقط عند النقر على الأيقونة، مما يوفر مساحة على الشاشات ذات الأحجام الصغيرة (مثل الهواتف المحمولة).
تلميح: تتكون من ثلاثة خطوط متوازية وتظهر غالباً على الشاشات الصغيرة.
التصنيف: تعريف | المستوى: سهل
ما الخطوة الأولى المذكورة لإنشاء قائمة همبرغر متجاوبة؟
- أ) كتابة مقطع جافا سكربت كامل للتحكم في فتح وإغلاق القائمة.
- ب) تطبيق أنماط CSS للقائمة في حالة فتحها وإغلاقها.
- ج) تحميل مكتبة الأيقونات (Icons Library) وربطها بملف HTML.
- د) إضافة جميع عناصر القائمة داخل قسم div في ملف HTML.
الإجابة الصحيحة: c
الإجابة: تحميل مكتبة الأيقونات (Icons Library) وربطها بملف HTML.
الشرح: لإنشاء قائمة همبرغر وظيفية، يجب أولاً توفير الأيقونة نفسها. يتم ذلك عادةً باستخدام مكتبة أيقونات جاهزة مثل Font Awesome. الخطوة هي إضافة رابط ملف CSS الخاص بالمكتبة داخل وسم <head> في ملف HTML، مما يسمح باستخدام فئات CSS محددة لعرض أيقونة القائمة.
تلميح: تتعلق هذه الخطوة بإضافة مورد خارجي إلى رأس (head) المستند.
التصنيف: صيغة/خطوات | المستوى: متوسط
ما الوظيفة الأساسية لمقطع جافا سكربت في تنفيذ قائمة همبرغر؟
- أ) تغيير لون خلفية الموقع عند فتح القائمة.
- ب) تحميل محتوى القائمة ديناميكياً من خادم بعيد.
- ج) التبديل بين إضافة وإزالة فئة CSS معينة (مثل فئة مستجيبة) عند النقر على الأيقونة.
- د) إخفاء الأيقونة نفسها بعد النقر عليها للمرة الأولى.
الإجابة الصحيحة: c
الإجابة: التبديل بين إضافة وإزالة فئة CSS معينة (مثل فئة مستجيبة) عند النقر على الأيقونة.
الشرح: دور جافا سكربت هنا هو جعل القائمة تفاعلية. عند النقر على أيقونة الهمبرغر، ينفذ المقطع البرمجي وظيفة تقوم بتغيير حالة القائمة. يتم ذلك عادةً عن طريق التبديل (toggle) لفئة CSS (مثل .responsive) على عنصر القائمة. إضافة هذه الفئة تجعل القائمة تظهر، وإزالتها تجعلها تختفي.
تلميح: يرتبط هذا المقطع البرمجي بحدث النقر (click event) على الأيقونة.
التصنيف: مفهوم جوهري | المستوى: متوسط