غالبا ما يكون من الضروري القيام به القائمة الأفقية، والتي سوف تمتد عبر كامل عرض الكتلة الأصلية، بغض النظر عن عدد العناصر التي تحتوي عليها.
اليوم أود أن أوضح لك كيفية إنشاء مثل هذه القائمة.
لذلك ستكون قائمتنا على النحو التالي:
يتم تمديده إلى العرض الكامل ويبرز عند المرور فوقه. يتم تقريب القائمة على الجانبين.
ترميز HTML
بيت
أخبار مثيرة للاهتمام
...
عنصر قائمة آخر!
لجعل القائمة كاملة العرض، استخدمت جداول بعرض 100%. يحتوي كل جدول على حاوية div لعنصر القائمة. اعتمادًا على ما إذا كان عنصر القائمة الأول أو الأخير أو الوسيط عبارة عن div، يتم تعيين الفئة المقابلة.
تحتوي كل حاوية div على حدين جانبيين مع تحديد موضع مطلق، وهو أمر ضروري للعرض الصحيح. إذا كنت تستخدم الحدود القياسية، فعند تبديل عناصر القائمة، سيقفز النص بمقدار 1-2 بكسل، وهو أمر جيد.
الفئة النشطة مسؤولة عن عنصر القائمة المحدد وتقوم بتمييزه.
في كل عنصر لدينا صورة ونص. لضمان محاذاة كل هذا بشكل صارم في المنتصف عموديًا، نستخدم جدولًا. بفضل خاصية المحاذاة العمودية، سيتم دائمًا عرض عناصر القائمة لدينا بسلاسة ولن تتحرك بعيدًا.
قواعد CSS
أولاً، لنقم بتعيين أنماط العرض العام للقائمة:
Menu_container ( المساحة المتروكة في الأعلى: 40 بكسل؛ العرض: 100%؛ الارتفاع: 47 بكسل؛ تباعد الحدود: 0 بكسل؛ ) .menu_container td ( محاذاة رأسية: وسط؛ /* محاذاة رأسية */ ) .last_point_menu، .first_point_menu، .middle_point_menu ( العرض: 100%؛ الارتفاع: 47 بكسل؛ الحد: 1 بكسل صلب #dadbda؛ الموضع: حدود يسارية: لا شيء (الحشوة: 0 بكسل؛ محاذاة رأسية: وسط؛ الحدود: لا شيء؛ محاذاة النص: يسار؛ العرض: 150 بكسل؛ مساحة المساحة اليسرى: 4 بكسل؛ ) .td.inner_table_title ( مساحة المساحة العلوية: 4 بكسل؛ حجم الخط: غامق؛ ) .td.inner_table_img ( العرض: 40 بكسل! مهم؛ ) .inner_table_menu ( الارتفاع: 100%؛ مساحة المساحة: 0 بكسل ; (العرض: 30 بكسل! مهم؛ الارتفاع: 30 بكسل! مهم؛ مساحة اليسار: 15 بكسل؛)
من أجل الجمال، دعونا نلتف حول الزوايا على جوانب القائمة:
First_point_menu ( -webkit-border-top-left-radius: 5px؛ -webkit-border-bottom-left-radius: 5px؛ -moz-border-radius-topleft: 5px؛ -moz-border-radius-bottomleft: 5px؛ نصف القطر من أعلى اليسار إلى الحد: 5 بكسل؛ نصف القطر من أسفل إلى اليسار: 5 بكسل؛ نصف القطر الأيمن السفلي: 5 بكسل؛ -moz-border-radius-topright: 5px ؛
الآن أصبحت قائمتنا أكثر جمالا:
حتى الآن، النقطة الأولى ليس لها حدود يسرى. سنقوم بإصلاحه في وقت لاحق قليلا.
الآن دعونا نضيف تأثيرات التمرير للقائمة.
Middle_point_menu: hover، .last_point_menu: hover، .first_point_menu: hover، .middle_point_menu.active، .last_point_menu.active، .first_point_menu.active، .middle_point_menu.active ( لون الخلفية: #CAE285؛ صورة الخلفية: -moz-linear- gradient(top, #CAE285, #9FCB56) صورة الخلفية: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); -gradient(top, #CAE285, #9FCB56)؛ صورة الخلفية: -o-linear-gradient(top, #CAE285, #9FCB56); - اللون: #aec671 #9fbb62 #87ac4a؛ الحدود اليسرى: لا شيء؛ مؤشر z: 5000؛ ) .last_point_menu ( الحد: 1 بكسل صلب #dadbda؛ الحد الأيسر: لا شيء؛ ) .last_point_menu: hover ( الحد: 1 بكسل صلب #9FCB56؛ الحد الأيسر: لا شيء؛ ) .
لون الحدود: #aec671 #9fbb62 #87ac4a؛ ) .last_point_menu.active ( الحد الأيسر: لا شيء؛ )
/* أنماط الحدود الجانبية */ .borderLeftSecond, .borderRightSecond ( العرض: لا شيء; الموضع: مطلق; العرض: 1px; الارتفاع: 47px; لون الخلفية: #9fbb62; الأعلى: 0px; مؤشر z: 1000; ) /* الإزاحات المطلقة للحدود */ .borderLeftSecond ( left: 0px; ). والعنصر الأخير */ .first_point_menu.active .borderLeftSecond ( العرض: لا شيء; ) .last_point_menu.active .borderRightSecond ( العرض: لا شيء; ) .last_point_menu: hover .borderLeftSecond ( العرض: block; )
هذا كل شيء!
لقد حصلنا على قائمة ممتازة ممتدة عبر عرض الكتلة الرئيسية بالكامل! لا تتداخل العناصر مع بعضها البعض عند تحريك الماوس ولا يقفز التخطيط.
تخطيط شائع إلى حد ما لقائمة الموقع، عندما تشغل الحاوية التي تحتوي عليها العرض الكامل المتاح على الصفحة. في هذه الحالة، يكون العنصر الأول مجاورًا للحافة اليسرى، والأخير مجاورًا للحافة اليمنى، وتكون المسافة بين جميع العناصر متساوية. اليوم سنخبرك كيف يتم ذلك.
نحن نقدم لك مثالاً على تنفيذ القائمة المطاطية متى مساعدة في CSSلمواردك. في هذه القائمة، سيتم وضع العناصر في سطر واحد. لن يتم استخدام جافا سكريبت. سيتم تضمين محتويات القائمة في قائمة عادية. السمة الرئيسية لهذه القائمة هي تنوعها، والذي يتم التعبير عنه في حقيقة أن عدد العناصر وطولها يمكن أن يكون موجودًا.
كيفية تنفيذ هذا؟
يمكن لكل مبرمج أن يقدم طريقته الخاصة في حل مشكلة معينة. كل هذا يتوقف على خياله ومستوى الاحتراف والقدرات. الحل الأكثر شيوعًا لهذه المشكلة هو استخدام الجدول. أيضًا، قد يقترح الكثيرون استخدام جافا سكريبت. أسارع إلى إحباط أولئك الذين يقترحون استخدام خاصية العرض مع جدول القيمة أو خلية الجدول. هذه الطريقة غير متوافقة بشكل كافٍ مع المتصفحات.
الحل لدينا
سيتم بناء عروضنا على أساس متين من معرفة HTML5 وCSS3.
يعتمد جوهر العملية على خاصية محاذاة النص مع قيمة الضبط. بالنسبة لأولئك الذين نسوا، أذكركم: تقوم هذه الخاصية بتوجيه محاذاة النص عبر عرض الحاوية بالكامل.
عند استخدام الحل لدينا، يجب مراعاة قاعدتين إلزاميتين. الأول هو أن عرض حاوية عنصر القائمة يجب أن يكون أصغر من النص. أي ليس في سطر واحد. القاعدة الثانية المهمة هي أن الكلمات تمتد بالتساوي، بغض النظر عما إذا كانت تنتمي إلى نفس النقطة أم لا.
يوجد أدناه رمز يعمل كمثال لإنشاء قائمة مطاطية:
HTML
<
ul>
<
li><
a href=
"#"
>بيت<
li><
a href=
"#"
>مدونة<
li><
a href=
"#"
>أخبار<
li><
a href=
"#"
>شائع<
li><
a href=
"#"
>عناصر جديدة
ul ( محاذاة النص: ضبط؛ تجاوز السعة: مخفي؛ /* يزيل الآثار الجانبية للطريقة */ الارتفاع: 20px؛ /* يزيل أيضًا غير الضروري */ المؤشر: الافتراضي؛ /* يضبط الشكل الأولي للمؤشر */ هامش : 50 بكسل 100 بكسل 0 100 بكسل؛ الخلفية: #eee؛ الحشو: 5 بكسل؛ ) li ( العرض: مضمن؛ /* يجعل نص عناصر القائمة */ ) li a ( العرض: مضمّن؛ /* يزيل فواصل الكلمات في القائمة */ color: #444; ) a: hover (color: #ff0000;) ul: بعد ( /* تشكيل السطر الثاني للعمل على الطريقة */ content: "1" ; الهامش الأيسر: 100%; الارتفاع: 1px; الفائض: العرض المخفي؛
للعمل في Internet Explorer القديم الجيد، يجب عليك أيضًا إضافة الكود التالي إلى CSS
ul ( z-index: Expression(runtimeStyle.zIndex = 1 , InsertAdjacentHTML("beforeEnd&apos, "<
li class
=
"last"
>")); ) ul .last ( الهامش الأيسر: 100%; ) * html ul ( /* تحتاج إلى ie6 فقط */ height: 30px; )
بعد تحديد قيم ورمز الخاصية اللازمة، نحصل على هذه القائمة المطاطية:
عيوب الطريقة
رمز الحجم
عدم القدرة على تحديد الحالة النشطة للعنصر من خلال محدد الفئة. يحدث هذا بسبب انقطاع الكلمات في الفقرات (إذا كان هناك واحد). الحل لهذه المشكلة هو إضافة حاوية أخرى داخل عناصر القائمة.
بالنسبة للقائمة المنسدلة، تحتاج إلى تخصيص الكود بسبب التأثير السلبي للتجاوز.
ما هي المتصفحات التي تعمل فيها؟
6.0+
6.0+
10.5+
5.0+
3.6+
-
-
نواصل السلسلة بدرس حول القوائم المنسدلة. التالي هو قائمة منسدلة أفقية افعلها بنفسك باستخدام CSS.
إذا وصلت إلى هنا عن طريق الصدفة أو كنت تبحث عن تنفيذ آخر للقائمة المنسدلة، أنصحك بالذهاب إلى القسم الأصلي.
سيصف هذا القسم قائمة منسدلة أفقية في CSS وHTML.
التنقل في الصفحة:
لذا، مهمتنا:
أنشئ قائمة أفقية تحتوي على قائمة منسدلة قائمة المغلق(في قوائم ul li) بدون استخدام jQuery وJavascript، وأيضًا بدون استخدام الجداول
في الكود.القائمة المنسدلة الأفقية html
أولاً، قبل أن نبدأ في كتابة التعليمات البرمجية، نحتاج إلى إنشاء قالب html للقائمة.
نظرًا لأننا نصنع قائمة عالمية، أريد أن أجعلها مشابهة قدر الإمكان للإخراج قائمة ووردبريس. في رأيي، هذا هو واحد من أبسط و HTML العالميرموز القائمة. يبدو مثل هذا:
بيت
معلومات عنا
خدماتنا
خدمتنا رقم 1
خدمتنا رقم 2
خدمتنا رقم 3
خدمتنا رقم 4
الخدمة 5
أخبار
اتصالات
كما ترون من الكود، سيتم تنفيذ القائمة المنسدلة الخاصة بنا في قائمتي ul وli. هذا ما تبدو عليه القائمة بدون أنماط CSS:
دعونا نواجه الأمر، يبدو الأمر قبيحًا، مثل القائمة العادية. بعد ذلك نحتاج إلى تزيين هذه القائمة باستخدام أنماط CSS.
القائمة المنسدلة الأفقية في CSS
تعد أنماط CSS للقوائم المنسدلة والمزيد ضرورية مثل الهواء. بعد كل شيء، تم إنشاء علامة التبويب المنسدلة بناءً على الفئة الزائفة:hover.
للحصول على قائمة منسدلة أفقية، نحتاج إلى الأنماط التالية:
#menu1 (الموضع: نسبي؛ العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ مؤشر z: 10؛) #menu1 ul (الموضع: نسبي؛ العرض: كتلة؛ الهامش: 0px؛ الحشو: 0px؛ العرض: 100 %; الارتفاع:نمط القائمة:لا شيء;الخلفية:#F3A601) #menu1 > ul::after(display:block; width:100%; height:0px; Clear:both; content:" "; ) # Menu1 ul li (الموضع: نسبي؛ العرض: كتلة؛ تعويم: يسار؛ العرض: تلقائي؛ الارتفاع: تلقائي؛) #menu1 ul li a (عرض: كتلة؛ الحشو: 9px 25px 0px 25px؛ حجم الخط: 14px؛ الخط- Family:Arial, sans-serif; )
هذه ليست النهاية بعد، مجرد جزء من CSS للقائمة الأفقية الرئيسية. بعد ذلك سنكتب أنماط القائمة المنسدلة للقائمة:
#menu1 ul li ul( الموضع:مطلق; الأعلى:36px; اليسار:0px; العرض:لا شيء; العرض:200px; الخلفية:#EBBD5B;) #menu1 ul li:hover ul(display:block;)/*ينفذ هذا الخط آلية التسرب*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a(display:block; text-transform:none; height:auto; padding:7px 25px; width: 100%; (الخلفية: #FDDC96؛ اللون: #6572BC)
هذا كل شيء الآن. يتم تنفيذ آلية التسرب نفسها في سطر واحد.
شاهد الجلد من خلال هذه القائمة:
أرز. 2 (القائمة المنسدلة الأفقية)
وفيما يلي عرض توضيحي لتشغيل القائمة المنسدلة، بالإضافة إلى رابط لتحميل المصادر. (سيتم فتح العرض التوضيحي من خلال القائمة المنسدلة أعلى هذه الصفحة، فلا داعي للنقر على فتح في نافذة جديدة 🙂 أو عجلة الماوس)
قائمة منسدلة أفقية كاملة العرض
يمكن لمعظمكم أن يوبخوني قائلين إن مثل هذه القوائم التي عرضتها أعلاه هي بمثابة تحية من الماضي، وأنتم على حق جزئيًا، على الرغم من أنني رأيت تخطيطات حديثة تحتوي على مثل هذه القوائم.
أتمنى أن تكون قد قمت بتنزيل المثال أعلاه. يظل HTML الخاص بنا كما هو، ولكننا سنغير CSS بالكامل. يمكنك ببساطة أخذ رمز CSS من هنا ولصقه في المثال الذي تم تنزيله، أو مشاهدة كيفية عمله في الوضع التجريبي.
#container (العرض: 1000 بكسل؛ الارتفاع: تلقائي؛ الهامش: 0 بكسل تلقائي؛ الحشو العلوي: 10 بكسل؛) #menu1 (الموضع: نسبي؛ العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ مؤشر z: 10؛) #menu1 ul (الموضع: نسبي؛ العرض: كتلة؛ الهامش: 0 بكسل؛ الحشو: 0 بكسل؛ العرض: 100%؛ الارتفاع: تلقائي؛ نمط القائمة: لا شيء؛ الخلفية: #F3A601؛) #menu1 > ul (محاذاة النص: ضبط حجم الخط: 1 بكسل؛ ارتفاع الخط: 1 بكسل؛ ) #menu1 > ul::after( العرض:inline-block; العرض: 100%; الارتفاع: 0px; المحتوى:" "; ) #menu1 ul li( الموضع; : العرض النسبي: كتلة مضمّنة؛ العرض: محاذاة رأسية: يسار) #menu1 ul li a( العرض: كتلة؛ الحشو: 9 بكسل 35 بكسل؛ حجم الخط: 14 بكسل؛ الخط-العائلة: sans-serif؛ الخط- height:1.3em; ul(الموضع:مطلق;أعلى:36px;يسار :0px;
العرض: لا شيء؛
بالنسبة لعناصر القائمة الطويلة جدًا، قد لا يكون هذا الخيار مناسبًا جدًا، لأنها ستتجاوز الحدود. لتعطيل هذه الخاصية، ما عليك سوى العثور على الخاصية "white-space:nowrap;" في المحدد #menu1 ul li ul، وقم بحذفه.
يمكنك أدناه مشاهدة العرض التوضيحي أو تنزيل مصادر القائمة المنسدلة الأفقية:
بدون فواصل، تبدو هذه القائمة كذلك. يمكن إضافة الفواصل إلى HTML يدويًا، ولكن إذا كان لديك نظام إدارة المحتوى (CMS)، مثل WordPress، فإن إضافتها يدويًا ليست مريحة للغاية.
قائمة منسدلة أفقية مع فواصل
هناك عدة عشرات من الخيارات لإضافة شريط (فاصل) بين عناصر القائمة باستخدام CSS خالص. لن أقوم بتكرار الخيارات التي تستخدم::before أو::after أو أبسط بكثير border-left أو border-right.
هناك مواقف يتم فيها إنشاء التخطيط بشكل رائع بحيث لا يمكنك الاستغناء عن jquery.
يظل كود HTML الخاص بنا كما هو، فنحن نقوم فقط بتضمين مكتبة jQuery والملف الذي يستخدمها في البداية:
بعد ذلك مباشرة.
كما تفهم، تحتاج إلى إنشاء ملف قائمة البرامج النصية 3.jsوأضف هذا الكود الصغير هناك:
$(document).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
يجب ترك أنماط CSS لمثل هذه القائمة كما هي، + أضف هذه القطعة إلى النهاية:
) #menu1 ul li ul (الموضع: مطلق؛ الأعلى: 36px؛ اليسار: 0px؛ العرض: لا شيء؛ العرض: تلقائي؛ الخلفية: #EBBD5B؛ مسافة بيضاء:nowrap؛) #menu1 > ul > li:last-child > ul(/*سيتم إرفاق العنصر الأخير بالحافة اليمنى*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*ينفذ هذا السطر آلية التسرب* / #menu1 ul li ul li( العرض:block; width:auto; ) #menu1 ul li ul li a(display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box -الحجم: صندوق الحدود؛ الحدود العلوية: 1 بكسل صلب #ffffff؛) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:تحويم > a(الخلفية:#FDDC96; اللون:#6572BC;) #menu1 ul li ul li ul(أعلى:0px; يسار:100%; العرض:لا شيء; الخلفية:#fddc96;) #menu1 > ul > li:الطفل الأخير > ul ul(يسار:تلقائي؛ يمين:100%;) #menu1 ul li ul li ul a(اللون:#F38A01;) نقوم بنسخ ملفات jQuery كما كانت من المثال السابق. قررت ترك الفواصل حتى تبدو القائمة أفضل قليلاً على الأقل. بالطبع يمكنك أن تفعل ذلك بدونهم.
هكذا حدث:
لقد صنعت غلافين في واحد لإظهار كيف تبدو القطرة على اليمين وفي المنتصف.
يمكنك أدناه مشاهدة العرض التوضيحي وتنزيل مثال:
قائمة منسدلة متعددة المستويات مع لوحة منبثقة عند التمرير
لن أقوم بتغيير كود HTML، بل يمكن أخذه من المثال السابق. نترك أيضًا الفواصل في jQuery.
فقط CSS سوف يتغير بالكامل:
#container (العرض: 1000 بكسل؛ الارتفاع: تلقائي؛ الهامش: 0 بكسل تلقائي؛ الحشو العلوي: 10 بكسل؛) #menu1 (الموضع: نسبي؛ العرض: كتلة؛ العرض: 100%؛ الارتفاع: تلقائي؛ مؤشر z: 10؛) #menu1 ul (الموضع: نسبي؛ العرض: كتلة؛ الهامش: 0 بكسل؛ الحشو: 0 بكسل؛ العرض: 100%؛ الارتفاع: تلقائي؛ نمط القائمة: لا شيء؛ الخلفية: #F3A601؛) #menu1 > ul (محاذاة النص: ضبط حجم الخط: 1 بكسل؛ ارتفاع الخط: 1 بكسل؛ ) #menu1 > ul::after( العرض:inline-block; العرض: 100%; الارتفاع: 0px; المحتوى:" "; ) #menu1 ul li( الموضع; :عرض نسبي: كتلة مضمّنة؛ الارتفاع: محاذاة النص: يسار) #menu1 > ul > li(position:static;) #menu1 ul li.razd :28px width:1px; -top:4px;) #menu1 ul li a(display:block; padding:9px 45px 0px 45px;font-family:Arial, sans-serif;color:#ffffef;text-decoration:none;text-transform:uppercase; حجم الصندوق: صندوق الحدود أ: تحوم، #menu1 ul li:hover > a( الخلفية:#EBBD5B;
اللون: #2B45E0؛
) #menu1 ul li ul( الموضع:مطلق; الأعلى:36px; اليسار:0px; العرض:لا شيء; العرض:100%; الخلفية:#EBBD5B;) #menu1 > ul > li > ul::after( واضح:كلاهما; float:none width:100% height:0px content:" " ) #menu1 ul li:hover > ul(display:block;)/*ينفذ هذا السطر آلية التسرب*/ #menu1 ul li li(display : block؛ width:30%; float:left;) #menu1 ul li ul li a(display:block; text-transform:none; height:auto; padding:7px 45px; width:100%; box-sizing:border - box;) #menu1 ul li ul li:الطفل الأول > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( الخلفية:#FDDC96; color :#6572BC;) #menu1 ul li ul li ul(top:0px; left:100%; Display:none; الخلفية:#fddc96; z-index:15;) #menu1 ul li ul li ul li(display: block ;
هذه هي الطريقة التي ستبدو بها القائمة: النقطة الوحيدة هي أن الموقع يجب أن يكون به مساحة كافية، حيث أن العنصر الأخير على اليمين لا يحتوي على مساحة لقائمة منسدلة. يمكن حل هذه المشكلة باستخدام:nth-child، لكنني لم أزعج نفسي.
هذا كل شيء بالنسبة لي، وآمل أن يناسبك أحد الأمثلة على الأقل. شكرًا لكم على اهتمامكم.
سوف يفيدني و منهم :)
إذا قرأت المنشور بأكمله، ولكنك لم تجد كيفية إنشاء القائمة المنسدلة الأفقية الخاصة بك في CSS، فاطرح سؤالاً في التعليقات أو استخدم البحث في الموقع.
كما أنصحك بزيارة الصفحة الأم https://site/vypadayushhee-menu/، حيث يتم جمع كافة الأمثلة وأنواع القوائم المنسدلة هناك.
القائمة الأفقية هي قائمة بأقسام موقع الويب، لذا فمن المنطقي وضعها داخل العنصر
، ثم قم بتطبيق أنماط CSS على عناصرها. يعد تخطيط القائمة هذا هو الأكثر شيوعًا نظرًا للمزايا الواضحة في وضعه على صفحة الويب.كيفية عمل قائمة أفقية: أمثلة للتخطيط والتصميم ترميز HTML والأنماط الأساسية لقائمة أفقية
افتراضيًا، يتم ترتيب جميع عناصر القائمة عموديًا، بحيث تشغل العرض الكامل لعنصر الحاوية، والذي بدوره يشغل العرض الكامل لكتلة الحاوية الخاصة به.
يمكن أيضًا وضع قائمة أفقية موجودة داخل علامة داخل العنصر ... و/أو .... بفضل ترميز HTML هذا، يتم إعطاء المعنى الدلالي، ويظهر أيضًا فرصة إضافيةلتنسيق كتلة القائمة.
هناك عدة طرق لوضعها أفقيا. أولاً، تحتاج إلى إعادة تعيين أنماط المتصفح الافتراضية لعناصر التنقل:
Ul ( نمط القائمة: لا شيء؛ / * إزالة علامات القائمة * / الهامش: 0؛ / * إزالة الهامش العلوي والسفلي يساوي 1em * / الحشو الأيسر: 0؛ / * إزالة الحشو الأيسر يساوي 40 بكسل * / ) a (زخرفة النص: لا شيء؛ /*إزالة التسطير من نص الرابط*/)
الطريقة الأولى: li (العرض: مضمن؛)
جعل عناصر القائمة صغيرة. ونتيجة لذلك، فهي تقع أفقيا، مع الجانب الأيمنتتم إضافة فجوة قدرها 0.4em بينهما (محسوبة بالنسبة لحجم الخط). لإزالته، قم بإضافة هامش أيمن سلبي لـ li li (margin-right: -4px;) . بعد ذلك، نقوم بتصميم الروابط كما نرغب.
الطريقة الثانية: li (عائم: يسار؛)
جعل عناصر القائمة عائمة. ونتيجة لذلك، يتم وضعها أفقيا. يصبح ارتفاع كتلة الحاوية صفرًا. لحل هذه المشكلة، أضفنا (overflow: Hidden;) إلى ul، وقمنا بتوسيعها وبالتالي السماح لها باحتواء العناصر العائمة. بالنسبة للروابط، قم بإضافة (display: block;) وقم بتصميمها كما تريد.
الطريقة الثالثة: li (العرض: كتلة مضمّنة؛)
جعل عناصر القائمة مضمنة في الكتلة. وهي تقع أفقيا، على الجانب الأيمن يتم تشكيل الفجوة، كما في الحالة الأولى. بالنسبة للروابط، قم بإضافة (display: block;) وقم بتصميمها كما تريد.
الطريقة الرابعة.ul (العرض: المرن؛)
جعل قائمة ul حاوية مرنة باستخدام . ونتيجة لذلك، يتم ترتيب عناصر القائمة أفقيا. نقوم بإضافة (display: block;) للروابط ونصممها حسب الرغبة.
1. قائمة متكيفة مع تأثير التسطير عند المرور فوق الرابط
أرز. 2 (القائمة المنسدلة الأفقية)
نقوم بنسخ ملفات jQuery كما كانت من المثال السابق. قررت ترك الفواصل حتى تبدو القائمة أفضل قليلاً على الأقل. بالطبع يمكنك أن تفعل ذلك بدونهم.
