الرئيسي / البرامج/ قم بتمديد القائمة إلى العرض الكامل لـ css. كيف تصنع قائمة استجابة مرنة في المغلق؟ ترميز HTML والأنماط الأساسية للقوائم الأفقية

قم بتمديد القائمة إلى العرض الكامل لـ css. كيف تصنع قائمة استجابة مرنة في المغلق؟ ترميز HTML والأنماط الأساسية للقوائم الأفقية

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

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

كيف يتم تنفيذ هذا؟

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

حلنا

سيتم بناء اقتراحنا على أساس متين من معرفة HTML5 و CSS3.

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

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

يوجد أدناه الرمز الذي يعمل كمثال على إنشاء قائمة "مطاطية":

لغة البرمجة

< ul> < li>< a href= "#" >الرئيسي < li>< a href= "#" >مدونة او مذكرة < li>< a href= "#" >الإخبارية < li>< a href= "#" >شائع < li>< a href= "#" >عناصر جديدة

ul (محاذاة النص: ضبط ؛ تجاوز: مخفي ؛ / * يزيل الآثار الجانبية للطريقة * /الارتفاع: 20 بكسل ؛ / * يزيل الأشياء غير الضرورية أيضًا * /المؤشر: الافتراضي ؛ / * يعين شكل المؤشر الأصلي * /الهامش: 50 بكسل 100 بكسل 0100 بكسل ؛ الخلفية: #eee ؛ الحشو: 5 بكسل ؛ ) لي (عرض: مضمنة ؛ / * يجعل عناصر القائمة نصية * /) لي أ (عرض: كتلة مضمنة ؛) / * إصلاح فاصل الكلمات في القائمة * /اللون: # 444 ؛ ) أ: تحوم (اللون: # ff0000 ؛) ul: بعد ( / * تشكيل السطر الثاني لحساب الطريقة * /المحتوى: "1" ؛ الهامش- اليسار: 100٪ ؛ الارتفاع: 1 بكسل ؛ إخفاء الفائض؛ العرض: مضمنة - كتلة ؛ )

للعمل في Internet Explorer القديم الجيد ، تحتاج إلى إضافة الكود التالي إلى CSS

ul (z- index: expression (runtimeStyle. zIndex = 1، insertAdjacentHTML ("beforeEnd & apos،"،< li class = "last" > ")) ؛) ul .last (margin-left: 100٪؛) * html ul (/ * need ie6 only * / height: 30px؛)

بعد تسجيل قيم الممتلكات الضرورية والرمز ، نحصل على القائمة المطاطية التالية:

عيوب الطريقة

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

ما المتصفحات التي تعمل فيها؟


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

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

كيفية عمل قائمة أفقية: أمثلة على الترميز والتصميم

ترميز HTML والأنماط الأساسية للقوائم الأفقية

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

ترميز HTML للتنقل الأفقي

عنصر القائمة
عنصر القائمة
عنصر القائمة

يمكن وضع قائمة أفقية داخل علامة اختياريا داخل عنصر

...

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

Ul (list-style: none؛ / * إزالة علامات القائمة * / margin: 0؛ / * إزالة الهامش العلوي والسفلي يساوي 1em * / padding-left: 0 ؛ / * إزالة الهامش الأيسر يساوي 40 بكسل * /) أ ( زخرفة النص: لا شيء ؛ / * إزالة تسطير نص الرابط * /)

الطريقة 1.li (عرض: مضمنة ؛)

نجعل عناصر القائمة صغيرة. نتيجة لذلك ، يتم وضعها أفقيًا ، على الجانب الأيمن بينهما تتم إضافة فجوة تساوي 0.4em (محسوبة بالنسبة لحجم الخط). لإزالته ، أضف هامشًا أيمنًا سلبيًا لـ li (margin-right: -4px ؛). بعد ذلك ، سنقوم بتصميم الروابط كما نرغب.

الطريقة 2.li (تعويم: يسار ؛)

عائم عناصر القائمة. نتيجة لذلك ، يتم وضعها أفقيًا. يصبح ارتفاع كتلة الحاوية ul صفرًا. لحل هذه المشكلة ، نضيف (overflow: hidden ؛) إلى ul ، ونوسعها وبالتالي نسمح لها باحتواء عناصر عائمة. بالنسبة للروابط ، أضف (display: block ؛) وقم بتصميمها كما يحلو لك.

الطريقة 3.li (العرض: كتلة مضمنة ؛)

نجعل عناصر القائمة مضمنة. تقع أفقياً ، يتم تشكيل فجوة على الجانب الأيمن ، كما في الحالة الأولى. بالنسبة للروابط ، أضف (display: block ؛) وقم بتصميمها كما يحلو لك.

الطريقة 4.ul (العرض: المرن ؛)

صنع وعاء مرن باستخدام نموذج. نتيجة لذلك ، يتم ترتيب عناصر القائمة أفقيًا. أضف (display: block؛) للروابط وقم بتصميمها كما يحلو لك.

1. قائمة متجاوبة مع تأثير تسطير عند التمرير فوق ارتباط

2. القائمة المستجيبة لموقع الزفاف

3. القائمة التكيفية مع الأسقلوب

4. قائمة الاستجابة على الشريط

5. قائمة متجاوبة مع شعار في المنتصف

6. قائمة الاستجابة مع الشعار على اليسار

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

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

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

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

وبالتالي، مهمتنا:

قم بإنشاء قائمة أفقية باستخدام قائمة css المنسدلة (في قوائم ul li) بدون استخدام jQuery و Javascript وأيضًا بدون استخدام الجداول
في الكود.
قائمة html أفقية منسدلة
بادئ ذي بدء ، قبل البدء في كتابة الكود ، نحتاج إلى إنشاء قالب html للقائمة.
نظرًا لحقيقة أننا نصنع قائمة عالمية ، أريد أن أجعلها مشابهة قدر الإمكان لإخراج قائمة WordPress. في رأيي ، يعد هذا أحد أبسط أكواد قائمة Html وأكثرها تنوعًا. تبدو هكذا:

الرئيسي

معلومات عنا

خدماتنا

خدمتنا # 1

خدمتنا # 2

خدمتنا # 3

خدمتنا رقم 4

الخدمة 5

الإخبارية

جهات الاتصال

كما ترى من الكود ، سيتم تنفيذ القائمة المنسدلة الخاصة بنا في قوائم ul و li. هذا ما تبدو عليه هذه القائمة بدون أنماط CSS:
دعنا نقول فقط أنها تبدو قبيحة ، مثل قائمة عادية. بعد ذلك ، نحتاج إلى تلوين هذه القائمة باستخدام أنماط CSS.
القائمة المنسدلة الأفقية لـ CSS
تعد أنماط CSS للقوائم المنسدلة والمزيد ضرورية مثل الهواء. بعد كل شيء ، تعتمد علامة التبويب المنسدلة على: hover pseudo-class.
بالنسبة إلى القائمة المنسدلة الأفقية ، نحتاج إلى الأنماط التالية:
# menu1 (الوضع: نسبي ؛ العرض: الكتلة ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ z-index: 10 ؛) # menu1 ul (الموقف: النسبي ؛ العرض: الكتلة ؛ الهامش: 0 بكسل ؛ الحشو: 0 بكسل ؛ العرض: 100 ٪؛ height: auto؛ list-style: none؛ background: # F3A601؛) # menu1> ul :: after (display: block؛ width: 100٪؛ height: 0px؛ clear: both؛ content: ""؛) # menu1 ul li (position: النسبي ؛ display: block ؛ float: left ؛ width: auto ؛ height: auto ؛) # menu1 ul li a (display: block؛ padding: 9px 25px 0px 25px؛ font-size: 14px؛ font- family: Arial، sans-serif؛ color: #ffffef؛ line-height: 1.3em؛ text-decoration: none؛ font-weight: bold؛ text-transform: uppercase؛ height: 36px؛ box-sizing: border-box؛ ) # menu1 ul li> a: hover، # menu1 ul li: hover> a (background: # EBBD5B؛ color: # 2B45E0؛)
هذه ليست النهاية ، ولكنها جزء فقط من CSS للقائمة الأفقية الرئيسية. بعد ذلك ، سنكتب أنماط القائمة المنسدلة:
# menu1 ul li ul (الموقف: مطلق ؛ أعلى: 36 بكسل ؛ اليسار: 0 بكسل ؛ العرض: لا شيء ؛ العرض: 200 بكسل ؛ الخلفية: # 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٪؛ box-sizing: border-box؛ border-top: 1px solid #ffffff؛) # menu1 ul li ul li: first-child a (border-top: 0px؛) # menu1 ul li ul li a: hover ( الخلفية: # FDDC96 ؛ اللون: # 6572BC ؛)
الآن هذا كل شيء. يتم تنفيذ آلية القائمة المنسدلة نفسها في سطر واحد.
انظر إلى الجلد بهذه القائمة:
تين. 2 (قائمة أفقية منسدلة)
يوجد أدناه عرض توضيحي للقائمة المنسدلة ، بالإضافة إلى رابط لتنزيل المصدر. (سيتم فتح العرض التوضيحي كقائمة منسدلة أعلى هذه الصفحة ، ولا داعي للنقر فوق فتح في نافذة جديدة 🙂 أو عجلة الماوس)
قائمة منسدلة أفقية كاملة العرض
يقولون إن معظمكم يمكن أن يوبخني ، مثل هذه القوائم ، كما أوضحت أعلاه ، هي تحيات من الماضي وجزئيًا أنت على حق ، على الرغم من أنني صادفت تخطيطات جديدة مع مثل هذه القوائم.
أتمنى أن تقوم بتنزيل المثال أعلاه. يبقى Html كما هو ، لكننا سنغير CSS تمامًا. يمكنك فقط أخذ كود CSS من هنا ولصقه في المثال الذي تم تنزيله ، أو مشاهدته في الوضع التجريبي.
#conteiner (العرض: 1000 بكسل ؛ الارتفاع: تلقائي ؛ الهامش: 0 بكسل تلقائي ؛ المساحة العلوية: 10 بكسل ؛) # menu1 (الموضع: نسبي ؛ العرض: الكتلة ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ مؤشر z: 10 ؛) # menu1 ul (الموضع: نسبي ؛ عرض: كتلة ؛ هامش: 0 بكسل ؛ حشوة: 0 بكسل ؛ عرض: 100٪ ؛ ارتفاع: تلقائي ؛ نمط القائمة: لا شيء ؛ الخلفية: # F3A601 ؛) # menu1> ul (محاذاة النص: justify؛ font-size: 1px؛ line-height: 1px؛) # menu1> ul :: after (display: inline-block؛ width: 100٪؛ height: 0px؛ content: ""؛) # menu1 ul li (position : نسبي ؛ عرض: كتلة مضمنة ؛ العرض: تلقائي ؛ الارتفاع: تلقائي ؛ المحاذاة الرأسية: أعلى ؛ محاذاة النص: يسار ؛) # menu1 ul li a (عرض: كتلة ؛ الحشو: 9px 35px 0px 35px ؛ حجم الخط : 14px؛ font-family: Arial، sans-serif؛ color: #ffffef؛ line-height: 1.3em؛ text-decoration: none؛ font-weight: bold؛ text-transform: uppercase؛ height: 36px؛ box-sizing : border-box؛) # menu1 ul li> a: hover، # menu1 ul li: hover> a (background: # EBBD5B؛ color: # 2B45E0؛) # menu1 ul li ul (الموقف: مطلق ؛ أعلى: 36px ؛ يسار : 0 بكسل ؛ عرض لا شيء؛ العرض: تلقائي ؛ الخلفية: # EBBD5B ؛ مساحة بيضاء: نوراراب. ) # menu1 ul li: last-child ul (/ * سيتم إرفاق العنصر الأخير إلى اليمين * / left: auto؛ right: 0px؛) # menu1 ul li: hover ul (display: block؛) / * هذا السطر تنفذ آلية التسرب * / # menu1 ul li ul li (display: block؛ width: auto؛) # menu1 ul li ul li a (display: block؛ text-transform: none؛ height: auto؛ padding: 7px 35px؛ width : 100٪؛ box-sizing: border-box؛ border-top: 1px solid #ffffff؛) # menu1 ul li ul li: first-child a (border-top: 0px؛) # menu1 ul li ul li a: hover (الخلفية: # FDDC96 ؛ اللون: # 6572BC ؛)
أيضًا ، يختلف هذا المثال عن الأول في تلك القائمة المنسدلة ، القائمة المنسدلة نفسها ، وتمتد اعتمادًا على عرض جميع عناصر القائمة.
بالنسبة لعناصر القائمة الطويلة جدًا ، قد لا يكون هذا الخيار مناسبًا جدًا ، نظرًا لأنها ستتجاوز الحدود. لتعطيل هذه الخاصية ، ما عليك سوى البحث عن الخاصية "white-space: nowrap؛" في المحدد # menu1 ul li ul ، وإزالته.
يمكنك أدناه مشاهدة عرض توضيحي أو تنزيل مصادر القائمة المنسدلة الأفقية:
بدون فواصل ، تبدو هذه القائمة كذلك. يمكن إضافة الفواصل إلى html يدويًا ، ولكن إذا كان لديك CMS ، على سبيل المثال WordPress ، فإن إضافتها يدويًا ليست مريحة للغاية هناك.
القائمة المنسدلة الأفقية المحددة
هناك عدة عشرات من الخيارات حول كيفية إضافة شريط (فاصل) بين عناصر القائمة في CSS خالص. المتغيرات التي تستخدم :: قبل أو :: بعد ، أو أبسط بكثير من الحد الأيسر ، لن أقوم بتكرار الحد الأيمن.
هناك حالات يتم فيها إنشاء التخطيط بشكل رائع بحيث لا يمكنك الاستغناء عن المسج.
يظل كود html كما هو ، فنحن نضمّن فقط في البداية مكتبة jQuery والملف الذي يستخدمها:

مباشرة بعد.
كما تفهم ، تحتاج إلى إنشاء ملف script-menu-3.jsووضع هذا الرمز الصغير هناك:
$ (document) .ready (function () ($ ("# menu1> ul> li: not (: last-child)"). after ("")؛))؛
يجب ترك أنماط CSS لمثل هذه القائمة كما هي ، + قم برمي هذه القطعة في النهاية:
# menu1 ul li.razd (الارتفاع: 28 بكسل ؛ العرض: 1 بكسل ؛ الخلفية: #ffffff ؛ الهامش العلوي: 4 بكسل ؛)
ستبدو هذه القائمة المنسدلة الأفقية ذات المحددات في jQuery كما يلي:
يمكنك مشاهدته في الوضع التجريبي أو تنزيل قالب القائمة الأفقية أدناه:
مزايا هذا الحل هي:
ستسحب القائمة ديناميكيًا ؛

المسافات البادئة من الفاصل إلى الفقرة هي نفسها في كل مكان ؛

تصميم أكثر جمالا ومرونة.

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

مع قائمة منبثقة من المستوى الثالث

في الأمثلة الخاصة بي ، سأعرض قائمة CSS متعددة المستويات من 3 مستويات ، ثم أعتقد أنه لن يكون من الصعب تخمين ما يجب القيام به.
القائمة المنسدلة متعددة المستويات مع vipadash على الجانب عند التمرير
أولاً ، نحتاج إلى تصحيح ملف html الخاص بنا قليلاً. سيتم إضافة سطرين للمستوى 3:

الرئيسي

معلومات عنا

خدماتنا

خدمتنا # 1

إضافة الخدمة 1

إضافة الخدمة 2

خدمتنا # 2

إضافة الخدمة 3

إضافة الخدمة 4

خدمتنا # 3

خدمتنا رقم 4

الخدمة 5

الإخبارية

جهات الاتصال

خريطة الطريق

إضافة الخريطة

إضافة الخريطة 2

نموذج الملاحظات

#conteiner (العرض: 1000 بكسل ؛ الارتفاع: تلقائي ؛ الهامش: 0 بكسل تلقائي ؛ المساحة العلوية: 10 بكسل ؛) # menu1 (الموضع: نسبي ؛ العرض: الكتلة ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ مؤشر z: 10 ؛) # menu1 ul (الوضع: النسبي ؛ العرض: الحظر ؛ الهامش: 0 بكسل ؛ الحشو: 0 بكسل ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ نمط القائمة: لا شيء ؛ الخلفية: # F3A601 ؛) # menu1> ul (محاذاة النص: justify؛ font-size: 1px؛ line-height: 1px؛) # menu1> ul :: after (display: inline-block؛ width: 100٪؛ height: 0px؛ content: ""؛) # menu1 ul li (position : نسبي ؛ عرض: كتلة مضمنة ؛ عرض: تلقائي ؛ ارتفاع: تلقائي ؛ محاذاة رأسية: أعلى ؛ محاذاة النص: يسار ؛) # menu1 ul li.razd (الارتفاع: 28 بكسل ؛ العرض: 1 بكسل ؛ الخلفية: #ffffff ؛ margin-top: 4px؛) # menu1 ul li a (display: block؛ padding: 9px 45px 0px 45px؛ font-size: 14px؛ font-family: Arial، sans-serif؛ color: #ffffef؛ line-height: 1.3 em؛ text-decoration: none؛ font-weight: bold؛ text-convert: uppercase؛ height: 36px؛ box-sizing: border-box؛) # menu1 ul li> a: hover، # menu1 ul li: hover> a (معرفتي: # EBBD5B ؛ اللون: # 2B45E0 ؛ ) # menu1 ul li ul (الموضع: مطلق ؛ أعلى: 36 بكسل ؛ يسار: 0 بكسل ؛ عرض: لا شيء ؛ عرض: تلقائي ؛ الخلفية: # EBBD5B ؛ مسافة بيضاء: nowrap ؛) # menu1> ul> li: last-child> ul (/ * سيتم إرفاق العنصر الأخير إلى اليمين * / اليسار: auto؛ right: 0px؛) # menu1 ul li: hover> ul (display: block؛) / * هذا السطر يطبق آلية التسرب * / # menu1 ul li ul li (display: block؛ width: auto؛) # menu1 ul li ul li a (display: block؛ text-transform: none؛ height: auto؛ padding: 7px 45px؛ width: 100٪؛ box-size: border-box؛ border-top: 1px solid #ffffff؛) # menu1 ul li ul li: first-child> a (border-top: 0px؛) # menu1 ul li ul li a: hover، # menu1 ul li ul li : hover> a (background: # FDDC96؛ color: # 6572BC؛) # menu1 ul li ul li ul (top: 0px؛ left: 100٪؛ display: none؛ background: # fddc96؛) # menu1> ul> li: last-child> ul ul (يسار: تلقائي ؛ يمين: 100٪ ؛) # menu1 ul li ul li ul a (color: # F38A01 ؛)
انسخ ملفات jQuery كما كانت من المثال السابق. قررت ترك الفواصل حتى تبدو القائمة أفضل قليلاً على الأقل. يمكنك بالطبع بدونهم.
و هكذا حدثت الحكاية:
لقد صنعت جلدين في واحد لإظهار كيف تبدو القائمة المنسدلة على اليمين وفي المنتصف.
يمكنك أدناه مشاهدة عرض توضيحي وتنزيل مثال:
القائمة المنسدلة متعددة المستويات مع vipadash المنبثقة عند التمرير
ظهر القليل من الزيت في العنوان ، لكنه سيعمل ، الشيء الرئيسي هو الكود.
يتمثل جوهر هذا المثال في إنشاء قائمة منسدلة أفقية كاملة العرض مع قائمة منسدلة كاملة العرض + طبقات.
لن أقوم بتغيير كود html ، يمكن أن يؤخذ من المثال السابق. نحتفظ أيضًا بفواصل jQuery.
سيتغير CSS الكامل فقط:
#conteiner (العرض: 1000 بكسل ؛ الارتفاع: تلقائي ؛ الهامش: 0 بكسل تلقائي ؛ المساحة العلوية: 10 بكسل ؛) # menu1 (الموضع: نسبي ؛ العرض: الكتلة ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ مؤشر z: 10 ؛) # menu1 ul (الموضع: نسبي ؛ عرض: كتلة ؛ هامش: 0 بكسل ؛ حشوة: 0 بكسل ؛ عرض: 100٪ ؛ ارتفاع: تلقائي ؛ نمط القائمة: لا شيء ؛ الخلفية: # F3A601 ؛) # menu1> ul (محاذاة النص: justify؛ font-size: 1px؛ line-height: 1px؛) # menu1> ul :: after (display: inline-block؛ width: 100٪؛ height: 0px؛ content: ""؛) # menu1 ul li (position : نسبي ؛ عرض: كتلة مضمنة ؛ عرض: تلقائي ؛ ارتفاع: تلقائي ؛ محاذاة رأسية: أعلى ؛ محاذاة النص: يسار ؛) # menu1> ul> li (الموضع: ثابت ؛) # menu1 ul li.razd (الارتفاع : 28px؛ width: 1px؛ background: #ffffff؛ margin-top: 4px؛) # menu1 ul li a (display: block؛ padding: 9px 45px 0px 45px؛ font-size: 14px؛ font-family: Arial، sans- serif؛ color: #ffffef؛ line-height: 1.3em؛ text-decoration: none؛ font-weight: bold؛ تحويل النص: الأحرف الكبيرة؛ height: 36px؛ box-sizing: border-box؛) # menu1 ul li> أ: تحوم ، # menu1 ul li: hover> a (background: # EBBD5B ؛ اللون: # 2B45E0 ؛ ) # menu1 ul li ul (الموضع: مطلق ؛ أعلى: 36 بكسل ؛ يسار: 0 بكسل ؛ عرض: لا شيء ؛ عرض: 100٪ ؛ الخلفية: # EBBD5B ؛) # menu1> ul> li> ul :: after (clear: both ؛ float: none؛ width: 100٪؛ height: 0px؛ content: ""؛) # menu1 ul li: hover> ul (display: block؛) / * هذا الخط ينفذ آلية التسرب * / # menu1 ul li ul 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-size: border -box؛) # menu1 ul li ul li: first-child> a (border-top: 0px؛) # menu1 ul li ul li a: hover، # menu1 ul li ul li: hover> a (background: # FDDC96 ؛ اللون: # 6572BC ؛) # menu1 ul li ul li ul (أعلى: 0px ؛ يسار: 100٪ ؛ عرض: لا شيء ؛ الخلفية: # fddc96 ؛ z-index: 15 ؛) # menu1 ul li ul li ul li (عرض : block؛ float: none؛ width: 100٪؛) # menu1 ul li ul li ul a (color: # F38A01؛ border-top: 1px solid #ffffff؛)
هذا ما ستبدو عليه القائمة: الشيء الوحيد هو أن الموقع يجب أن يحتوي على مساحة كافية ، لأن العنصر المتطرف على اليمين ليس له مكان لقائمة منسدلة. يمكن حل هذه المشكلة من خلال: الطفل التاسع ، لكنني لم أكلف نفسي عناء تسييج الحديقة.
شاهد عرضًا توضيحيًا لقائمة منسدلة أفقية ذات طبقات:
كما لاحظت: اللوحة السفلية بعرض كامل أيضًا. هذه هي الطريقة التي يتم بها المتسربين في عدة كتل.
هذا كل شيء بالنسبة لي ، وآمل أن يناسبك أحد الأمثلة على الأقل. شكرا للاهتمام.
سوف يفيدهم أنا وأنا 🙂.
إذا كنت قد قرأت المنشور بالكامل ، ولكنك لم تجد كيفية إنشاء القائمة المنسدلة الأفقية في css ، فاطرح سؤالاً في التعليقات أو استخدم البحث في الموقع.
كما أنصحك بزيارة الصفحة الرئيسية https: // site / vypadayushhee-menu /، يتم جمع جميع الأمثلة وأنواع القوائم المنسدلة هناك.
مرحبا. لوقت طويل لم أكتب منشورات عن أعمال html / css. في الآونة الأخيرة ، بدأت للتو في تكوين تصميم جديد وفي هذه العملية صادفت خدعة مثيرة للاهتمام تتيح لك جعل القائمة مطاطية (يمكنك إضافة عناصر جديدة إليها ولن يزداد الحجم ، ولكن سيكون هناك دائمًا 100 ٪ من الكتلة الأصل). لذلك ، سنقوم اليوم بتنفيذ القائمة المطاطية في css.
إذا كنت كسولًا جدًا لقراءة المقال ، فيمكنك مشاهدة هذا الفيديو. يشرح المؤلف أيضًا كل شيء بشكل رائع:
قائمة CSS Gum - الخطوة 1
الخطوة الأولى دائمًا هي ترميز html ، أين يمكننا الذهاب بدونها؟ لكن في حالتنا ، كل شيء سيكون بسيطًا:
المجمع بلوك القائمة

القائمة نفسها ، معروضة عبر قائمة ذات تعداد نقطي (علامة ul)

حسنًا ، عناصر القائمة موجودة بالداخل ، وبالتالي ، توجد روابط بالفعل

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

الفقرة 1

النقطة 2

النقطة 3

البند 4

البند 5

كل شيء يبدو قياسيًا ، مثل هذا:
الآن سنقوم بإحضار كل شيء إلى النموذج المطلوب ، يتولى CSS العمل.
الخطوة 2 - الأنماط الأساسية
بعد ذلك ، سأضيف التصميم إلى كتلة الغلاف. وبالتحديد ، سأقوم بتعيين الحد الأقصى للعرض على 600 بكسل (فقط لتسهيل التقاط لقطة شاشة بحيث تتلاءم القائمة) ، وكذلك توسيط الكتلة.
لف (
الخلفية: #fff ؛
أقصى عرض: 600 بكسل ؛
الهامش: 0 تلقائي ؛
}
الخطوة 3 - تنفيذ المطاط
الآن دعنا ننتقل إلى القائمة نفسها. سأقوم بإزالة العلامات منه (في علامة ul) ، وأجعل التدرج الخطي للخلفية ، والأهم من ذلك ، استخدم خاصية display: table-row لجعل حاوية القائمة تتصرف مثل صف الجدول. من المهم القيام بذلك لمزيد من التلاعب.
قائمة R (
الخلفية: التدرج الخطي (إلى اليمين ، # b0d4e3 0٪ ، # 88bacf 100٪) ؛
عرض: صف الجدول.
نمط القائمة: لا شيء ؛
}
كما ترون ، فإن الكود المعطى حل للتو كل شيء كتبت عنه. بالمناسبة ، من الملائم إنشاء تدرجات باستخدام أداة إنشاء التدرجات اللونية Ultimate CSS. سأكتب عنه في وقت لاحق.
R- القائمة لي (
محاذاة عمودية: أسفل ؛
عرض: خلية الجدول.
العرض: تلقائي ؛
محاذاة النص: مركز ؛
الارتفاع: 50 بكسل ؛
الحد الأيمن: 1 بكسل صلب # 222 ؛
}
محاذاة رأسية: أسفل - هذه الخاصية ضرورية بحيث إذا كان النص في عنصر القائمة يأخذ سطرين ، فسيتم عرضه بالضبط. عندما نقوم بعمل القائمة ، يمكنك إزالة هذه الخاصية ، والتكبير بحيث تتقلص العناصر ويلتف النص على سطرين وسترى مشكلة في العرض. إعادة الممتلكات ويجب أن يكون كل شيء على ما يرام.

display: table-cell - نظرًا لأننا قمنا بتعيين قائمة العرض نفسها كصف جدول ، فسيكون من المنطقي تعيين عناصرها ليتم عرضها كخلايا في الجدول. انه ضروري.

العرض: تلقائي - سيتم حساب العرض تلقائيًا ، اعتمادًا على طول النص في الفقرة

محاذاة النص: المركز هو فقط لتوسيط النص بالداخل

الارتفاع: 50 بكسل - اضبط الارتفاع على 50 بكسل

حسنًا ، يمين الحد هو مجرد حد على اليمين ، مثل فاصل العناصر

في حين أن القائمة تبدو قبيحة ، ولكن لا شيء ، فقد حان الوقت لوضعها في الاعتبار.

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

مرة أخرى ، سأشرح بعض الأسطر:
تزيل خاصية زخرفة النص التسطير الافتراضي للروابط

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

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

الخط هو مجرد مجموعة من إعدادات الخط. اقرأ عن خصائص css للخطوط في هذه المقالة.

الخطوة 4 (اختياري) أضف التفاعل
على سبيل المثال ، لتغيير لون عنصر القائمة عند المرور فوق الماوس. يتم ذلك ببساطة باستخدام الفئة الزائفة hover:
R- القائمة li: hover (
لون الخلفية: # 6bba70 ؛
}
اختبار المطاطية في القائمة
رائع ، القوائم جاهزة ، لكننا لم نتحقق من أهم شيء - كم هو مطاطي ، كما وعدتك. حسنًا ، سأضيف عنصرين آخرين إلى القائمة:

يظل عرض القائمة 600 بكسل. تقلصت العناصر المتبقية قليلاً لتناسب عنصرين جديدين.
سأضيف نقطة طويلة أخرى:

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

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

سيبدأ التنزيل الآن ...
لا تنسى مشاركة المواد
على الشبكات الاجتماعية مع الخاص بك
زملاء

© 2021، mkr-novo2.ru، الإنترنت. تعليم. البرامج. البرامج الثابتة. التثبيت والتكوين. الملاحون

mkr-novo2.ru
الأنترنيت الوسائط المتعددة الملاحون تعليم بواسطة مشاكل

حول المشروع
تعليق عن الموقع

جهات الاتصال

استعادة كلمة السر

أدخل بريدك الإلكتروني لاستعادة كلمة المرور الخاصة بك!