نقوم بإنشاء قوائم منسدلة أنيقة. الاختيار من قائمة منسدلة في القائمة المنسدلة بتنسيق HTML عند التحويم في CSS
اليوم أريد أن أقدم "وصفة" صغيرة لإنشاء قائمة في CSS. لا يوجد JQuery ولا CSS3 - فقط CSS القديم الجيد عبر المتصفحات. المثال بسيط للغاية، لذلك قد لا يكون الرفاق ذوي الخبرة مهتمين. سنقوم بتنفيذ قائمة منسدلة تحتوي على أزرار اجتماعية.
لذلك، دعونا لا نتحدث لفترة طويلة، دعونا ندخل في صلب الموضوع مباشرة
لغة البرمجة
شارك هذا المنشور
- فيسبوك
- تويتر
- جوجل بلس
- في تواصل مع
- آر إس إس
لقد قمت عمدا بحذف النقاط العامة، مثل تضمين الأنماط، حتى لا ينمو الكود. في أسفل الصفحة سأقدم رابطًا للمصادر - كل شيء موجود.
ما لدينا في HTML هو قائمة عادية ورأس غير عادي. ما هو غير معتاد هو أنه مصنوع من ارتباط تشعبي يسمح لك بتتبع الحدث :يحوم، أي التوجيه. ستعمل القائمة المنسدلة عند المرور فوق العنوان.
CSS
أولاً، دعونا نلقي نظرة على الأنماط الأساسية للقائمة المنسدلة. حاولت التعليق على كل سطر من التعليمات البرمجية لتوضيح الأمر:
/*إعادة ضبط الحشوة*/ .droplink ul,.droplink h3,.droplink h3 a( الحشو:0;الهامش:0) /*الغلاف الأساسي*/ .droplink ( العرض:200px; الموضع:مطلق; الهامش:10px 0 0 25px ) /*نمط كتلة التحويم*/ .droplink:hover( الارتفاع: تلقائي; لون الخلفية:#3E403D; الحدود:صلب 1px #3A3C39) /*العنوان في الحالة الطبيعية*/ .droplink h3 a( محاذاة النص:المركز ; العرض: 100%; العرض: كتلة; الحشو: 12 بكسل 0 بكسل; اللون: #999; زخرفة النص: لا شيء ) .droplink h3 a img(border:none) /*نمط عنوان التحويم*/ .droplink:hover h3 a (اللون:#FFF؛ وزن الخط: غامق؛ الموضع: مطلق)
لا يوجد شيء خاص هنا؛ لقد أشرنا إلى حجم الكتلة ونمطها، ونمط الرأس، ولكلا العنصرين، أنماطهما عند تحريك المؤشر. تفضل:
/*إخفاء القائمة بدون التمرير*/ .droplink ul( نمط القائمة:لا شيء; العرض:لا شيء) /*عرض القائمة عند التمرير*/ .droplink:hover ul(display:block; Margin-top:40px ) .droplink لي (عرض: كتلة)
هذا الرمز أكثر إثارة للاهتمام ويظهر كيف يتصرف قائمة منسدلةعند تحريك المؤشر. في حالة طبيعية يكلف عرض لا شيء،أي أنه لا يتم عرضه. عند التمرير، نظهرها ككتلة. هذا هو السر كله. الآن دعونا نقوم بتزيين عناصر القائمة قليلاً وإدراج الرموز:
/ * نمط عنصر القائمة * / .droplink li a ( الحشو: 5 بكسل 12 بكسل 4 بكسل 34 بكسل؛ الهامش: 1 بكسل؛ لون الخلفية: #484A47؛ العرض: كتلة؛ اللون: #FFF؛ زخرفة النص: لا شيء؛ حجم الخط: 12 بكسل ; تكرار الخلفية: عدم التكرار؛ موضع الخلفية: 10 بكسل 3 بكسل ) /*نمط تحويم العنصر*/ .droplink li a:hover( لون الخلفية:#999 ) /*Icons*/ .facebook a (صورة الخلفية : url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) . rss a (background-image:url("icons/rss.png")) .gplus a (background-image:url("icons/gplus.png"))
هذا كل شيء، في الواقع. القائمة المنسدلة جاهزة وتبدو جميلة جدًا. يمكنك تصميم العناصر حسب تقديرك وإضافة زوايا مستديرة وأجراس وصفارات أخرى.
إذا كنت تريد أن "تتداخل" القائمة مع النص الموجود أسفلها عند التمرير، فانظر إلى الجانب مؤشر z.
إذا كان هناك شيء غير واضح أو لم ينجح، اسأل في التعليقات أو استخدم زر "إرسال رسالة"، فهو موجود —>
القائمة المنسدلة الأفقيةتستخدم لتنظيم بنية التنقل في الموقع. العدد الأمثل لمستويات التعشيش هو واحد أو اثنان. كلما قلت مستويات المرفقات، أصبح من الأسهل على زائر الموقع العثور على المعلومات التي يحتاجها. كيفية إنشاء قائمة أفقية عادية موصوفة بالتفصيل في.
كيفية عمل قائمة منسدلة أفقية
1. ترميز HTML والأنماط الأساسية لقائمة منسدلة ذات مستوى تداخل واحد
يختلف ترميز HTML الخاص بالقائمة المنسدلة الأفقية عن القائمة العادية من حيث أنه يرتبط بعنصر القائمة المطلوب
- أو<оl> .
- تفتقد أمثلة التعليمات البرمجية بادئات المتصفح لخصائص CSS، ولكن يمكنك بالطبع العثور عليها في الملفات المصدر.
- أنا شخصياً أستخدم نموذج الصندوق، حيث = + + . لتفعيله، تحتاج إلى الكود التالي:
- أولاً، نجعل القائمة المنسدلة مرئية عن طريق تغيير درجة التعتيم إلى 1.
- بعد ذلك، نقوم بتغيير اتجاه ولون السهم الصغير.
- بعد ذلك سنقوم بتغيير الخلفية خلف السهم باستخدام التدرج.
لتحديد موضع القائمة الفرعية بالنسبة إلى القائمة الرئيسية، يتم الإعلان عن الأنماط التالية:
- بالنسبة لعنصر القائمة الذي تتداخل فيه القائمة المنسدلة: li (الموضع: نسبي؛) ؛
- للقائمة المنسدلة ul (الموضع: مطلق؛)، بالإضافة إلى القيم اليسرى والعليا.
من أجل الوضوح وسهولة التنسيق، دعونا نضيف القائمة العلوية للفصل إلى القائمة الرئيسية والقائمة الفرعية إلى القائمة المنسدلة.
هناك عدة طرق لإخفاء القائمة المنسدلة:
1) العرض: لا شيء؛
2) الرؤية: مخفية؛
3) العتامة: 0؛
4) التحويل: مقياس Y (0)؛
5) باستخدام مكتبة jQuery.
الطريقة الأولى. (العرض: لا شيء؛)
يتم إخفاء القائمة المنسدلة باستخدام .submenu (display: none;) ، وعند التمرير تظهر باستخدام .topmenu li:hover .submenu (display: block;) .
الطريقة الثانية. (الرؤية: مخفية؛)
يتم إخفاء القائمة باستخدام .submenu (الرؤية: مخفي؛) وتظهر باستخدام .topmenu li:hover .submenu (الرؤية: مرئية؛) .
الطريقة الثالثة. (التعتيم: 0؛)
يتم إخفاء القائمة باستخدام .submenu (العتامة: 0؛) وتظهر باستخدام .topmenu li:hover .submenu (العتامة: 1؛) . لمنع القائمة من الظهور عند المرور فوق المنطقة التي توجد بها، قم بإضافة إمكانية الرؤية: مخفي؛ ، وعند التمرير، قم بتغييره إلى إمكانية الرؤية: مرئي؛ .
الطريقة الرابعة. (التحويل: مقياس Y (0)؛)
القائمة مخفية باستخدام .submenu (تحويل:scaleY(0);) وتظهر باستخدام .topmenu li:hover .submenu (transform:scaleY(1);) . نظرًا لأن تحويل العنصر الافتراضي يحدث من المركز، فأنت بحاجة إلى إضافة .submenu (transform-origin: 0 0;) ، أي. من الزاوية اليسرى العليا.
الطريقة الخامسة: استخدام jQuery
$(".خمسة لي ul").hide(); // إخفاء القائمة المنسدلة $(".five li:has(".submenu")").hover(function())( $(".five li ul").stop().fadeToggle(300) ;) /* حدد عنصر قائمة يحتوي على عنصر من الفئة .submenu وأضف إليه وظيفة التمرير التي تظهر القائمة المنسدلة وتخفيها */);2. القائمة المنسدلة ثلاثية الأبعاد
يمكن إنشاء تأثيرات مثيرة للاهتمام باستخدام تحويلات CSS3، على سبيل المثال، جعل القائمة تظهر من أعماق الشاشة.
* (حجم الصندوق: صندوق الحدود؛) الجسم (الهامش: 0؛ الخلفية: التدرج الشعاعي (#BFD6E2 1px، rgba(255,255,255,0) 2px); حجم الخلفية: 10px 10px;) التنقل ul (نمط القائمة : لا شيء؛ الهامش: 0؛ الحشو: 0؛ ) التنقل أ (العرض: كتلة؛ زخرفة النص: لا شيء؛ المخطط التفصيلي: لا شيء؛ الانتقال: .4s سهولة الدخول والخروج؛ ) .topmenu (رؤية الواجهة الخلفية: مخفية؛ الخلفية : rgba(255,255,255,.8); ) .topmenu > li ( العرض: كتلة مضمّنة; الموضع: نسبي; ) .topmenu > li > a ( عائلة الخط: "Exo 2"، sans-serif; الارتفاع: 70px; ارتفاع الخط: 70 بكسل؛ الحشو: 0 30 بكسل؛ سمك الخط: غامق؛ اللون: #003559؛ تحويل النص: أحرف كبيرة؛ ) .down:after ( content: "\f107"؛ الهامش الأيسر: 8px؛ عائلة الخط : FontAwesome; ) .topmenu li a:hover (اللون: #E6855F; ) .القائمة الفرعية (الخلفية: أبيض; الحد: 2px صلب #003559; الموضع: مطلق; اليسار: 0; الرؤية: مخفي; العتامة: 0; مؤشر z : 5؛ العرض: 150 بكسل؛ التحويل: منظور (600 بكسل) تدويرX(-90 درجة)؛ أصل التحويل: 0% 0%؛ انتقال: .6s سهولة الدخول والخروج؛ ) .topmenu > li:hover .submenu( الرؤية: مرئي؛ العتامة: 1؛ التحويل: المنظور (600 بكسل) تدويرX(0deg); ) .القائمة الفرعية li a ( اللون: #7f7f7f؛ حجم الخط: 13 بكسل؛ ارتفاع الخط: 36 بكسل؛ الحشو: 0 25 بكسل؛ عائلة الخط: "Kurale"، serif؛ )
3. قائمة منسدلة قابلة للتوسيع مع الشعار
في هذا المثال، يحتوي القسم العلوي من الصفحة على الشعار والتنقل في الموقع. الشعار يمكن أن يكون صورة أو نص. تتوسع القائمة المنسدلة تدريجيًا من أسفل عنصر القائمة العلوي باستخدام وظيفة التحويل CSS3.
4. توسيع القائمة المنسدلة
مثال آخر على القائمة المنسدلة. يتم تحقيق تأثير التكبير عند ظهور القائمة عن طريق تقليل الحجم الأولي.submenu (تحويل: مقياس (.8)؛) ، عند التمرير يزيد الحجم إلى.topmenu > li:hover .submenu (تحويل: مقياس (1)؛) .
* (حجم الصندوق: صندوق الحدود؛) الجسم (الهامش: 0؛ الخلفية: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)) التنقل (الخلفية: أبيض؛ ) nav ul ( نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛ ) nav a ( زخرفة النص: لا شيء؛ المخطط التفصيلي: لا شيء؛ العرض: كتلة؛ الانتقال: .4s سهولة الدخول؛ ) .topmenu ( محاذاة النص: المركز؛ الحشو: 10 بكسل 0؛ ) .topmenu > li ( العرض: كتلة مضمّنة؛ الموضع: نسبي؛ ) .topmenu > li:after ( المحتوى: ""؛ الموضع: مطلق؛ اليمين: 0؛ العرض: 1 بكسل؛ الارتفاع: 12 بكسل؛ الخلفية: #d2d2d2؛ الجزء العلوي: 16 بكسل؛ ظل الصندوق: 4 بكسل -2 بكسل 0 #d2d2d2؛ التحويل: تدوير (30 درجة)؛ ) .topmenu > li:last-child:after (الخلفية: none; box -الظل: لا شيء؛ ) .topmenu > li > a ( المساحة المتروكة: 12 بكسل 26 بكسل؛ اللون: #767676؛ تحويل النص: أحرف كبيرة؛ وزن الخط: غامق؛ تباعد الأحرف: 1 بكسل؛ عائلة الخط: "Exo 2"، sans-serif; ) .topmenu li a:hover (اللون: #c0a97a;) .القائمة الفرعية (الموضع: مطلق؛ اليسار: 50%؛ الأعلى: 100%؛ العرض: 210 بكسل؛ الهامش الأيسر: -105 بكسل؛ الخلفية: #fafafa ; الحدود: 1px الصلبة #ededed؛ مؤشر z: 5؛ الرؤية: مخفية؛ العتامة: 0؛ تحويل: مقياس (.8)؛ الانتقال: سهولة الدخول والخروج بمقدار .4 ثانية؛ ) .submenu li a ( الحشو: 10 بكسل 0؛ الهامش: 0 10 بكسل؛ الحد السفلي: 1 بكسل صلب #efefef؛ حجم الخط: 12 بكسل؛ اللون: #484848؛ عائلة الخط: "Kurale"، serif؛ ) .topmenu > li:hover .submenu (الرؤية: مرئية؛ العتامة: 1؛ التحويل: مقياس (1)؛)
5. القائمة المنسدلة المنسدلة
قائمة أفقية ذات رسوم متحركة مصغرة: عند المرور فوق روابط القائمة العلوية، تظهر دائرة صغيرة، والتي تصاحب أيضًا مظهر القائمة المنسدلة.
@import url("https://fonts.googleapis.com/css?.jpg); موضع الخلفية: المركز المركزي; تكرار الخلفية: عدم التكرار; حجم الخلفية: الغلاف; الارتفاع: 100vh; الموضع: نسبي; ) الجسم: قبل ( المحتوى: ""؛ الموضع: مطلق؛ اليسار: 0؛ الأسفل: 0؛ الارتفاع: 100%؛ العرض: 100%؛ الخلفية: تدرج خطي (45 درجة، rgba (0,0,0,0) ، rgba(255,255,255,.8)); ) nav ( محاذاة النص: المركز; الحشو: 40px 0 0; ) nav ul ( نمط القائمة: لا شيء; الهامش: 0; الحشو: 0; ) nav a ( زخرفة النص : لا شيء؛ العرض: كتلة؛ اللون: #222؛ ) .topmenu > li ( العرض: كتلة مضمّنة؛ الموضع: نسبي؛ ) .topmenu > li > a (الموضع: نسبي؛ الحشو: 10px 15px؛ عائلة الخط: " نص كوشان"، مخطوطة؛ حجم الخط: 1.5em؛ ارتفاع السطر: 1؛ تباعد الحروف: 3px؛ ) .topmenu > li > a:before ( المحتوى: ""؛ الموضع: مطلق؛ فهرس z: 5؛ اليسار: 50%؛ الأعلى: 100%؛ العرض: 10 بكسل؛ الارتفاع: 10 بكسل؛ الخلفية: أبيض؛ نصف قطر الحدود: 50%؛ التحويل: ترجمة (-50%، 20 بكسل)؛ العتامة: 0؛ الانتقال: .3s؛ ) .topmenu li:hover a:before ( تحويل: ترجمة(-50%, 0); العتامة: 1؛ ) .القائمة الفرعية ( الموضع: مطلق؛ الفهرس z: 4؛ اليسار: 50%؛ الأعلى: 100%؛ العرض: 150 بكسل؛ الحشو: 15 بكسل 0 15 بكسل؛ الهامش العلوي: 5 بكسل؛ الخلفية: أبيض؛ نصف قطر الحدود: 5 بكسل؛ ظل الصندوق: 0 0 30 بكسل rgba(0,0,0,.2)؛ حجم الصندوق: مربع الحدود؛ الرؤية: مخفي؛ العتامة: 0؛ التحويل: ترجمة (-50%، 20 بكسل)؛ الانتقال: .3s ; ) .topmenu > li:hover .submenu ( الرؤية: مرئية؛ العتامة: 1؛ التحويل: ترجمة (-50%, 0); ) .submenu a ( عائلة الخط: "Libre Baskerville"، serif؛ حجم الخط: 11 بكسل؛ تباعد الحروف: 1 بكسل؛ الحشو: 5 بكسل 10 بكسل؛ الانتقال: .3s خطي؛ ) .submenu a:hover (background: #e8e8e8;)
سنوضح لك في هذه المقالة كيفية إنشاء قوائم منسدلة جميلة دون استخدام الصور، فقط باستخدام CSS. سنقوم أيضًا بإضافة بعض رموز jQuery لجعلها تعمل.
يرجى ملاحظة بعض الأشياء قبل أن نبدأ:
*,
* :بعد
* :قبل (
تحجيم الصندوق: صندوق الحدود؛
}
إذن، أين نبدأ؟
السؤال الأول: ما الذي نحتاجه لإنشاء القائمة المنسدلة؟ بشكل عام، سنستخدم DIV مع علامة امتداد متداخلة وقائمة غير مرتبة للقائمة المنسدلة:
>
>
جافا سكريبت
نحن بحاجة إلى القليل من جافا سكريبت لجعل القائمة المنسدلة لدينا تعمل كما هو متوقع. هذا هو مقتطف JS الذي سنستخدمه لجميع الأمثلة:
//...
Obj.dd .on ("انقر"، الوظيفة (الحدث) (
عودة كاذبة ؛
}
)
;
//...
$(وظيفة() (
var dd = new DropDown( $("#dd" ) ) ;
$(مستند).انقر(وظيفة() (
// جميع القوائم المنسدلة
$(".wrapper-dropdown-1" ) .removeClass( "active" ) ;
}
)
;
} ) ;
إذن ماذا يفعل هذا البرنامج النصي؟ أولا، يقوم بتبديل الطبقة .نشيطعند النقر على المجمع. هذا يعني أنه إذا لم يكن للمجمع فئة .نشيط، ثم تتم إضافته، وإذا تم تعيين هذه الفئة بالفعل، فسيتم إزالتها.
ثانيًا، ينشئ البرنامج النصي سلوكًا افتراضيًا للقائمة المنسدلة، ويغلقها إذا قمت بالنقر فوق أي مكان آخر على الشاشة.
حسنًا، لقد فهمنا الآن كيف يعمل الأمر، وأعتقد أن الوقت قد حان لإنشاء بعض الأمثلة!
مثال 1
لنبدأ بشيء بسيط: مربع منسدل بسيط يتعلق بالجنس. دعونا نلقي نظرة على العلامات أولاً:
ترميز HTML
نحتاج إلى بعض الأشياء: غلاف (div بمعرف#dd)، وقائمة منسدلة (مخفية)، و"تسمية" سيتم تغليفها بعلامة امتداد. نحن نستخدم الروابط الأساسية لأنني أعتقد أنها صحيحة لغويًا، ولكن يمكنك أيضًا استخدام علامة مختلفة.
>
>
CSS
لننتقل الآن إلى CSS. لنبدأ بالمغلف:
القائمة المنسدلة المجمعة (
/* الحجم والموضع */
الموقف: نسبي؛
العرض: 200 بكسل؛
الحشو: 10 بكسل؛
الهامش: 0 تلقائي؛
/*اللون والخلفية*/
الخلفية : #9bc7de ;
اللون: #ففف؛
الخطوط العريضة: لا شيء؛
المؤشر: المؤشر؛
/* الخط */
وزن الخط: غامق؛
}
لذلك قمنا ببعض الأشياء. أولاً قمنا بتعيين عرض القائمة وبعض الحشو. بعد ذلك، أعطيناها اللون والخلفية. وأخيرا، قمنا بتعيين خيارات الخط.
دعونا ننهي "التسمية" بإضافة سهم صغير إلى اليمين باستخدام عنصر زائف.
القائمة المنسدلة المجمعة : بعد (
محتوى : "" ؛
العرض: 0;
الارتفاع: 0;
الموقف: مطلق؛
اليمين: 16 بكسل؛
أعلى: 50%؛
الهامش العلوي: -6 بكسل؛
عرض الحدود: 6px 0 6px 6px ؛
نمط الحدود: صلب؛
لون الحدود : شفاف #fff ;
}
أعتقد أننا جميعًا نعرف كيفية إنشاء مثلث صغير في CSS باستخدام الحدود. إنه اختراق بالطبع، ولكن إذا كان يعمل بشكل جيد حقًا، فلماذا لا؟ لا يوجد شيء مميز هناك: سهم أبيض صغير على اليمين.
لذلك لدينا زر صغير لطيف، ولكن بدون محتوى القائمة المنسدلة، لا معنى له. دعونا نلقي نظرة على قائمتنا!
غلاف-منسدلة-1 .dropdown (
/* الحجم والموضع */
الموقف: مطلق؛
أفضل 100٪؛
اليسار: 0؛ /* مقاس */
الحق : 0 ; /* مقاس */
/* الأنماط */
الخلفية: #ففف؛
وزن الخط: عادي؛ /* استبدال وزن الخط السابق: غامق؛ */
/* الإخفاء */
العتامة: 0؛
أحداث المؤشر: لا شيء؛
}
سنعطي القائمة المنسدلة موضعًا مطلقًا ونضعها خلف الزر (أعلى: 100%؛). دعونا نعطيه نفس العرض بالنسبة للزر. وأخيرًا، قم بإخفائه عن طريق تقليل التعتيم إلى 0.
لنقم الآن بتعيين أنماط لعناصر القائمة:
غلاف-منسدلة-1 .dropdown لى (
العرض محجوب؛
زخرفة النص: لا شيء؛
اللون : #9e9e9e ;
الحشو: 10 بكسل 20 بكسل؛
}
/* حالة التمرير */
.wrapper-dropdown-1 .dropdown li:hover a (
الخلفية : #f3f8f8 ;
}
باستخدام JavaScript سنقوم بتبديل الفصل .نشيطعندما نضغط على الزر، بناءً على هذه الفئة، يمكننا تغيير CSS الخاص بنا لعرض القائمة المنسدلة.
/* الحالة النشطة */
.wrapper-dropdown-1 .active .dropdown (
العتامة: 1؛
أحداث المؤشر: تلقائي؛
}
المجمع-المنسدل-1 .active :after (
لون الحدود: #9bc7de شفاف؛
عرض الحدود: 6px 6px 0 6px ؛
الهامش العلوي: -3 بكسل؛
}
المجمع-المنسدل-1.active(
الخلفية : #9bc7de ;
الخلفية: تدرج خطي (إلى اليمين، #9bc7de 0%، #9bc7de 78%، #ffffff 78%، #ffffff 100%) ؛
}
ثلاثة أشياء يجب ملاحظتها:
جافا سكريبت
وأخيرًا وليس آخرًا، نحتاج أيضًا إلى إضافة جزء آخر من JavaScript لجعل الزر يعرض القيمة المحددة.
وظيفة المنسدلة (ش) (
هذا .dd = el;
this .placeholder = this .dd .children ("span")؛
this .opts = this .dd .find( "ul.dropdown > li" );
هذا .val = "" ;
هذا .index = - 1 ;
this.initEvents();
}
DropDown.prototype = (
فار obj = هذا ;
$(this).toggleClass("active");
عودة كاذبة ؛
}
)
;
Obj.opts.on("انقر"، وظيفة() (
فار اختيار = $(هذا) ;
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text("الجنس: " + obj.val);
}
)
;
}
,
الحصول على القيمة: الدالة ()(
إرجاع هذا .val ;
}
,
الحصول على الفهرس: الوظيفة () (
قم بإرجاع هذا .index ;
}
}
كود بسيط للغاية: عند النقر على عنصر ما، نحصل على قيمته ونعرضه في علامة الامتداد.
مثال 2
في المثال الثاني، سنقوم بإنشاء قائمة جميلة للتسجيل على شبكات التواصل الاجتماعي المختلفة.
ترميز HTML
>
>
العلامات تستخدم لعرض الرموز الصغيرة من FontAwesome. لن أشرح ما هو FontAwesome هنا، لأنه تمت مناقشته بالفعل أكثر من مرة في المقالات السابقة. فقط تأكد من أنه يعمل.
CSS
لنبدأ مع المجمع. إنه يشبه إلى حد كبير الغلاف الموجود في المثال السابق. لاحظ الحد الأيسر بمقدار 5 بكسل.
القائمة المنسدلة المجمعة-2 (
/* الحجم والموضع */
الموقف: نسبي؛ /* تمكين تحديد المواقع المطلق للأطفال والعناصر الزائفة */
العرض: 200 بكسل؛
الهامش: 0 تلقائي؛
الحشو: 10 بكسل 15 بكسل؛
/* الأنماط */
الخلفية: #ففف؛
الحد الأيسر : 5 بكسل رمادي خالص؛
المؤشر: المؤشر؛
الخطوط العريضة: لا شيء؛
}
الآن السهم الصغير. بالضبط نفس ما كان عليه من قبل:
غلاف-القائمة المنسدلة-2: بعد (
محتوى : "" ؛
العرض: 0;
الارتفاع: 0;
الموقف: مطلق؛
اليمين: 16 بكسل؛
أعلى: 50%؛
الهامش العلوي: -3 بكسل؛
عرض الحدود: 6px 6px 0 6px ؛
نمط الحدود: صلب؛
لون الحدود: رمادي شفاف؛
}
وهذه قائمة منسدلة. مرة أخرى، يشبه إلى حد كبير المثال السابق:
غلاف-منسدلة-2 .dropdown (
/* الحجم والموضع */
الموقف: مطلق؛
أفضل 100٪؛
اليسار: -5px؛
اليمين: 0 بكسل؛
/* الأنماط */
الخلفية: أبيض؛
نمط القائمة: لا شيء؛
/* الإخفاء */
العتامة: 0؛
أحداث المؤشر: لا شيء؛
}
لاحظ أننا سنستخدم انتقالًا لجعل القائمة المنسدلة تتلاشى (متحركة) بدلاً من مجرد فتحها كما في العرض التوضيحي الأول.
بعض الأنماط للروابط والأيقونات:
المجمع-المنسدل-2 .dropdown لى (
العرض محجوب؛
زخرفة النص: لا شيء؛
اللون: #333؛
الحدود اليسرى: 5 بكسل صلبة؛
الحشو: 10 بكسل؛
الانتقال: كل 0.3 ثانية سهلة؛
}
المجمع-المنسدل-2 .المنسدلة li:nth-child(1) أ (
لون الحدود اليسرى : #00ACED ;
}
المجمع-المنسدل-2 .المنسدلة li:nth-child(2) أ (
لون الحدود اليسرى : #4183C4 ;
}
المجمع-المنسدل-2 .المنسدلة li:nth- Child(3 ) أ (
لون الحدود اليسرى : #3B5998 ;
}
المجمع المنسدلة -2 .dropdown li i (
الهامش الأيمن: 5 بكسل؛
اللون: ورث؛
محاذاة رأسية: وسط؛
}
/* حالة التمرير */
المجمع المنسدلة -2 .dropdown li:hover a (
رمادي اللون؛
}
والآن، دعونا نتعامل مع أنماط القائمة في الحالة الموسعة. قم بتغيير اتجاه السهم وستصبح القائمة المنسدلة مرئية.
المجمع-المنسدل-2 .active :after (
عرض الحدود: 0 6px 6px 6px ؛
}
المجمع-المنسدل-2 .active .dropdown (
العتامة: 1؛
أحداث المؤشر: تلقائي؛
}
جافا سكريبت
وظيفة المنسدلة (ش) (
هذا .dd = el;
this.initEvents();
}
DropDown.prototype = (
الأحداث الأولية: الوظيفة () (
فار obj = هذا ;
Obj.dd .on ("انقر"، الوظيفة (الحدث) (
$(this).toggleClass("active");
Event.stopPropagation();
}
)
;
}
}
مثال 3
دعنا ننتقل إلى المثال الثالث، في هذه الحالة سوف يحل العنصر المحدد محل القيمة الافتراضية.
ترميز HTML
>
>
لا يوجد كود أكثر بكثير من ذي قبل. دعنا ننتقل إلى CSS!
CSS
غلاف-القائمة المنسدلة-3 (
/* الحجم والموضع */
الموقف: نسبي؛
العرض: 200 بكسل؛
هامِش:
0
آلي;
حشوة:
10 بكسل;
/* الأنماط */
خلفية:
#ففف;
نصف قطر الحدود :
7 بكسل;
حدود:
1 بكسل صلب rgba (0
,
0
,
0
,
0.15
)
;
مربع الظل :
0
1 بكسل 1 بكسل rgba (50
,
50
,
50
,
0.1
)
;
المؤشر:
المؤشر;
الخطوط العريضة:
لا أحد;
/* إعدادات الخط */
وزن الخط:
عريض;
لون:
#8AA8BD;
}
نستخدم هنا الحدود والظلال المربعة والزوايا المستديرة. نحتاج أيضًا إلى سهم صغير:
.wrapper-dropdown-3:بعد{
محتوى:
""
;
عرض:
0
;
ارتفاع:
0
;
موضع:
مطلق;
يمين:
15 بكسل;
قمة:
50%
;
أعلى الهامش:
-3 بكسل;
عرض الحدود:
6 بكسل 6 بكسل 0
6 بكسل;
نمط الحدود:
صلب;
لون الحدود:
#8aa8bd شفاف;
}
كل شيء هنا هو نفسه كما كان من قبل، لذلك لن نصف الكود بالتفصيل.
.wrapper-dropdown-3 .اسقاط {
/* الحجم والموضع */
موضع:
مطلق;
قمة:
140%
;
غادر:
0
;
يمين:
0
;
/* الأنماط */
خلفية:
أبيض;
نصف قطر الحدود :
يرث;
حدود:
1 بكسل صلب rgba (0
,
0
,
0
,
0.17
)
;
مربع الظل :
0
0
5 بكسل rgba (0
,
0
,
0
,
0.1
)
;
وزن الخط:
طبيعي;
انتقال :
كل 0.5 ثانية سهلة ;
نمط قائمة:
لا أحد;
/* الإخفاء */
العتامة :
0
;
أحداث المؤشر :
لا أحد;
}
.wrapper-dropdown-3 .اسقاطلى أ {
عرض:
حاجز;
حشوة:
10 بكسل;
زخرفة النص:
لا أحد;
لون:
#8aa8bd;
الحدود السفلية:
1 بكسل صلب #e6e8ea;
مربع الظل :
أقحم 0
1 بكسل 0
rgba (255
,
255
,
255
,
1
)
;
انتقال :
كل 0.3s سهولة الخروج ;
}
.wrapper-dropdown-3 .اسقاطلي ط {
يطفو:
يمين;
لون:
يرث;
}
.wrapper-dropdown-3 .اسقاطلى :النوع الأولأ {
نصف قطر الحدود :
7 بكسل 7 بكسل 0
0
;
}
.wrapper-dropdown-3 .اسقاطلى :النوع الأخيرأ {
نصف قطر الحدود :
0
0
7 بكسل 7 بكسل;
حدود:
لا أحد;
}
/* حالة التمرير */
.wrapper-dropdown-3 .اسقاطلى :يحومأ {
خلفية:
#f3f8f8;
}
يبدو كل شيء رائعًا باستثناء السهم الصغير الموجود أعلى يمين القائمة المنسدلة. هذا السهم مهم: بدونه، تبدو القائمة المنسدلة وكأنها عائمة دون أي اتصال بالزر.
.wrapper-dropdown-3 .اسقاط:بعد{
محتوى:
""
;
عرض:
0
;
ارتفاع:
0
;
موضع:
مطلق;
قاع:
100%
;
يمين:
15 بكسل;
عرض الحدود:
0
6 بكسل 6 بكسل 6 بكسل;
نمط الحدود:
صلب;
لون الحدود:
#ففف شفاف;
}
.wrapper-dropdown-3 .اسقاط:قبل{
محتوى:
""
;
عرض:
0
;
ارتفاع:
0
;
موضع:
مطلق;
قاع:
100%
;
يمين:
13 بكسل;
عرض الحدود:
0
8 بكسل 8 بكسل 8 بكسل;
نمط الحدود:
صلب;
لون الحدود:
rgba (0
,
0
,
0
,
0.1
)
شفاف;
}
لقد استخدمنا عنصرين زائفين لهذا السهم لأننا نريد إنشاء حدود حوله.
الآن الأنماط للحالة الموسعة. كل شيء متشابه. ومع ذلك، يرجى ملاحظة أننا قمنا بتعيين الانتقال إلى .اسقاطأطول قليلاً من المعتاد (0.5 بدلاً من 0.3 ثانية). بهذه الطريقة، سيكون فتح القائمة سلسًا جدًا.
.wrapper-dropdown-3.نشيط .اسقاط {
العتامة :
1
;
أحداث المؤشر :
آلي;
}
جافا سكريبت
لإنهاء هذا العرض التوضيحي، نحتاج إلى إضافة بعض JavaScript لاستبدال القيمة الافتراضية للزر المحدد. لقد رأينا كيف يتم ذلك في المثال الأول، ولكن بما أننا لا نترك كلمة "نقل" هنا، فإن JS مختلف قليلاً.
وظيفة المنسدلة (ش )
{
هذا .dd =
ش ;
هذا .placeholder =
هذا .dd.أطفال ("فترة")
;
هذا .opts =
هذا .dd.يجد ("ul.dropdown >li")
;
هذا .فال =
""
;
هذا .فِهرِس =
-1
;
this.initEvents ()
;
}
اسقاط .النموذج المبدئي =
{
initEvents :
وظيفة ()
{
فار obj =
هذا ;
كائن .dd.على ("انقر",
وظيفة (حدث )
{
$(هذا )
.toggleClass ("نشيط")
;
عودة كاذبة ;
}
)
;
كائن .opts.على ("انقر",
وظيفة ()
{
فار اختيار =
$(هذا )
;
obj .فال =
يختار، يقرر. نص()
;
obj .فِهرِس =
opt.index ()
;
obj .placeholder.نص(obj.val)
;
}
)
;
}
,
الحصول على قيمة :
وظيفة ()
{
إرجاع هذا.فال ;
}
,
getIndex :
وظيفة ()
{
إرجاع هذا.index ;
}
}
مثال 4
تبدو مختلفة، أليس كذلك؟ سنقوم هنا بإنشاء قائمة بالمهام التي يجب عليك إلغاءها وبالتالي شطبها. بشكل عام، لا يوجد شيء خاص، ولكن هذا المثال يختلف بشكل كبير عن العروض التوضيحية السابقة.
ترميز HTML
فصل="اسقاط">