كيفية تمديد القائمة الأفقية إلى عرض الصفحة. قائمة منسدلة أفقية افعلها بنفسك باستخدام CSS وHtml

نواصل السلسلة بدرس حول القوائم المنسدلة. التالي هو قائمة منسدلة أفقية افعلها بنفسك باستخدام CSS.

إذا وصلت إلى هنا عن طريق الصدفة أو كنت تبحث عن تنفيذ آخر للقائمة المنسدلة، أنصحك بالذهاب إلى القسم الأصلي.

سيصف هذا القسم قائمة منسدلة أفقية في CSS وHTML.

التنقل في الصفحة:

لذا، مهمتنا:

يفعل القائمة الأفقيةمع القائمة المنسدلة قائمة المغلق(في قوائم ul li) بدون استخدام jQuery وJavascript، وأيضًا بدون استخدام الجداول

أولاً، قبل أن نبدأ في كتابة التعليمات البرمجية، نحتاج إلى إنشاء قالب html للقائمة.

نظرًا لأننا نصنع قائمة عالمية، أريد أن أجعلها مشابهة قدر الإمكان للإخراج قائمة ووردبريس. في رأيي، هذا هو واحد من أبسط و HTML العالميرموز القائمة. يبدو مثل هذا:

• بيت
• معلومات عنا
• خدماتنا
  • خدمتنا رقم 1
  • خدمتنا رقم 2
  • خدمتنا رقم 3
  • خدمتنا رقم 4
  • الخدمة 5
• أخبار
• اتصالات

كما ترون من الكود، سيتم تنفيذ القائمة المنسدلة الخاصة بنا في قائمتي ul وli. هذا ما تبدو عليه القائمة بدون أنماط 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;

العرض: لا شيء؛

العرض: تلقائي؛

الخلفية:#EBBD5B؛

مسافة بيضاء:nowrap;

هناك عدة عشرات من الخيارات لإضافة شريط (فاصل) بين عناصر القائمة باستخدام 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.razd (الارتفاع: 28 بكسل؛ العرض: 1 بكسل؛ الخلفية: #ffffff؛ الهامش العلوي: 4 بكسل؛)

ستبدو القائمة المنسدلة الأفقية التي تحتوي على محددات في jQuery كما يلي:

يمكنك العرض في الوضع التجريبي أو تنزيل قالب القائمة الأفقية أدناه:

مزايا هذا الحل هي:

• سيتم رسم القائمة بشكل ديناميكي؛
• المسافات البادئة من الفاصل إلى الفقرة هي نفسها في كل مكان؛
• تصميم أكثر جمالا ومرونة.

نظرًا لأننا نتحدث عن القوائم المنسدلة متعددة المستويات عند التمرير، فربما يكون من المفيد تقسيمها إلى مجموعات فرعية:

في الأمثلة الخاصة بي سأظهر قائمة متعددة المستويات CSS لثلاثة مستويات، أعتقد أنه لن يكون من الصعب تخمين ما يجب القيام به.

أولاً، نحتاج إلى تصحيح HTML قليلاً. سيتم إضافة سطرين هناك للمستوى 3:

• بيت
• معلومات عنا
• خدماتنا
  • خدمتنا رقم 1
    • إضافة إلى الخدمة 1
    • إضافة إلى الخدمة 2
  • خدمتنا رقم 2
    • إضافة إلى الخدمة 3
    • إضافة إلى الخدمة 4
  • خدمتنا رقم 3
  • خدمتنا رقم 4
  • الخدمة 5
• أخبار
• اتصالات
  • خريطة الاتجاهات
    • الوظيفة الإضافية للخريطة
    • إضافة للخريطة 2
  • نموذج الملاحظات

#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( الموضع; : العرض النسبي: كتلة مضمنة؛ الارتفاع: محاذاة النص: اليسار؛ حجم الخط: 4 بكسل؛ -family:Arial، sans-serif؛ color:#ffffef؛ line-height:1.3 em; text-transform:uppercase; (الخلفية:#EBBD5B؛

اللون: #2B45E0؛

) #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لمواردك. في هذه القائمة، سيتم وضع العناصر في سطر واحد. لن يتم استخدام جافا سكريبت. سيتم تضمين محتويات القائمة في قائمة عادية. السمة الرئيسية لهذه القائمة هي تنوعها، والذي يتم التعبير عنه في حقيقة أن عدد العناصر وطولها يمكن أن يكون موجودًا.

