يضبط موضع القائمة.

📚 معلومات الصفحة

الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 ملف CSS الخارجي لقائمة همبرغر

المفاهيم الأساسية

القيمة النسبية (relative): موضع عنصر عندما لا تتبعه سمات تحديد الموضع (أعلى، أسفل، يسار، يمين).

القيمة المطلقة (absolute): تحدد الموضع الدقيق للعنصر، باستخدام سمات تحديد الموضع.

خريطة المفاهيم

```markmap

قائمة همبرغر

آلية العمل

تظهر عند صغر عرض الشاشة

#### عندما يكون عرض الشاشة أقل من 700 بكسل

#### تختفي عناصر القائمة وتظهر الأيقونة

تعرض عناصر القائمة في عمود عند الضغط

يتم التحكم بها بجافا سكربت

خطوات الإنشاء

كتابة جافا سكربت

#### مقطع برمجي لإضافة/إزالة الفئة المستجيبة عند الضغط

##### إنشاء ملف خارجي بامتداد ".js"

##### ربط الملف بملف HTML

##### كتابة الدالة `myFunction()`

###### استخدام `document.getElementById("myMenu")`

###### استخدام جملة `if` الشرطية

###### استخدام معامل المساواة `===`

###### تغيير اسم الفئة باستخدام `+=`

كتابة CSS

#### إخفاء الأيقونة في الشاشات الكبيرة

##### `.menu .icon { display: none; }`

#### إظهار الأيقونة وإخفاء الروابط في الشاشات الصغيرة

##### `@media screen and (max-width: 700px)`

###### `.menu li a { display: none; }`

###### `.menu .icon { display: block; float: left; }`

#### تصميم القائمة المستجيبة عند الضغط

##### `@media screen and (max-width: 700px)`

###### `.menu.responsive { position: relative; }`

###### `.menu.responsive .icon { position: absolute; right: 0; top: 0; }`

###### `.menu.responsive a { display: block; }`

```

نقاط مهمة

يتم إضافة الكود المقدم إلى ملف CSS خارجي بامتداد `.css`.
الهدف من الكود هو جعل الموقع يستجيب لشاشات الأجهزة المختلفة.
عند جعل القائمة مستجيبة (`responsive`):

* يتم ضبط موضع القائمة باستخدام `position: relative`.

* يتم ضبط موضع الأيقونة باستخدام `position: absolute` لتكون في أعلى اليمين.

* تظهر عناصر القائمة (``) في عمود واحد.

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

نوع: محتوى تعليمي

/* Hide the icon that should open and close the menu bar on small screens */
.menu .icon {
    display: none;
}

نوع: محتوى تعليمي

/* When the screen is equal or less to 700 pixels wide, hide all menu links.
Show at left the icon that opens and closes the menu bar */
@media screen and (max-width: 700px) {
    .menu li a {
        display: none;
        text-align: center;
    }
    .menu .icon {
        float: left;
        display: block;
    }
}

نوع: محتوى تعليمي

/* The "responsive" class is added to the menu with JavaScript
when the user clicks on the icon. */
@media screen and (max-width: 700px) {
    .menu.responsive {
        position: relative;
    }
    .menu.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .menu.responsive a {
        display: block;
        text-align: center;
    }
}

نوع: محتوى تعليمي

القيمة النسبية (relative) هي موضع عنصر عندما لا تتبعه سمات تحديد الموضع (أعلى، أسفل، يسار، يمين).

ضبط موضع الأيقونة.

نوع: محتوى تعليمي

تحدد القيمة المطلقة (absolute) الموضع الدقيق للعنصر، باستخدام سمات تحديد الموضع.

يعرض عناصر القائمة في عمود.

نوع: محتوى تعليمي

يعرض عناصر القائمة في عمود.

نوع: METADATA

.css

نوع: METADATA

وزارة التعليم
Ministry of Education
2025 - 1447

نوع: METADATA

286

📄 النص الكامل للصفحة

/* Hide the icon that should open and close the menu bar on small screens */
.menu .icon {
    display: none;
}

/* When the screen is equal or less to 700 pixels wide, hide all menu links.
Show at left the icon that opens and closes the menu bar */
@media screen and (max-width: 700px) {
    .menu li a {
        display: none;
        text-align: center;
    }
    .menu .icon {
        float: left;
        display: block;
    }
}

/* The "responsive" class is added to the menu with JavaScript
when the user clicks on the icon. */
@media screen and (max-width: 700px) {
    .menu.responsive {
        position: relative;
    }
    .menu.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .menu.responsive a {
        display: block;
        text-align: center;
    }
}

--- SECTION: يضبط موضع القائمة. ---
القيمة النسبية (relative) هي موضع عنصر عندما لا تتبعه سمات تحديد الموضع (أعلى، أسفل، يسار، يمين).

