يعد إنشاء قوائم منسدلة أنيقة وعملية أحد الجوانب المهمة لتطوير صفحة الويب. إنها تسمح لك بتنظيم المعلومات بطريقة مريحة وصغيرة الحجم ، مما يوفر للمستخدم سهولة الوصول إلى البيانات الضرورية. في هذه المقالة ، سننظر في عدة طرق لإنشاء قوائم منسدلة أنيقة باستخدام كس.
واحدة من أسهل الطرق لإنشاء قائمة منسدلة هي استخدام علامة هتمل القياسية مع سمة الحجم="1". ومع ذلك ، فإن هذه القائمة لديها خيارات تصميم محدودة ولا تلبي دائما متطلبات التصميم.
وهناك طريقة أكثر مرونة وتنوعا لإنشاء قائمة منسدلة أنيقة هي استخدام مزيج من كس وجافا سكريبت. باستخدام كس ، يمكنك تعيين مظهر القائمة ، وباستخدام جافا سكريبت ، يمكنك إضافة وظائف إضافية ، مثل تحريك فتح وإغلاق القائمة أو القدرة على تحديد عناصر متعددة. يتيح لك هذا الأسلوب إنشاء قوائم منسدلة فريدة وأنيقة تلبي تماما متطلبات تصميم موقعك.
- لماذا تسقط القائمة?
- الطريقة الكلاسيكية لإنشاء قوائم منسدلة في كس
- إنشاء قائمة منسدلة أنيقة باستخدام العنصر الزائف:: بعد
- إضافة الرسوم المتحركة إلى القائمة المنسدلة
- تغيير مظهر العنصر النشط
- تصميم قائمة منسدلة باستخدام صورة خلفية
- استخدام أطر كس لإنشاء قوائم منسدلة أنيقة
- التوافق عبر المتصفح والقدرة على التكيف للقوائم المنسدلة
- سؤال وجواب
- ما هي الأدوات اللازمة لإنشاء قوائم منسدلة أنيقة في كس?
- كيف يمكنني إنشاء قائمة منسدلة بسيطة في المغلق?
- كيف يمكنني تغيير نمط القائمة المنسدلة?
- كيف يمكنني إنشاء قائمة منسدلة باستخدام جافا سكريبت?
- هل من الممكن لخلق أنماط مخصصة لكل عنصر القائمة المنسدلة?
- كيف يمكنني إضافة الرسوم المتحركة إلى القائمة المنسدلة?
لماذا تسقط القائمة?
القائمة المنسدلة هي عنصر واجهة يسمح للمستخدم بتحديد خيار واحد أو أكثر من القائمة المقترحة. إنه مناسب جدا لاختيار العناصر من عدد كبير من الخيارات.
لماذا تسقط القائمة? الجواب بسيط-تسقط القائمة لأننا نريدها! يتم إنشاء القائمة المنسدلة باستخدام أنماط كود كس وجافا سكريبت. عند النقر فوق عنصر في القائمة ، فإنه "يسقط" ويعرض جميع الخيارات المتاحة للاختيار من بينها.
لإنشاء قائمة منسدلة في كس ، نستخدم العلامات الرئيسية:
يمكن تخصيص المظهر المحدد للقوائم باستخدام أنماط كس مثل لون الخلفية ولون النص وحجم الخط والهوامش والمزيد. يمكنك أيضا إضافة رسوم متحركة وتأثيرات عند التفاعل مع القائمة المنسدلة.
من المهم ملاحظة أن المكتبات أو الأطر الإضافية مثل مسج أو التمهيد قد تكون مطلوبة لإنشاء قوائم منسدلة معقدة. أنها توفر حلولا جاهزة ووظائف إضافية لإنشاء قوائم منسدلة أنيقة وتفاعلية.
نتيجة لذلك ، يعد إنشاء قوائم منسدلة أنيقة باستخدام كس طريقة سهلة لجعل تفاعل المستخدم أكثر ملاءمة وإرضاء من الناحية الجمالية.
الطريقة الكلاسيكية لإنشاء قوائم منسدلة في كس
غالبا ما يواجه مطورو الويب الحاجة إلى إنشاء قوائم منسدلة في كس. هناك عدة طرق لتنفيذ مثل هذا العنصر ، ولكن واحدة من الأكثر شعبية هي الطريقة الكلاسيكية. تستخدم هذه الطريقة مجموعة من علامات هتمل وأنماط كس المختلفة لإنشاء التأثير المطلوب.
بادئ ذي بدء ، نقوم بإنشاء قائمة منتظمة باستخدام
- ال والعلامات
الركن 3
بعد ذلك ، نقوم بتصميم هذه القائمة لجعلها منسدلة. للقيام بذلك ، نستخدم جداول كس.
.قائمة منسدلة {
موضع: نسبي;
عرض: مضمنة كتلة;
}
.القائمة المنسدلة-المحتوى {
عرض: لا شيء;
موضع: مطلق;
ض-الفهرس: 1;
}
.القائمة المنسدلة: تحوم .القائمة المنسدلة-المحتوى {
عرض: كتلة;
}
والعنصر الزائف:: بعد. لنبدأ بإنشاء الترميز الأساسي لقائمتنا:
النقطة 1
الفقرة 3
الفقرة 4
ثم سنضيف الأنماط التالية إلى قائمتنا:
- في هذا المثال ، نستخدم عنصرا زائفا ::بعد إنشاء سهم يشير إلى القائمة المنسدلة. العنصر الأصل
- يجب أن يكون لها موضع نسبي بحيث يمكن وضع العنصر الزائف تماما بالنسبة له.
- نضيف أيضا بعض كس إلى نمط العنصر الزائف:: بعد على تحوم. في هذا المثال ، عندما يحوم المستخدم فوق القائمة المنسدلة ، يتحول السهم إلى اللون الأحمر.
- الآن بعد أن قمنا بإعداد أنماط العناصر والعنصر الزائف ، أصبحت قائمتنا المنسدلة جاهزة للاستخدام. سيتمكن المستخدمون من رؤية العناصر وتحديدها من القائمة بالنقر فوق السهم.
مثال:
النقطة 1
الفقرة 2
الفقرة 3
1. افتتاح سلس للقائمة
تتمثل إحدى طرق إضافة الرسوم المتحركة إلى القائمة المنسدلة في التوسع بسلاسة عند تحريك المؤشر. للقيام بذلك ، يمكنك استخدام فئة زائفة
: تحوم
و
الملكية ذات الارتفاع الأقصى
لتغيير ارتفاع القائمة بسلاسة.
المجاهدين {
أقصى ارتفاع: 0;
تجاوز: مخفي;
الانتقال: أقصى ارتفاع 0.5 ثانية سهولة;
}
: نث-الطفل
والخصائص
التعتيم
و
transform
.
li {
opacity: 0;
transform: translateX(-100px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
li:nth-child(1) {
transition-delay: 0.1s;
}
li:nth-child(2) {
transition-delay: 0.2s;
}
li:nth-child(3) {
transition-delay: 0.3s;
}
ul:hover li {
opacity: 1;
transform: translateX(0);
}
В данном примере при наведении курсора на список, каждый элемент списка будет появляться с задержкой. Это создаст эффект плавного появления элементов.
3. أنواع أخرى من الرسوم المتحركة
بالإضافة إلى هذه الأمثلة ، هناك العديد من الطرق الأخرى لإضافة الرسوم المتحركة إلى القوائم المنسدلة في كس. يمكن أن يشمل ذلك تغيير لون عناصر القائمة أو حجمها أو موضعها ، واستخدام الإطارات الرئيسية للرسوم المتحركة والمزيد. يمكن تخصيص كل طريقة من هذه الطرق ودمجها لتحقيق التأثير المطلوب.
- أخيرا ، تتيح لك إضافة الرسوم المتحركة إلى القائمة المنسدلة جعلها أكثر جاذبية وتفاعلية للمستخدمين. يعتمد مظهر وتأثير التفاعل مع القائمة المنسدلة على اختيار الرسوم المتحركة وإعدادها.
- لتغيير مظهر العنصر النشط ، يمكنك استخدام خصائص كس: تحوم و: التركيز. الخاصية: يتم تطبيق التمرير عندما يحوم المستخدم فوق عنصر ، والخاصية: التركيز-عندما يتم التركيز على عنصر عند تحديده باستخدام لوحة المفاتيح.
| تغيير مظهر العنصر النشط | العنصر النشط في القائمة المنسدلة هو العنصر الذي مرر المستخدم فوقه أو حدده باستخدام لوحة المفاتيح. عند التمرير فوق عنصر نشط أو تحديده ، يمكنك تغيير مظهره للإشارة إلى اختيار المستخدم. |
| مثال على استخدام خصائص كس :مرر مؤشر الماوس لتغيير مظهر العنصر النشط في القائمة المنسدلة: |
إنشاء فئة للعنصر النشط:
- .نشط
- الركن 1
| وزن الخط: غامق; | تطبيق الطبقة .نشط للعناصر التي تصبح نشطة عند تحريك المؤشر فوقها: |
| مثال على استخدام خصائص كس: التركيز لتغيير مظهر العنصر النشط في القائمة المنسدلة: |
إنشاء فئة للعنصر النشط:
.نشط
لون الخلفية: أصفر;
تطبيق الطبقة .نشط للعناصر التي تصبح نشطة عند تحديدها باستخدام لوحة المفاتيح:
الركن 1
باستخدام خصائص كس: تحوم و :التركيز ، يمكنك بسهولة تغيير مظهر العنصر النشط في القائمة المنسدلة بحيث يمكن للمستخدم معرفة العنصر الذي حدده أو الذي يوجد عليه المؤشر.
تصميم قائمة منسدلة باستخدام صورة خلفية
بالإضافة إلى استخدام الألوان والخطوط ، يمكنك تصميم القائمة المنسدلة باستخدام صورة الخلفية. هذا يسمح لك بإعطاء القائمة مظهرا فريدا والتأكيد على أهميتها.
لإضافة صورة خلفية إلى القائمة المنسدلة ، يمكنك استخدام خاصية صورة خلفية كس. يتم تحديد عنوان ورل للصورة على أنه قيمة هذه الخاصية. يمكنك أيضا ضبط موضع الصورة وتكرارها وحجمها باستخدام خصائص كس الأخرى.
مثال على تصميم قائمة منسدلة باستخدام صورة خلفية:
الخيار 1
الخيار 2
الخيار 3
- هناك العديد من أطر كس الشائعة التي تقدم أنماطا جاهزة لإنشاء قوائم منسدلة. يتضمن بعضها فصولا وأنماط خاصة تجعل من السهل إضافة تأثيرات ورسوم متحركة مختلفة إلى القوائم.
- يمكنك بسهولة إنشاء قائمة مع العناصر المنسدلة وتخصيص تصميمها.
- يمكنك بسهولة تخصيص مظهر وسلوك القائمة.
واجهة المستخدم الدلالية: إطار آخر كس شعبية التي تقدم مجموعة متنوعة من المكونات الجاهزة والأساليب لإنشاء صفحات ويب أنيقة. يتضمن أيضا فصولا لإنشاء قوائم منسدلة. باستخدام الطبقات
القائمة المنسدلة لواجهة المستخدم
و
القائمة
يمكنك بسهولة تخصيص مظهر القائمة وإضافة الرسوم المتحركة عند فتحها وإغلاقها.
إن استخدام أطر كس لإنشاء قوائم منسدلة أنيقة يبسط إلى حد كبير عملية التطوير ويسمح لك بالتركيز على جوانب أخرى من المشروع. ومع ذلك ، قبل استخدام الإطار ، من الضروري دراسة وثائقه والتعرف على جميع الميزات والفئات المتاحة.
التوافق عبر المتصفح والقدرة على التكيف للقوائم المنسدلة
واحدة من أهم المهام عند إنشاء قوائم منسدلة أنيقة في كس هو ضمان التوافق عبر المتصفح والقدرة على التكيف. من الضروري أيضا مراعاة سهولة الاستخدام وإمكانية الوصول لمستخدمي الأجهزة والمتصفحات المختلفة.
لضمان التوافق عبر المتصفح ، يجب عليك استخدام خصائص وقيم كس القياسية ، دون الاعتماد على خصائص محددة قد لا تكون متوفرة في بعض المتصفحات. يمكنك أيضا استخدام البادئات للخصائص والأنماط التجريبية لضمان عرضها بشكل صحيح في متصفحات مختلفة.
يمكن تحقيق القدرة على التكيف مع القوائم المنسدلة باستخدام استعلامات الوسائط والتصميم سريع الاستجابة. على سبيل المثال ، يمكنك تغيير عرض القائمة وارتفاعها حسب حجم شاشة الجهاز ، أو إخفائها على الشاشات الصغيرة وإظهارها فقط عند النقر فوق زر خاص.
لضمان راحة استخدام القوائم المنسدلة ، يجب الانتباه إلى التصميم المرئي لعناصر القائمة ، مع تركيز انتباه المستخدم على العنصر النشط وتوفير إنذار مفهوم حول حالته. من المهم أيضا توفير إمكانية التنقل بلوحة المفاتيح واستخدام إيماءات اللمس على شاشات اللمس.
تعد إمكانية الوصول إلى القوائم المنسدلة للمستخدمين ذوي الإعاقة جانبا مهما أيضا. من الضروري ضمان إمكانية الوصول من خلال قراءة الشاشة ودعم التنقل بلوحة المفاتيح. يجب أيضا توفير تباين الألوان والنصوص البديلة للمستخدمين الذين لا يستطيعون أو يفضلون عدم استخدام الواجهة الرسومية.
بشكل عام ، يتطلب إنشاء قوائم منسدلة أنيقة وعملية في كس مراعاة التوافق عبر المتصفحات والقدرة على التكيف وإمكانية الوصول. سيساعد اتباع هذه المبادئ في إنشاء واجهة مستخدم سهلة الاستخدام وفعالة لمختلف الأجهزة والمتصفحات.
سؤال وجواب
ما هي الأدوات اللازمة لإنشاء قوائم منسدلة أنيقة في كس?
لإنشاء قوائم منسدلة أنيقة في كس ، سوف تحتاج إلى معرفة أساسية من كس ، هتمل وجافا سكريبت.
كيف يمكنني إنشاء قائمة منسدلة بسيطة في المغلق?
لإنشاء قائمة منسدلة بسيطة في كس ، يمكنك استخدام خاصية" العرض: لا شيء "لإخفاء القائمة ، وبعد ذلك عندما تحوم المؤشر فوق القائمة المنسدلة سوف تصبح مرئية باستخدام فئة الزائفة": تحوم".
كيف يمكنني تغيير نمط القائمة المنسدلة?
يمكن تغيير نمط القائمة المنسدلة باستخدام كس. للقيام بذلك ، يمكنك استخدام تصميم عناصر القائمة باستخدام المحددات ، وتحديد الخلفية والخط ولون النص ، بالإضافة إلى إضافة تأثيرات عند تحريك المؤشر.
كيف يمكنني إنشاء قائمة منسدلة باستخدام جافا سكريبت?