المحتوى

• لتخطو
• جزء 1 من 2: كتابة HTML
• جزء 2 من 2: كتابة CSS
• نصائح

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

لتخطو

جزء 1 من 2: كتابة HTML

1. قم بإنشاء قسم التنقل الخاص بك. عادةً ما تستخدم التنقل> لشريط التنقل على مستوى موقع الويب ، أو العنوان> لأقسام الارتباط الأصغر المرتبطة بالصفحة ، أو div> إذا لم يكن هناك خيار آخر مناسب. ضع هذا في عنصر div> حتى تتمكن من ضبط نمط الحاوية والقائمة نفسها.
   • div>
   • التنقل>
   • / التنقل>
   • / div>
2. امنح كل قسم سمة فئة. سنستخدم سمة class لاحقًا لتعديل نمط هذه العناصر باستخدام CSS. امنح كل من الحاوية والقائمة سمة الفئة الخاصة بهما.
   • div>
   • التنقل>
   • / التنقل>
   • / div>
3. أضف قائمة بعناصر القائمة. تحتوي القائمة غير المرتبة (ul>) على عناصر القائمة الرئيسية (عناصر القائمة li>) ، إذا حرك المستخدم الماوس فوقها ، فسيشاهد القوائم المنسدلة. أضف الفئة "clearfix" إلى عنصر القائمة ؛ سنصل إلى هذا لاحقًا في جدول بيانات CSS.
   • div>
   • التنقل>
   •       ul>
   •          li> الصفحة الرئيسية / li>
   •          li> الموظفين
   •          li> الاتصال
   •          / لي>
   •       / ul>
   • / التنقل>
   • / div>
4. أضف روابط. إذا كانت عناصر القائمة ذات المستوى الأعلى مرتبطة أيضًا بصفحاتها الخاصة ، فيمكنك الآن إدراج الروابط. ارتباط إلى نقطة ارتساء غير موجودة (مثل "#!") ، حتى لو لم ترتبط بأي شيء ، لذلك سيبدو مؤشر المستخدم مختلفًا. في هذا المثال ، لا يؤدي "جهات الاتصال" إلى أي مكان ، ولكن عناصر القائمة الأخرى تعمل:
   • div>
   • التنقل>
   • ul>
   • لي>أ href = "/">منزل، بيت/ أ>/ لي>
   • لي>a href = "/ الموظفون">طاقم العمل/ أ>
   • / لي>
   • لي>a href = "#!">اتصال/ أ>
   • / لي>
   • / ul>
   • / التنقل>
   • / div>
5. إنشاء قوائم فرعية لعناصر القائمة المنسدلة. بعد إنشاء النمط ، تشكل هذه القوائم القائمة المنسدلة. ضع القائمة في عنصر القائمة الذي سيمرر المستخدم الماوس فوقه. أضف سمة فئة ورابطًا تمامًا كما كان من قبل.
   • div>
   • التنقل>
   • ul>
   • li> a href = "/"> الصفحة الرئيسية / a> / li>
   • li> a href = "/ الموظفون"> الموظفون / أ>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / لي>
   • li> a href = "#!"> جهة الاتصال / أ>
   •          ul>
   •             li> a href = "mailto: [email protected]"> الإبلاغ عن مشكلة / a> / li>
   •             li> a href = "/ support"> Customer Support / a> / li>
   •          / ul>
   • / لي>
   • / ul>
   • / التنقل>
   • / div>

جزء 2 من 2: كتابة CSS

1. افتح ورقة أنماط CSS الخاصة بك. انشر رابطًا إلى ورقة أنماط CSS في قسم الرأس في مستند HTML إذا لم يكن الرابط موجودًا بالفعل. في هذه المقالة ، لن نغطي أساسيات CSS ، مثل تعيين لون الخط والخلفية.
2. أضف كود clearfix. تذكر إضافة فئة "clearfix" إلى قائمة القائمة؟ عادةً ما تحتوي عناصر القائمة المنسدلة على خلفية شفافة تسمح بنقل العناصر الأخرى. يمكن للتكيف البسيط مع CSS حل هذه المشكلة. إليك حل رائع وسريع ، على الرغم من أنه لن يعمل في Internet Explorer 7 والإصدارات الأقدم:
   • .clearfix: بعد {
   • المحتوى: ""؛
   • جدول العرض؛
   • }