--- SECTION: ضبط موضع الأيقونة. ---
تحدد القيمة المطلقة (absolute) الموضع الدقيق للعنصر، باستخدام سمات تحديد الموضع.

--- SECTION: يعرض عناصر القائمة في عمود. ---
يعرض عناصر القائمة في عمود.

.css

وزارة التعليم
Ministry of Education
2025 - 1447

286

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 4 بطاقة لهذه الصفحة

في CSS، ما هي القيمة التي تحدد موضع عنصر عندما لا تتبعه سمات تحديد الموضع (top, bottom, left, right)؟

أ) القيمة الثابتة (fixed)
ب) القيمة النسبية (relative)
ج) القيمة المطلقة (absolute)
د) القيمة اللاصقة (sticky)

الإجابة الصحيحة: b

الإجابة: القيمة النسبية (relative)

الشرح: 1. القيمة النسبية (relative) هي إحدى قواعد تحديد الموضع في CSS. 2. عند تطبيقها على عنصر، يمكن تعديل موضعه باستخدام خصائص top, bottom, left, right. 3. التعديل يكون بالنسبة للموضع الأصلي الذي كان سيشغله العنصر في التدفق الطبيعي للصفحة. 4. العناصر الأخرى في الصفحة لا تتأثر بهذا التعديل ولا تملأ الفراغ الناتج عنه.

تلميح: هذه القيمة تحدد موضع العنصر بالنسبة لموضعه الطبيعي في التدفق.

التصنيف: تعريف | المستوى: متوسط

في CSS، ما هي القيمة التي تحدد الموضع الدقيق للعنصر باستخدام سمات تحديد الموضع (top, bottom, left, right)؟

أ) القيمة النسبية (relative)
ب) القيمة الثابتة (static)
ج) القيمة المطلقة (absolute)
د) القيمة النسبية المطلقة (relative-absolute)

الإجابة الصحيحة: c

الإجابة: القيمة المطلقة (absolute)

الشرح: 1. القيمة المطلقة (absolute) هي إحدى قواعد تحديد الموضع في CSS. 2. عند تطبيقها، يتم إزالة العنصر من التدفق الطبيعي للصفحة. 3. يمكن تحديد موضعه الدقيق باستخدام خصائص top, bottom, left, right. 4. يتم تحديد الموضع بالنسبة لأقرب عنصر أب له موضع محدد (غير static)، أو بالنسبة للجسم (body) إذا لم يوجد.

تلميح: يتم إزالة العنصر من التدفق الطبيعي للصفحة عند استخدام هذه القيمة.

التصنيف: تعريف | المستوى: متوسط

ما الهدف الرئيسي من قاعدة CSS التالية: `@media screen and (max-width: 700px)`؟

أ) تطبيق أنماط التصميم فقط على الطابعات.
ب) تطبيق أنماط التصميم فقط عندما يكون عرض الشاشة أكبر من 700 بكسل.
ج) تطبيق أنماط التصميم فقط عندما يكون عرض الشاشة 700 بكسل أو أقل.
د) تطبيق أنماط التصميم على جميع أنواع الأجهزة والشاشات.

الإجابة الصحيحة: c

الإجابة: تطبيق أنماط التصميم فقط عندما يكون عرض الشاشة 700 بكسل أو أقل.

الشرح: 1. `@media` هي قاعدة في CSS تُستخدم لإنشاء استعلامات الوسائط (Media Queries). 2. `screen` تشير إلى نوع الجهاز (شاشة العرض). 3. `(max-width: 700px)` هي الشرط: تطبيق الأنماط فقط عندما يكون عرض نافذة المتصفح 700 بكسل أو أقل. 4. تُستخدم هذه التقنية بشكل أساسي في التصميم المتجاوب لضبط تخطيط الموقع وفقاً لحجم الشاشة.

تلميح: هذه القاعدة مرتبطة بتصميم الويب المتجاوب (Responsive Web Design).

التصنيف: مفهوم جوهري | المستوى: متوسط

في سياق تصميم القوائم المتجاوبة، ما الذي تفعله الخاصية `display: none;` عند تطبيقها على رابط في القائمة؟

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

الإجابة الصحيحة: b

الإجابة: إخفاء الرابط وجعله غير مرئي وغير قابل للنقر.

الشرح: 1. `display` هي خاصية CSS تتحكم في كيفية عرض العنصر. 2. القيمة `none` تجعل العنصر مخفياً تماماً. 3. لا يشغل العنصر المخفي أي مساحة في تخطيط الصفحة. 4. لا يمكن للمستخدم رؤيته أو التفاعل معه (النقر). 5. تُستخدم هذه الخاصية في التصميم المتجاوب لإخفاء عناصر القائمة على الشاشات الصغيرة وإظهار أيقونة القائمة بدلاً منها.

تلميح: هذه الخاصية تزيل العنصر من تدفق العرض المرئي.

التصنيف: مفهوم جوهري | المستوى: سهل