توفر القائمة المنسدلة عرضًا واضحًا ومرتبًا لجميع الأقسام الرئيسية للصفحة، جنبًا إلى جنب مع الأقسام الفرعية الموجودة بداخلها. كل ما تحتاجه لإظهار الأقسام الفرعية هو تحريك مؤشر الماوس فوق الأقسام الرئيسية. يمكنك إنشاء قائمة منسدلة باستخدام كود HTML و CSS فقط.
خطوات
كتابة كود HTML
1 قم بإنشاء قسم التنقل (التحكم والملاحة). ستختار عادة
كتابة كود CSS
1 افتح نمط CSS أو ورقة أنماط. قم بالارتباط بورقة أنماط CSS في قسم الرأس في مستند HTML إذا لم تكن قد قمت بذلك بالفعل. لا تتناول هذه المقالة أساسيات CSS، مثل تعيين لون الخط والخلفية.
2 أضف كود clearfix. هل تتذكر فئة “clearfix” التي أضفتها إلى القائمة عادةً ما تحتوي العناصر الموجودة في القائمة المنسدلة على خلفية شفافة، وقد تتسبب في تحريك عناصر أخرى حولها. يمكنك حل هذه المشكلة باستخدام قرص CSS سريع. إليك حل قصير وبسيط لن يدعم Internet Explorer 7 والإصدارات الأقدم X
3. clearfix بعد {content “”؛ جدول العرض؛ }
4 إنشاء الهيكل الأساسي. سيقوم هذا الرمز بترتيب القائمة في أعلى الصفحة وإخفاء العناصر المنسدلة. ستجد أنه مجرد رمز بسيط للتركيز على ما هو مهم. يمكنك الإضافة إليه لاحقًا بخصائص CSS إضافية مثل الهوامش والحواف.
5. مغلف nav {العرض 100٪؛ الخلفية # 999 ؛ } .nav-menu {position النسبي؛ عرض مضمنة كتلة ؛ } .nav-menuli {display inline؛ نوع نمط القائمة لا شيء ؛ }. القائمة الفرعية {الموقف مطلق؛ عرض لا شيء؛ الخلفية #ccc ؛ }
6 اجعل عناصر القائمة المنسدلة تظهر عند تحريك مؤشر الماوس. لم يتم بعد تحديد عرض عناصر القائمة المنسدلة. فيما يلي كيفية جعل القوائم الفرعية بأكملها تظهر عند المرور فوق القوائم الرئيسية الخاصة بها
7.nav-menu ul li hover> ul {display inline-block؛ }
لاحظ ما يلي إذا أدت عناصر القائمة المنسدلة إلى قوائم إضافية أخرى، فستؤثر جميع الخصائص التي تضيفها هنا عليها جميعًا. إذا كنت تريد فقط تعديل نمط قوائم المستوى الأول المنسدلة، فاستخدم “.nav-menu> ul” بدلاً من ذلك. X موارد البحث
أشر إلى القائمة المنسدلة التي تحتوي على سهم. يظهر مصممو الويب عادةً أن العنصر يفتح قائمة منسدلة بسهم يشير لأسفل. سيضيف هذا الرمز هذا السهم إلى كل عنصر في قائمتك X search Resource
.nav-menu> ul> li بعد {content “\ 25BC”؛ / * escapedunicodeforthedownarrow * / font-size .5em؛ عرض مضمنة ؛ الموقف نسبي ؛ }
ملاحظة قم بإجراء تعديلات على موضع السهم باستخدام الخصائص لأعلى أو لأسفل أو لليمين أو لليسار.
ملاحظة إذا لم تكن كل عناصر القائمة تحتوي على قوائم منسدلة، فلا تقم بتعديل النمط الكامل لفئة قائمة التنقل، ولكن أضف فئة أخرى (مثل القائمة المنسدلة) لكل عنصر li في HTML حيث تريد وضع سهم. أشر إلى الفصل بدلاً من ذلك في الكود أعلاه.
قم بتعيين الهوامش والخلفية والخصائص الأخرى. ستكون القائمة الآن قابلة للاستخدام، لكنها تحتاج إلى تعديل جمالي. إذا لم تكن معتادًا على خصائص CSS الأساسية، فتعلم المزيد هنا. استخدم هذه الخصائص لتغيير مظهر وموقع فئة كل عنصر.
أفكار مفيدة
إذا كنت تريد إضافة قائمة منسدلة إلى نموذج، فإن HTML 5 يجعل ذلك أسهل باستخدام ملف