3. قم بإنشاء التصميم الأساسي. باستخدام هذا الرمز ، يمكنك وضع قائمتك في الجزء العلوي من الصفحة وإخفاء عناصر القائمة المنسدلة. هذا بسيط جدًا عن قصد حتى نتمكن من التركيز على الكود ذي الصلة. يمكنك تعديله لاحقًا برمز CSS إضافي ، مثل المساحة المتروكة والهامش.
   • .nav-wrapper {
   • العرض: 100٪؛
   • الخلفية: # 008B8B ؛
   • }
   •  
   • قائمة .nav {
   • الموقف: نسبي ؛
   • عرض: مضمنة كتلة ؛
   • }
   •  
   • قائمة فرعية {
   • الموقف: مطلق.
   • عرض لا شيء؛
   • الخلفية: # 555 ؛
   • }
4. اجعل عناصر القائمة المنسدلة تظهر عند تحريك الماوس فوقها. تم الآن تعيين العناصر الموجودة في القائمة المنسدلة بحيث لا يتم عرضها. فيما يلي كيفية جعل قائمة فرعية كاملة تظهر بمجرد تحريك مؤشر الماوس فوق "الأصل":
   • .nav-menu ul li: hover> ul {
   • العرض محجوب؛
   • }
   • ملاحظة - إذا كانت القوائم الإضافية مخفية في عناصر القائمة في القائمة المنسدلة ، فسيتم تطبيق الخصائص المضافة هنا على جميع القوائم. إذا كنت تريد فقط تطبيق النمط على المستوى الأول من القوائم المنسدلة ، فاستخدم ".nav-menu> ul" بدلاً من ذلك.
5. وضح بسهم أن هناك قائمة منسدلة. يظهر مصممو الويب عادةً بسهم لأسفل أن العنصر يفتح قائمة منسدلة. تضيف هذه الشفرة هذا السهم إلى كل عنصر في قائمتك:
   • قائمة .nav> ul> li: بعد {
   • المحتوى: " 25BC" ؛ / * هروب unicode للسهم لأسفل * /
   • حجم الخط: .5em ؛
   • العرض محجوب؛
   • الموقف: مطلق.
   •    }
   • ملاحظة - اضبط موضع السهم بخصائص أعلى أو أسفل أو يمينًا أو يسارًا.
   • ملاحظة - إذا لم تكن كل عناصر القائمة لديك تحتوي على قوائم منسدلة ، فلا تقم بتغيير مظهر قائمة تنقل الفصل بالكامل. بدلاً من ذلك ، أضف فئة أخرى (مثل القائمة المنسدلة) لكل عنصر li حيث تريد سهمًا. الرجوع إلى تلك الفئة في الكود أعلاه.
6. اضبط المساحة المتروكة والخلفية والخصائص الأخرى. يجب أن تعمل القائمة الآن ، لكنها ليست لطيفة جدًا بعد. باستخدام الخصائص في CSS ، يمكنك تخصيص شكل كل فئة أو عنصر ومكان تواجدهما.

نصائح

• إذا كنت ترغب في إضافة قائمة منسدلة إلى نموذج ، فمن السهل جدًا استخدام HTML5 مع تحديد العنصر>.
• الارتباط a href = "#"> يتم تمريره إلى أعلى الصفحة ، والرابط الذي يشير إلى نقطة ارتساء غير موجودة ، مثل href = "#!"> ، لا يتم التمرير. إذا شعرت أن هذا الأمر مهمل للغاية ، فيمكنك تغيير شكل المؤشر باستخدام CSS.
• عند نسخ ولصق نموذج التعليمات البرمجية ، قم بإزالة كافة الرموز النقطية.