يمكن لكل مبرمج أن يقدم طريقته الخاصة في حل مشكلة معينة. كل هذا يتوقف على خياله ومستوى الاحتراف والقدرات. الحل الأكثر شيوعًا لهذه المشكلة هو استخدام الجدول. أيضًا، قد يقترح الكثيرون استخدام جافا سكريبت. أسارع إلى إحباط أولئك الذين يقترحون استخدام خاصية العرض مع جدول القيمة أو خلية الجدول. هذه الطريقة غير متوافقة بشكل كافٍ مع المتصفحات.

سيتم بناء عروضنا على أساس متين من معرفة 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; )

بعد تحديد قيم ورمز الخاصية اللازمة، نحصل على هذه القائمة المطاطية:

مرحبًا. لم أكتب منشورات حول موضوع عمل html/css لفترة طويلة جدًا. لقد بدأت مؤخرًا في إنشاء تخطيط جديد وفي هذه العملية صادفت خدعة مثيرة للاهتمام تسمح لك بجعل القائمة مطاطية (يمكنك إضافة عناصر جديدة إليها ولن يزيد الحجم، ولكنه سيكون دائمًا 100٪ من الأصل حاجز). لذلك، سنقوم اليوم بتنفيذ قائمة مطاطية باستخدام CSS.

إذا كنت كسولًا جدًا ولا تستطيع قراءة المقال، يمكنك مشاهدة هذا الفيديو. يشرح المؤلف أيضًا كل شيء جيدًا:

الخطوة الأولى هي دائمًا ترميز HTML، أين سنكون بدونه؟ ولكن في حالتنا سيكون كل شيء بسيطًا:

كل شيء واضح، وهنا رمز الترميز الخاص بي:

• النقطة 1


• النقطة 2


• النقطة 3


• النقطة 4


• النقطة 5

كل شيء يبدو قياسيا، مثل هذا:

الآن سوف نقوم بإدخال كل شيء النوع الصحيح، يبدأ CSS في العمل.

بعد ذلك، سأضيف أنماطًا إلى كتلة الغلاف. على وجه التحديد، سأقوم بتعيين الحد الأقصى للعرض على 600 بكسل (فقط لتسهيل التقاط لقطة شاشة بحيث تناسب القائمة)، وسأقوم أيضًا بتوسيط الكتلة.

طَوّق(
الخلفية: #ففف؛
أقصى عرض: 600 بكسل؛
الهامش: 0 تلقائي؛
}

الآن دعونا نتناول القائمة نفسها. سأزيل العلامات منه (علامة ul)، وأنشئ تدرجًا خطيًا للخلفية، والأهم من ذلك، سأستخدم خاصية العرض: صف الجدول لجعل حاوية القائمة تتصرف مثل صف الجدول. من المهم القيام بذلك لمزيد من التلاعب.

