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