اهلا، ومرحبًا بعودتكم خمن ماذا؟ سنقوم بعمل شئ اّخر، و وستناول سويًا شريط التنقل النهائي الخاص بنا
في مراجعة درس البرمجة هذا. ومع ذلك،
فإن هذا يبدو مختلفًا قليلاً، ليس فقط من أجل الطريقة التي نرتب بها الأشياء،
ولكن لأنني أريد أن أتحدث إليكم عن إمكانية وصول عدد الأشخاص
الذين يقومون بإنشاء شريط التنقل الخاص بهم. الطريقة الجديدة، لقد استخدمت هذه الطريقة،
وهى إنشاء روابط التنقل الخاصة بك كجزء من القوائم. لذا يمكنك أن ترى أنه لدينا هنا مختلفًا بعض الشئ. لدى قائمة غير مرتبة بها عناصر قائمة
واحد، اثنان، ثلاثة، أربعة و كما أن بعض عناصر القائمة هذه فيها قوائم غير مرتبة. حيث أن هذا شائع جدًا، هناك بعض الإشكاليات المتعلقة بالاستخدام،
عندما تدرك ذلك، هل هذه حقًا قوائم؟ لأنه إن لم يكن الأمر كذلك، هذه علامة دلالية نستخدمها،
وربما يتعين علينا تجنب استخدامها. لكنها شائعة جدًا، أريد أن أعرضها عليكم
وأجعلكم تتعاملون معها وتأخذ قراراتك. والإشكالية الأخرى هى
عندما نجعل شريط التنقل المنسدل هذا، يتعلق بإمكانية وصول الأشخاص القادرين على الوقف فوق أشياء معينة تريد تنشيطها. أعتقد أننا كنا جميعًا هناك، عندما كنا في صفحة الويب، ونحاول الوقوف فوق شئ ما للنقر فوق رابط ما. وتستمر في الظهور لأن يدنا تهتز كثيرًا أو علينا أن نقف فوق ثلاثة أشياء في نفس الوقت. لذا فمرة أخرى، بينما أريد مشاركة هذه التقنية معكم، ومساعدتكم على الفهم،
اّمل أن تتأكدوا من أن كل تطبيق تصمموه، تبذلون فيه قصارى جهدكم لكى تتأكدوا من إمكانية الوصول إليه. لذا، مرة أخرى، لنبدأ بهذا النوع البسيط،
الخاص ببرمجة HTML الممل، ونرى إن لم نستطع أن نجعله شيئًا أكثر إثارة بعض الشئ. ما لدينا الاّن هنا هو شريط التنقل الأفقي والذي يحتوي على عناصر منبثقة لأسفل. لذا، عندما أعود إلى المنزل لا يوجد شئ إضافي يمكن رؤيته،
لكن عندما أمر على الصولا يمكنك أن ترى أن لدى ثلاثة روابط إضافية يمكنني تجريب ونفس الشئ يحدث مع الإرشادات، وقائمة الاتصال،
مرة أخرى، كل شئ بذاته. فكيف فعلت هذا؟ كيف فعلت ذلك حتى لا تظهر 2015, 14, و 13
حتى تقوم بالوقوف أو المرور فوقها؟ وبالمثل مع الإرشادات. لنلقِ نظرة حسنًا، سأتخطى الهيكل في التنقل لأنني أعمل أنكم تعرفون كيف تقومون بكل هذا. بدلاً من ذلك، سنتحدث عن القوائم المختلفة نفسها. معذرة، عناصر القائمة نفسها في الروابط. إذًا ما فعلته هو أنني دخلت هنا نوعا ما حتى يمكنكم رؤية كليهما في نفس الوقت واللون خافت جدًا، اّمل لو أنني اخترت لونًا مختلفًا الاّن. لكن لدى إطار بين كل من هذه الخيارات. الاّن قد يبدو غريبًا بعض الشئ بالنسبة لي أن يكون لدى إطار هنا على هذا الجانب. لذا ما كان علىً فعله هو أن أذهب وقلت أتعلم ماذا؟ بالنسبة لاّخر عنصر بالقائمة، اّخر اّخر عنصر،
فلا نضع إطارًا فيه. ها هى بعض التعديلات الصغيرة التي يمكن إدخالها في برمجتك لتجعلها تبدو أكثر اختراقية بعض الشئ. كما أننا لا نريد إطاراتًا على العناصر الفرعية، أليس كذلك؟ لأنه لا يوجد شئ. نظرًا لأنها محظورة، فلسنا بحاجة إلى إطارات على الجانب. لذا ، فعلت نفس الشيء هنا، حيث قلت ، أتعلمون؟ لا أريد استخدام أى إطارات هنا. إلى الأمام بشكل مستقيم، اّمل ذلك. الاّن لنلقي نظرة من جديد. لقد قمت بتصميم بسيط في روابط التنقل الخاصة بي، حسنًا؟ الشيء الوحيد الذي أضفته، مرة أخرى، هو أنني أردت أن أريكم مثالًا لاستخدام الانتقال. الانتقال هنا هو ما يغير اللون رويدًا رويدًا
عندما تقوم بالوقوف فوق عنصر ما، بدلاً من إحداث تغير سريع. حتى يمكنكم أن تروا، هذه العملية تدجريجيًا
بدلاً من رؤيتها بشكل مفاجئ، حسنًا؟ نشط فقط مثل آخر مرة. الآن، هذا هو الجزء المثير للاهتمام. سنتحدث عن القوائم الفرعية، حسناً؟ إذًا، كيف يحدد المتصفح
إذا كان هناك شيئًا ما في قائمة فرعية؟ حسنًا ، يمكنه إلقاء نظرة على DOM ،
ويمكنه التحرك إلى أسفل والذهاب ، أوه ، أنا في مرحلة التنقل. والآن أنا في قائمة غير مرتبة، وها أنا هنا في عنصر قائمة. وإذا وُجد عنصر قائمة آخر في الأسفل ،
فهذا نوع من أنواع التسلسل ، إنه يعرف ، أوه ، أوه ، أنا في قائمة فرعية. حسنًا، هنا، تعرف أنني في قائمة التنقل، أنا داخل قائمة ، ووجدت للتو قائمة غير مرتبة بالداخل. لذا ما قمنا بفعله كي لا يظهر في البداية هو أنني قمت بضبط الموضع على مطلق ،
وقمت بضبط بالعرض على لا شيء. لذلك لن تظهر بشكل افتراضي. لن يحدث ذلك. حسنًا؟ لذا، كيف يمكنني الحصول عليها بحيث تظهر فجأة إذا أردنا القيام بشيء على هذا الخط؟ حسنًا، نريد معرفة كيفية تغييره هنا،
عندما نقف على عنصر من عناصر القائمة التي تحتوي على قائمة غير مرتبة تحتها،
قم بتغيير هذا العرض من لا شيء إلى الحظر. إذاً، هذان السطران من الترميز هنا، هذا حقًا هو كيفية ضبطه. لذا عندما أذهب هنا، بشكل افتراضي ، العرض: لا شيء ،
ولكن عندما أقوم فوق العنصر، يصبح العرض محظورًا. إنه رمز بسيط جدًا وقصير جدًا
كما أنه مفهوم قوي جدًا علينا أن ندركه. لقد أوضحت لك عدة طرق مختلفة
يمكنك من خلالها تنسيق أشرطة التنقل الخاصة بك. لدينا شريط أفقي، ورأسي ، ومنسدل (منبثق). آمل حقًا أن تختار واحدًا تستأنس التعامل معه، أو أنك تختار حقًا في الواقع الأكثر إثارة وتقوم بتصميم شريطًا واحدًا لمشروعك النهائي هنا
في دورة CSS هذه. لا تقلق بشأن المشكلات التي تتعرض لها. انشرها على لوحة المناقشة. تصفح الإنترنت وابحث عن الإجابات. ولكن ما أتمناه حقًا
هو أنه يمكنك إنشاء شيء تفتخر به، هذا أمر جميل ويمكن تحقيقه. حظ سعيد.