قائمة R(
الخلفية: تدرج خطي (إلى اليمين، #b0d4e3 0%، #88bacf 100%)؛
العرض: صف الجدول؛
نمط القائمة: لا شيء؛
}

كما ترون، فإن الكود أعلاه قد حل كل ما كتبت عنه. بالمناسبة، من الملائم إنشاء تدرجات باستخدام أداة منشئ Ultimate CSS Gradient. وسأكتب عنه مرة أخرى يوما ما.

قائمة R(
محاذاة عمودية: أسفل؛
العرض: خلية الجدول؛
العرض: تلقائي؛
محاذاة النص: مركز؛
الارتفاع: 50 بكسل؛
الحدود اليمنى: 1 بكسل صلب #222؛
}

• محاذاة رأسية: أسفل - هذه الخاصية ضرورية بحيث إذا كان النص الموجود في عنصر القائمة يستغرق سطرين، فسيتم عرضه بالتساوي. عندما نقوم بإنشاء القائمة، يمكنك إزالة هذه الخاصية، وتكبيرها بحيث يتم ضغط العناصر ونقل النص إلى سطرين وسترى مشكلة في العرض. أعد العقار وكل شيء سيكون على ما يرام.
• العرض: خلية الجدول - نظرًا لأننا قمنا بتعيين قائمة العرض نفسها لتكون صفًا في الجدول، فسيكون من المنطقي تعيين عناصرها ليتم عرضها كخلايا في الجدول. هذا أمر لا بد منه.
• العرض: تلقائي - سيتم حساب العرض تلقائيًا، اعتمادًا على طول النص في الفقرة
• محاذاة النص: المركز - هذا فقط لتوسيط النص بالداخل
• الارتفاع: 50 بكسل - اضبط الارتفاع على 50 بكسل
• حسنًا، الحدود اليمنى هي مجرد حدود على اليمين، فاصل للعناصر

حتى الآن تبدو القائمة قبيحة، ولكن لا بأس، فقد حان الوقت لتذكرها.

آخر ما عليك فعله هو تصميم الروابط الموجودة داخل العناصر. هنا لدي هذا الرمز:

قائمة R لى(
زخرفة النص: لا شيء؛
العرض: 1000 بكسل؛
الارتفاع: 50 بكسل؛
محاذاة عمودية: وسط؛
العرض: خلية الجدول؛
اللون: #ففف؛
الخط: عادي 14px Verdana؛
}

وهذا ما تبدو عليه القائمة الآن:

مرة أخرى، اسمحوا لي أن أوضح بعض الأسطر:

• تتجاوز خاصية زخرفة النص التسطير الافتراضي للروابط
• width: 1000px ربما يكون الخط الأكثر أهمية. تحتاج إلى ضبط الارتباطات على هذا العرض تقريبًا، وربما أقل، ولكن بالتأكيد أكبر من أوسع عنصر ممكن في القائمة. لن يكون عرض الروابط 1000 بكسل، نظرًا لأن العرض سيكون محدودًا بعنصر القائمة li، الذي تم ضبط عرضه على تلقائي، ولكن هذا سيجعل من الممكن التأكد من أنه بالنسبة لأي عدد من العناصر في القائمة سيكون دائمًا 100 بكسل في المئة من العرض.
• محاذاة رأسية: الوسط والعرض: خلية الجدول - الأول سوف يقوم بمحاذاة النص عموديًا إلى المركز، والثاني سيعرض أيضًا الروابط كخلايا. هناك حاجة إلى كلا الخاصيتين.
• الخط - حسنًا، هذه مجرد مجموعة من إعدادات الخط. اقرأ عن خصائص المغلقللخطوط في هذه المقالة.

على سبيل المثال، بحيث يتغير لون عنصر القائمة عند التمرير فوقه. يمكن تنفيذ ذلك بكل بساطة، باستخدام الفئة الزائفة hover:

قائمة R: تحوم (
لون الخلفية: #6bba70؛
}

عظيم، القائمة جاهزة، لكننا لم نتحقق من الأمر الأكثر أهمية - كم هي مطاطية، كما وعدتك. حسنًا، سأضيف عنصرين آخرين إلى القائمة:

تظل القائمة بعرض 600 بكسل. تم تقليص العناصر المتبقية قليلاً لاستيعاب عنصرين جديدين.

سأضيف نقطة أخرى طويلة:

كما ترون، تقلصت القائمة أكثر قليلاً ويتم عرض العنصر الطويل بشكل طبيعي تمامًا. ولولا خاصية المحاذاة الرأسية: السفلية التي أخبرتك عنها، لكانت القائمة تبدو أسوأ.

سأقوم بتقليل القائمة إلى ثلاثة عناصر.

أصبحت العناصر أكثر حرية بكثير، ولكن القائمة نفسها لم تتغير في العرض. لذلك قمنا بإعداد قائمة طعام مطاطية 100%!

من حيث المبدأ، إذا أعطيت كتلة الغلاف أقصى عرض بدلاً من عرض ثابت، فلن تحتاج حتى إلى التكيف. في حالتي، لدي خاصية الحد الأقصى للعرض: 600 بكسل وعندما يصبح العرض أقل من 600 بكسل، ستتقلص الكتلة ببساطة مع الشاشة، دون تشكيل تمرير أفقي.

حسنًا، إذا كنت تريد تغيير القائمة أو تصحيحها بطريقة أو بأخرى الأجهزة المحمولةأو شاشات واسعة، فإن استعلامات الوسائط سوف تساعدك! حظا سعيدا في بناء الموقع!

القائمة الأفقية هي قائمة بأقسام موقع الويب، لذا فمن المنطقي وضعها داخل العنصر

، ثم قم بتطبيق أنماط CSS على عناصرها. يعد تخطيط القائمة هذا هو الأكثر شيوعًا نظرًا للمزايا الواضحة في وضعه على صفحة الويب.
كيفية عمل قائمة أفقية: أمثلة للتخطيط والتصميم ترميز HTML والأنماط الأساسية لقائمة أفقية

افتراضيًا، يتم ترتيب جميع عناصر القائمة عموديًا، بحيث تشغل العرض الكامل لعنصر الحاوية، والذي بدوره يشغل العرض الكامل لكتلة الحاوية الخاصة به.

ترميز 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 حاوية مرنة باستخدام . ونتيجة لذلك، يتم ترتيب عناصر القائمة أفقيا. نضيف (عرض: كتلة؛) للروابط ونصممها حسب الرغبة.

1. قائمة متكيفة مع تأثير التسطير عند المرور فوق الرابط
• عمل
• عن
• مدونة
• اتصال
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (نمط القائمة: لا شيء؛ الهامش: 40 بكسل 0 5 بكسل؛ الحشو: 25 بكسل 0 5 بكسل؛ محاذاة النص: المركز؛ الخلفية: أبيض؛) .menu-main li (العرض: كتلة مضمّنة؛).menu- لي الرئيسي: بعد ( المحتوى: "|"؛ اللون: #606060؛ العرض: كتلة مضمنة؛ محاذاة رأسية: أعلى؛ ) .menu-main لي: آخر طفل: بعد (المحتوى: لا شيء؛) .menu-main a (زخرفة النص: لا شيء؛ عائلة الخط: "Ubuntu Condensed"، sans-serif؛ تباعد الحروف: 2 بكسل؛ الموضع: نسبي؛ الحشو السفلي: 20 بكسل؛ الهامش: 0 34 بكسل 0 30 بكسل؛ حجم الخط: 17 بكسل؛ تحويل النص: حرف كبير؛ العرض: انتقال مضمّن: اللون .2s) .menu-main a، .menu-main a:visited (اللون: #9d999d؛). ) .menu-main a: before، .menu-main a: after ( المحتوى: ""؛ الموضع: مطلق؛ الارتفاع: 4px؛ الأعلى: تلقائي؛ اليمين: 50%؛ الأسفل: -5px؛ اليسار: 50%؛ الخلفية : #feb386؛ الانتقال: .8s؛ ) .menu-main a:hover:before، .menu-main .current:before (يسار: 0؛). 0;) @media (الحد الأقصى للعرض: 550 بكسل) ( .menu-main (الحشوة العلوية: 0;).menu-main li (العرض: block; ) .menu-main li:after (content: none;) . القائمة الرئيسية أ ( الحشو: 25 بكسل 0 20 بكسل؛
• عمل
• عن
• مدونة
• اتصال
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (الموضع: نسبي؛ الخلفية: #fff؛ ظل الصندوق: داخلي 0 0 10px #ccc؛) .top-menu: قبل، .top-menu: بعد (المحتوى: ""؛ العرض: block؛ الارتفاع : 1 بكسل؛ الحد العلوي: 3 بكسل صلب #575350؛ الحد السفلي: 1 بكسل صلب #575350؛ 575350؛ مربع الظل: 0 2 بكسل 7 بكسل #ccc؛ الهامش العلوي: 2 بكسل. القائمة الرئيسية (نمط القائمة: لا شيء؛ الحشو: 0 30 بكسل؛ الهامش: 0؛ حجم الخط: 18 بكسل؛ محاذاة النص: المركز؛ الموضع: نسبي ) .menu-main: قبل، .menu-main: بعد ( المحتوى: "\25C8"؛ ارتفاع الخط: 1؛ الموضع: مطلق؛ الأعلى: 50%؛ التحويل: ترجمة Y(-50% ); (زخرفة النص: لا شيء؛ العرض: كتلة مضمنة؛ الهامش: 2 بكسل 5 بكسل؛ الحشو: 6 بكسل 15 بكسل؛ عائلة الخط: "PT Sans"، sans-serif؛ حجم الخط: 16 بكسل؛ اللون: #777777؛ الحد السفلي : 1 بكسل انتقال شفاف خالص: .3 ثانية خطي؛ ) .menu-main .current، .menu-main a:hover ( border-radius: 3px; الخلفية: #f3ece1; اللون: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (الحد الأقصى للعرض: 500 بكسل) ( .menu-main li (العرض: block؛)) 3. قائمة صدفية سريعة الاستجابة
• عمل
• عن
• مدونة
• اتصال
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (نمط القائمة: لا شيء؛ الحشو: 0 30 بكسل؛ الهامش: 0؛ حجم الخط: 18 بكسل؛ محاذاة النص: المركز؛ الموضع: نسبي؛ الخلفية: أبيض؛ ) .menu-main: بعد ( المحتوى: ""؛ الموضع: مطلق؛ الارتفاع: 20 بكسل؛ الجزء السفلي: -20 بكسل؛ الخلفية: أبيض 0%، أبيض 70%، rgba(255,255,255,0) 255,255,255,0) 100%) 0 -10 بكسل; تكرار الخلفية: تكرار x؛ ) .menu-main li (العرض: كتلة مضمّنة؛) .menu-main a (زخرفة النص: لا شيء؛ العرض: كتلة مضمنة؛ الحشو: 10 بكسل 30 بكسل؛ عائلة الخط: " PT Sans Caption"، sans-serif؛ الانتقال: .3s خطي؛ -main a:before، .menu-main a:after ( content: ""؛ الموضع: مطلق؛ أعلى: calc(50% - 3px)؛ العرض: 6 بكسل الارتفاع: 6 بكسل؛ نصف قطر الحدود: 50%؛ الخلفية: #F58262 العتامة: 0؛ الانتقال: .5 ثانية سهلة الإدخال؛ :بعد (يمين: 5px؛) .menu-main أ. الحالي: قبل، .menu-main a.current: بعد، .menu-main a:hover:before، .menu-main a:hover:after (التعتيم: 1;) .menu-main a.current، .menu- main a:hover (اللون: #F58262؛) @media(max-width:680px) ( .menu-main li (display: block;)) ) 4. تكيفي القائمة على الشريط
• عمل
• عن
• مدونة
• اتصال
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .القائمة العلوية ( الهامش: 0 60 بكسل؛ الموضع: نسبي؛ الخلفية: #5A394E؛ ظل الصندوق: داخلي 1px 0 0 rgba(255,255,255,.1), داخلي -1px 0 0 rgba(255,255,255,.1), داخلي 150 بكسل 0 150px -150px rgba(255,255,255,.12), داخلي -150px 0 150px -150px rgba(255,255,255,.12); .top-menu: قبل, .top-menu: بعد ( content: ""; الموضع: مطلق) مؤشر z: 2؛ العرض: 100%؛ الارتفاع: 3 بكسل؛ -النمط: لا شيء؛ الحشو: 0؛ الهامش: 0؛ محاذاة النص: المركز) . القائمة الرئيسية: بعد (المحتوى: ""؛ الموضع: مطلق؛ العرض: 50 بكسل؛ الارتفاع: 0". أعلى: 8 بكسل؛ الحد العلوي: 18 بكسل صلب #5A394E؛ الحد السفلي: 18 بكسل صلب # 5A394E؛ الحدود اليسرى: 12 بكسل الصلبة rgba (255، 255، 255، 0)؛ ) .menu-main li (العرض: كتلة مضمنة؛ الهامش الأيمن: -4 بكسل؛ ) .menu-main a (زخرفة النص: لا شيء؛ العرض: كتلة مضمنة؛ الحشو: 15 بكسل 30 بكسل؛ عائلة الخط: "PT" Sans Caption"، sans-serif؛ اللون: أبيض؛ الانتقال: .3s خطي؛ ) .menu-main a.current، .menu-main a:hover (الخلفية: rgba(0,0,0,.2);) @media (الحد الأقصى للعرض: 680 بكسل) ( .top-menu (الهامش: 0؛) .menu-main li ( العرض: block؛ الهامش الأيمن: 0؛ ) .menu-main: قبل، .menu-main: بعد (المحتوى: لا شيء؛) .menu-main a (العرض: block؛) ) 5. قائمة سريعة الاستجابة مع وجود شعار في المنتصف
• عمل
• عن
• قصة
• اتصال
• محل
• معرض
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( الموضع: نسبي؛ الخلفية: rgba(34,34,34,.2); ) .menu-main (نمط القائمة: لا شيء; الهامش: 0; الحشو: 0; ) .menu-main: بعد ( المحتوى: ""؛ العرض: الجدول؛ واضح: كلاهما؛ ) .left-item (float: left؛) .right-item (float: right؛).navbar-logo ( الموضع: مطلق؛ left: 50%؛ top : 50%؛ تحويل: ترجمة (-50%،-50%)؛ .menu-main a ( زخرفة النص: لا شيء؛ العرض: كتلة؛ ارتفاع الخط: 80 بكسل؛ الحشو: 0 20 بكسل؛ حجم الخط: 18 بكسل؛ تباعد الحروف: 2 بكسل؛ عائلة الخط: "Arimo"، sans-serif؛ اللون: أبيض؛ انتقال: 0.3 ثانية؛) @media (الحد الأقصى للعرض: 830 بكسل) ( .menu- main ( الحشو العلوي: 90 بكسل؛ محاذاة النص: المركز؛ ) .navbar-logo ( الموضع: مطلق؛ اليسار: 50%؛ العلوي: 10 بكسل؛ التحويل: TranslateX(-50%)) .menu-main li ( float: لا يوجد عرض: كتلة مضمنة؛ ) .menu-main أ ( ارتفاع الخط: عادي؛ الحشو: 20 بكسل 15 بكسل؛ حجم الخط: 16 بكسل؛ ) ) @media (الحد الأقصى للعرض: 630 بكسل) ( .menu-main li ( العرض: كتلة؛) ) 6. قائمة الاستجابة مع الشعار على اليسار
• عمل
• عن
• قصة
• محل
• معرض
• اتصال
@import url("https://fonts.googleapis.com/css?family=Arimo"); .القائمة العلوية ( الخلفية: rgba(255,255,255,.5); ظل الصندوق: 3px 0 7px rgba(0,0,0,.3); الحشو: 20px; ) .القائمة العلوية:بعد ( المحتوى: "" عرض: جدول؛ واضح: كلاهما) .navbar-logo (عرض: كتلة مضمنة؛) .menu-main (نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛ تعويم: يمين؛) .menu-main li (العرض: كتلة مضمّنة؛).menu-main a (زخرفة النص: لا شيء؛ العرض: كتلة؛ الموضع: نسبي؛ ارتفاع السطر: 61 بكسل؛ مساحة الحشو على اليسار: 20 بكسل؛ حجم الخط: 18 بكسل؛ تباعد الحروف : 2px؛ عائلة الخط: "Arimo"، sans-serif؛ اللون: #F73E24؛ الانتقال: .3s خطي؛ اليسار: 50%؛ تحويل (45 درجة) ترجمة X (6.5 بكسل)؛ الانتقال: .3 ثانية خطي؛ (التعتيم: 1؛) @media (أقصى عرض: 660 بكسل) ( .menu-main ( float: none; padding-top: 20 بكسل ؛ ) .القائمة العلوية ( محاذاة النص: المركز ؛ الحشو: 20 بكسل 0 0 0 ؛ ) .القائمة الرئيسية أ (الحشوة: 0 10 بكسل ؛) . القائمة الرئيسية أ: قبل (التحويل: تدوير (45 درجة) ترجمة X ( -6px)؛) ) @media (الحد الأقصى للعرض: 600 بكسل) ( .menu-main li (العرض: block؛))