فكونتاكتي هي واحدة من الشبكات الاجتماعية الأكثر شعبية في روسيا وبلدان رابطة الدول المستقلة. يوفر العديد من الميزات ، من بينها إيلاء اهتمام خاص للملاحة سهلة الاستخدام على الموقع. إحدى أدوات التنقل هذه هي القوائم المنسدلة ، والتي تسمح لك بتحديد الخيار المطلوب من القائمة المقترحة. في هذه المقالة ، سننظر في كيفية إنشاء قائمة منسدلة مشابهة لتلك المستخدمة في فكونتاكتي.
لإنشاء قائمة منسدلة مماثلة ل فكونتاكتي ، تحتاج إلى استخدام لغة ترميز هتمل و كس. سوف هتمل مساعدة هيكل محتوى الصفحة ، وسوف كس تسمح لك نمط عناصر القائمة وإنشاء الرسوم المتحركة عند فتح وإغلاق القائمة. قد يبدو إنشاء مثل هذه القائمة معقدا ، ولكنه في الواقع بسيط جدا إذا كنت تعرف أساسيات هتمل و كس.
قبل البدء في إنشاء قائمة منسدلة ، ستحتاج إلى تحديد محتويات القائمة وهيكلها. لنلق نظرة على مثال لقائمة تقدم خيارا للغة:
اختر لغة:
- الروسية
- الإنجليزية
- الألمانية
- الفرنسية
- الإسبانية
لإنشاء مثل هذه القائمة ، وسوف نحتاج الحاويات ، على سبيل المثال ، ديف العلامات ، وقائمة مجتمعة في كتلة أول باستخدام لي العلامات. ستكون الحاوية مسؤولة عن تخزين القائمة وإخفائها ، وستحتوي القائمة على عناصر يمكن للمستخدم تحديد خيار منها.
إنشاء قائمة منسدلة أنيقة في هتمل و كس
لإنشاء قائمة منسدلة أنيقة في هتمل و كس ، يمكنك استخدام مجموعة من العلامات و . تحدد العلامة القائمة المنسدلة ، وتحدد العلامة كل خيار تحديد.
نموذج التعليمات البرمجية لإنشاء قائمة منسدلة:
الخيار 1
الخيار 2
الخيار 3
في هذا المثال ، ستحتوي القائمة على ثلاثة خيارات:" الخيار 1 "و" الخيار 2 "و"الخيار 3".
ومع ذلك ، لإنشاء قائمة منسدلة أنيقة ومخصصة ، سوف تحتاج إلى استخدام كس. باستخدام كس ، يمكنك تغيير مظهر عناصر القائمة ، على سبيل المثال ، تعيين لون الخلفية والخط والأبعاد ، وما إلى ذلك.
مثال على أنماط كس لتخصيص قائمة منسدلة:
حجم الخط: 16 بكسل;
لون الخلفية: # اف 5 اف 5 اف 5;
و
لإنشاء صفوف وأعمدة ، على التوالي. يمكن أن يحتوي كل صف على عدة أعمدة تحتوي على معلومات حول كل عنصر في القائمة.
مثال على بنية القائمة: