بمساعدة تعليمات HTML البرمجية المختصة وقواعد CSS البسيطة ، يمكنك إنشاء قائمة منبثقة ، وتكميلها وتعديلها. باستخدام الجداول المتتالية وأدوات لغة الترميز ، يمكنك التأكد من أن القائمة نفسها تعمل بشكل صحيح في جميع المستعرضات.
تعليمات
الخطوة 1
تمسك بشريط القائمة الأساسي أولاً. قم بإنشاء قائمة ذات تعداد رقمي خاص بقائمة فرعية في محرر نصوص. عادة ما يتم استخدام "المفكرة" لهذه الأغراض. تعمل القائمة الفرعية كعنصر من عناصر القائمة الرئيسية. على سبيل المثال: العنصر الأول عنصر الفيضان عنصر الفيضان 2 عنصر الحقل 3 عنصر الحقل 4 عنصر الحقل 5
الخطوة 2
احفظ هذه القائمة في ملف html منفصل. ثم قم بإنشاء ملف.css. أدخل جميع معلمات ورقة الأنماط المطلوبة. افعل ذلك بحذر شديد ، لأن خطأً واحدًا ، ولن يتم عرض القائمة المنبثقة بشكل صحيح أو لن تعمل على الإطلاق.
الخطوه 3
أزل أي رصاصات وحشوة مطبقة في قائمة التعداد النقطي. اضبط عرض القائمة باستخدام أدوات CSS: ul -style: none؛ width: 200px؛ }
الخطوة 4
قم بتمييز الموضع النسبي لجميع العناصر في القائمة بسمة تسمى position: ul li: النسبي؛ }
الخطوة الخامسة
ثم رتب القائمة الفرعية ، التي ستظهر عناصرها من القائمة الرئيسية إلى اليمين عندما يكون مؤشر الماوس فوق العنصر: li ul: مطلق ؛ يسار: 199 بكسل ؛ أعلى: 0 ؛ عرض: لا شيء ؛ }
الخطوة 6
السمة اليسرى أقل بمقدار بكسل واحد من عرض القائمة نفسها. يسمح ذلك بوضع العناصر المنبثقة بشكل صحيح دون إنشاء حدود مزدوجة. تُستخدم سمة العرض لإخفاء القائمة الفرعية عند فتح الصفحة.
الخطوة 7
صمم الروابط حسب الحاجة باستخدام خيارات css المناسبة. قم بتضمين معلمة display: block بحيث تشغل الروابط كل المساحة المحجوزة لها. لجعل القائمة تظهر عندما يحوم مؤشر الماوس فوقها ، أدخل الكود التالي: li: hover ul: block؛ }
الخطوة 8
قم بتعيين خيارات إضافية لعرض عناصر القائمة والروابط حسب الرغبة. قم بتضمين سمة في ملف html. القائمة المنبثقة جاهزة للاستخدام.
