القائمة المنسدلة مؤسسة
مؤسسة القائمة المنسدلة تسمح للمستخدم لتحديد قيمة من القائمة المنسدلة من معرفة مسبقا ل:
أمثلة
<A أ href = "#" البيانات -dropdown = "id01" الطبقة = "button dropdown"> منسدلة زر </ A>
<! - محتوى منسدلة ->
<UL معرف = البيانات "id01" -dropdown-المحتوى الطبقة = "F-المنسدلة">
<لي> <a أ href = "#"> رابط 1 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 2 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 3 </ أ> </ لى>
</ UL>
<! - تهيئة مؤسسة شبيبة ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »
أمثلة تحليلية
.dropdown الفئة مثل زر السهم لأسفل لإضافة "أيقونة رمز.
استخدام أزرار أو وصلات data-dropdown=" id " سمة لفتح القائمة المنسدلة.
تحتاج قيمة id لتتناسب مع محتويات (id01) القائمة المنسدلة.
في <لdiv> <NAV>، <ul> إضافة .f-dropdown فئات و data-dropdown-content سمة لخلق المحتوى القائمة المنسدلة.
التهيئة مشاركة مؤسسة شبيبة.
ملاحظة: على الشاشة الصغيرة، كل من عرض القائمة المنسدلة 100٪.
حجم القائمة المنسدلة
استخدام .tiny ، .small ، .medium ، .large أو .mega لتعديل العرض من القائمة المنسدلة.
ملاحظة: على الشاشة الصغيرة، كل من عرض القائمة المنسدلة 100٪.
أمثلة
<UL معرف = البيانات "id01" -dropdown-المحتوى الطبقة = "F-المنسدلة صغيرة"> ..
<! - منسدلة الصغيرة: max- العرض هو 300px ->
<UL معرف = البيانات "id02" -dropdown-المحتوى الطبقة = "F-المنسدلة صغيرة"> ..
<! - متوسط منسدلة: max- العرض هو 500px ->
<UL معرف = البيانات "id03" -dropdown-محتوى الطبقة = "متوسطة و المنسدلة">
<! - منسدلة كبيرة: max- العرض هو 800px ->
<UL معرف = البيانات "id04" -dropdown-المحتوى الطبقة = "F-المنسدلة كبيرة"> ..
<- ميجا منسدلة:! 100٪ عرض ->
<UL معرف = البيانات "id04" -dropdown محتوى الطبقة = "و المنسدلة ميجا"> ..
محاولة »
هوامش القائمة المنسدلة
يمكنك استخدام .content فئة لإضافة الحشو إلى القائمة المنسدلة:
أمثلة
<UL معرف = البيانات "id01" -dropdown-المحتوى الطبقة = "F-المنسدلة"> ..
<! - منسدلة مع الحشو ->
<UL معرف = البيانات "id02" الطبقة = "المحتوى و المنسدلة" -dropdown-المحتوى> ..
محاولة »
أمثلة أخرى
<div> القائمة المنسدلة لإضافة عناصر الوسائط المتعددة:
أمثلة
<شعبة معرف = البيانات "id01" -dropdown-المحتوى الطبقة = "المحتوى و المنسدلة المتوسط">
<H4> باريس عنوان </ H4 >
<P> بعض النص .. بعض النصوص .. </ P>
على <img SRC = "paris.jpg" بديل = "باريس" العرض = "400" ذروة = "300">
<P> باريس، التهاب الدماغ الياباني t'aime. </ P>
</ div>
محاولة »
اتجاه القائمة المنسدلة
افتراضيا، القائمة المنسدلة في الجزء السفلي، يمكنك إضافة data-options="align:left|right|top" | الحق | أعلى" لتغيير اتجاهه:
أمثلة
<A أ href = "#" البيانات -dropdown = "id02" data-options = "align: top" الطبقة = "button dropdown"> الأعلى </ A>
<A أ href = "#" البيانات -dropdown = "id03" data-options = "align: bottom" الطبقة = "button dropdown"> أسفل </ A>
<A أ href = "#" البيانات -dropdown = "id04" data-options = "align: الطبقة left" = "button dropdown"> اليسار </ A>
محاولة »
القوائم المنسدلة تؤدي الظروف
افتراضيا، يتم عرض القائمة المنسدلة على النقر على زر. إذا كنت بحاجة إلى تحريك الماوس فوق الشاشة، يمكنك استخدام زر data-options="is_hover:true" " السمة:
أمثلة
<UL معرف = البيانات "id01" -dropdown-المحتوى الطبقة = "F-المنسدلة">
<لي> <a أ href = "#"> رابط 1 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 2 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 3 </ أ> </ لى>
</ UL>
محاولة »
زر الانقسام
ويمكننا أن نضيف على زر .split فئة لوضع زر تأثير الانقسام سوف تولد زر رمز الاتجاه الهبوطي على مجموعة <span> عنصر تجزئة:
أمثلة
<سبان بيانات المنسدلة = "id01 "> </ SPAN>
</ زر>
<UL معرف = البيانات "id01" -dropdown-المحتوى الطبقة = "F-المنسدلة">
<لي> <a أ href = "#"> رابط 1 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 2 </ أ> </ لى>
<لي> <a أ href = "#"> رابط 3 </ أ> </ لى>
</ UL>
<! - تهيئة مؤسسة شبيبة ->
<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .foundation ()؛
})
</ script>
محاولة »