نظرة عامة رائعة على القوائم الجميلة متعددة المستويات باستخدام Codepen.

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

خطة الدرس وتخطيط القائمة لدينا

بشكل عام، دعونا أولا نقرر كيف سنقوم بإنشاء القائمة نفسها. في HTML5 بطريقة قياسيةيعتبر إنشائه في حاوية التنقل باستخدام قائمة نقطية. دعونا نفعل ذلك تماما. سنقوم بإزالة العلامات لاحقًا باستخدام CSS؛ فنحن لا نحتاج إليها على الإطلاق في القائمة.

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

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

في الواقع، ها هو كل العلامات:

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

في الواقع، أعطيت كل التنقلات طريقة التنقل للمعرفات، وجميع القوائم المتداخلة فئة النمط الثانية لفهم أنها متداخلة.

عظيم، لدينا علامة جاهزة، يمكنك إلقاء نظرة على النتيجة:

نعم، يبدو فظيعا. ولكن الآن سوف ندرج في عمل المغلقوفي غضون دقائق قليلة سيتم تحويل نظام الملاحة الخاص بنا. دعونا نعمل.

كتابة أنماط CSS

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

*( الهامش: 0؛ الحشو: 0؛)

#nav(الارتفاع: 70px;) #nav ul(نمط القائمة: لا شيء;)

الآن نحن بحاجة إلى أن نقرر فعليًا ما ستكون قائمتنا. أفقي أم عمودي؟ أقترح القيام بالنموذج الأفقي أولاً ورؤية كل شيء في مثاله. للقيام بذلك تحتاج إلى كتابة الأنماط التالية:

#nav > ul > li( float: left; width: 180px; الموضع: نسبي; )

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

لكن يمكنك بالطبع القيام بذلك بشكل مختلف وفقًا لفكرتك. يمكنك التأكد من أن جميع النقاط تقع على سطر واحد.

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

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

وفي هذه الأثناء، إليك ما حصلنا عليه حتى الآن:

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

#nav li a( العرض: كتلة؛ الخلفية: #90DA93؛ الحد: 1 بكسل صلب #060A13؛ اللون: #060A13؛ الحشو: 8 بكسل؛ محاذاة النص: المركز؛ زخرفة النص: لا شيء؛) #nav li a:hover( الخلفية: #2F718E )

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

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

يرجى ملاحظة أنه في في هذه الحالةلم نستخدم علامة >، لذا القواعد المحددةسيتم تطبيقه على كافة الروابط، بما في ذلك تلك الموجودة في الفقرات المتداخلة. إذن لدينا الآن ما يلي:

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

#nav li .ثانية (العرض: لا شيء؛ الموضع: مطلق؛ الأعلى: 100%؛)

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

الآن نرى فقط القائمة الرئيسية على صفحة الويب، وهو ما نحتاجه.

دعونا ننفذ التسرب

وما يتبقى علينا أن نفعله هو الأهم، وهو أن ندرك السقوط نفسه. لا يوجد شيء معقد في هذا الأمر، أنظر إلى هذا الكود:

#nav li:hover .sec( العرض: block; )

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

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

#nav li li (العرض: 180 بكسل؛)

هذا كل شيء، تم حل المشكلة:

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

تحويل القائمة إلى عمودية

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

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

الآن كل ما تبقى هو تغيير قواعد المحدد #nav li .Second، أي بالنسبة للقوائم المتداخلة، أي أنها تحتاج إلى وضعها بشكل مختلف قليلاً. مثله:

#nav li .ثانية (العرض: لا شيء؛ الموضع: مطلق؛ اليسار: 100%؛ الأعلى: 0؛)

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

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

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

قائمة أفقية بعدة مستويات

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

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

مثال على القائمة المركزية

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

في الصفحة التجريبية، يمكنك رؤية العديد من خيارات التصميم لقائمة مركزية أفقيًا. يمكن استخدام أي منها في مشاريعك.

ترميز HTML

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

كود CSS للقائمة المركزية

في الأسفل يكون الكود الكامل CSS المستخدم لتوسيط القائمة. سيتم تقديم شرح لمبدأ التشغيل لاحقًا في الدرس.

#centeredmenu ( تعويم: يسار؛ العرض: 100%؛ الخلفية: #fff؛ الحد السفلي: 4 بكسل صلب #000؛ الفائض: مخفي؛ الموضع: نسبي؛ ) #centeredmenu ul ( واضح: يسار؛ تعويم: يسار؛ نمط القائمة :none; 3px 10px; الخلفية:#ddd; اللون:#000; a.active، #centeredmenu ul li a.active:hover ( color:# fff; الخلفية:#000;

كيف تعمل طريقة التمركز؟

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

عنصر شعبة(الكتلة) بدون إزاحة تمتد إلى كامل العرض المتاح لها.

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

القائمة القياسية المحاذية لليسار

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

يرجى ملاحظة النقاط التالية:

• عنصر شعبة القائمة المركزية(المستطيل الأزرق) تمت إزاحته إلى اليسار، ولكن بعرض 100%، لذا يظل ممتدًا عبر الصفحة بأكملها.
• عنصر ماي(المستطيل الوردي) موجود داخل العنصر com.centermenu شعبةويتحرك إلى اليسار. وهذا يعني أنه سيتم ضغطه إلى عرض محتواه، أي إلى العرض الإجمالي لجميع الإشارات المرجعية.
• جميع عناصر li (المستطيلات الخضراء) موجودة داخل العنصر مايوالانتقال إلى اليسار. وبالتالي، يتم ضغطها حسب حجم الروابط الموجودة بها وتصطف في خط أفقي واحد.
• داخل كل رابط (مستطيلات برتقالية) يتم عرض نص الإشارة المرجعية: الإشارة المرجعية 1، الإشارة المرجعية 2، وهكذا.

تغيير موضع القائمة غير المرتبة

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

قم بتغيير موضع جميع عناصر القائمة

كل ما تبقى هو تحريك جميع العناصر لىاليسار بنسبة 50٪. يمثل هذا 50% من عرض عنصر ul (الحاوية التي تحتوي على القائمة). وبالتالي، يتم نقل الإشارات المرجعية بالضبط إلى وسط النافذة.

بعض الملاحظات المهمة

عند استخدام طريقة التوسيط هذه، هناك عدة نقاط مهمة يجب تذكرها:

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

خاتمة

الحل المقترح متوافق مع جميع المتصفحات، ولا يستخدم جافا سكريبت ويدعم يمكن تغيير حجمهنص.

في هذا البرنامج التعليمي سوف نقوم بإنشاء القائمة الأفقيةفي CSS. بالطبع، يمكنك بالفعل استخدام حلول جاهزةعلى سبيل المثال، قم بتعيين مبرمجين لـ CMS Made Simple. ومع ذلك، أنت لا تبحث عن طرق سهلة، أليس كذلك؟ :متنمر:

الخطوة 1 - ترميز HTML

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

• الرابط رقم 1
• الرابط رقم 2
• قائمة منسدلة
  • توثيق
  • رسائل
  • تسجيل
• الرابط رقم 3
• الرابط رقم 4
• الرابط رقم 5

الخطوة 2 – إنشاء أنماط CSS للقائمة الأفقية

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

القائمة، .menu ul، .menu li، .menu a ( الهامش: 0؛ الحشو: 0؛ الحدود: لا شيء؛ المخطط التفصيلي: لا شيء؛ ) .menu ( الارتفاع: 40 بكسل؛ العرض: 505 بكسل؛ الخلفية: #4c4e5a؛ الخلفية: - webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); 100% الخلفية: -ms-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); نصف القطر: 4 بكسل؛ -moz-border-radius: 4 بكسل؛ .menu li (الموضع: نسبي؛ نمط القائمة: لا شيء؛ تعويم: يسار؛ العرض: كتلة؛ الارتفاع: 40 بكسل؛

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

الخطوة 3 - ربط نمط القائمة

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

القائمة li a ( العرض: كتلة؛ الحشو: 0 14 بكسل؛ الهامش: 6 بكسل 0؛ ارتفاع الخط: 28 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #494942؛ الحد الأيمن: 1 بكسل صلب #4f5058؛ الخط- العائلة: Helvetica، sans-serif؛ حجم الخط: 13 بكسل؛ ظل النص: 1 بكسل 1 بكسل 1 بكسل rgba(0,0,0,.6); الانتقال: اللون .3s سهولة الدخول والخروج ؛ -o-الانتقال: اللون .3s سهولة الدخول والخروج ؛ اليسار: لا شيء؛

الخطوة 4 - القائمة المنسدلة

أولاً، دعونا نزيل هذا السطر من التعليمات البرمجية الذي أضفناه في الخطوة الثانية.

القائمة ul (العرض: لا شيء؛)

الآن سنقوم بتعديل نمط القائمة الفرعية. دعونا نضيف موضع القائمة الفرعية بمقدار 40 بكسل في الأعلى و0 بكسل على يسار عنصر القائمة ونضيف زوايا مدورةأقل. دعونا نضبط العتامة على الصفر ونغيرها إلى 1 عند التمرير لإنشاء تأثير التلاشي للداخل/الخارج. بالنسبة لتأثير الشريحة لأعلى/لأسفل، يجب علينا ضبط ارتفاع القائمة على 0 بكسل عندما تكون القائمة المنسدلة مخفية و36 بكسل عند التمرير فوق القائمة المنسدلة.

القائمة ul ( الموضع: مطلق؛ الأعلى: 40 بكسل؛ اليسار: 0؛ العتامة: 0؛ الخلفية: #2f3035؛ -webkit-border-radius: 0 0 4px 4px؛ -moz-border-radius: 0 0 4px 4px؛ border- نصف القطر: 0 0 4px 4px؛ -webkit-transition: العتامة .3s سهولة .1s؛ -moz-transition: العتامة .3s سهولة .1s؛ -ms-transition: العتامة .3s سهولة .1s؛ 1s; ) .menu li:hover > ul ( العتامة: 1; ) .menu ul li ( الارتفاع: 0; الفائض: مخفي; الحشو: 0; -webkit-transition: الارتفاع .3s سهولة .1s; -moz-transition: الارتفاع .3s سهولة .1s؛ -o-transition: الارتفاع .3s سهولة .1s؛

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

القائمة ul li a (العرض: 100 بكسل؛ الحشو: 4 بكسل 0 4 بكسل 40 بكسل؛ الهامش: 0؛ الحدود: لا شيء؛ الحد السفلي: 1 بكسل صلب #464649;) .القائمة ul li:الطفل الأخير أ (الحدود: لا شيء؛)

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

القائمة a.d ( الخلفية: url(docs.png) بدون تكرار 6 بكسل في المركز؛ ) .menu a.m ( الخلفية: url(bubble.png) بدون تكرار 6 بكسل في المركز؛ ) .menu as ( الخلفية: url(arrow.png) no -كرر مركز 6 بكسل)

خاتمة

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

(التنزيلات: 395)

مهمة

عرض قائمة ذات تعداد نقطي أفقيًا بدون تعداد نقطي.

حل

علامة رصاصة

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

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

  أو

  إذن هذه هي العلامة

• هو أيضًا عنصر كتلة.

  لوضع علامة

• لم تتصرف مثل عنصر كتلة، فمن الممكن مع مساعدة في CSSاجعلها صغيرة.

  مسؤول عن كيفية عرض العنصر في المستند خاصية CSSعرض. دعونا نفكر في ثلاثة من معانيها (على الرغم من وجود المزيد):

  • كتلة - يتم عرض العنصر كعنصر كتلة.
  • مضمّن - يتم عرض العنصر على أنه مضمّن.
  • inline-block - عنصر خط الكتلة، اقرأ المزيد عن هذا النوع من العناصر أدناه، وسوف نستخدمه.

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

  • الفقرة 1
  • النقطة 2
  • النقطة 3

  لقد نجح هذا الأسلوب وحصلنا على ترتيب أفقي لعناصر القائمة:

  الشكل 1. المثال رقم 1 في العمل.

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

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

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

  • الفقرة 1
  • النقطة 2
  • النقطة 3

  يعمل هذا الرمز وتكون التغييرات مرئية:

  
  الشكل 2. المثال رقم 2 عمليًا.

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

  • يحرر
    • يلغي
    • يقطع
    • ينسخ
    • إدراج
  • محرف
    • عريض
    • مائل
    • تحته خط
  • مقاس
    • صغير
    • طبيعي
    • متوسط
    • كبير

  وهذه هي نتيجة هذا الكود:

  
  الشكل 3. المثال رقم 3 في العمل.

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

  ولكن في الواقع، لماذا يحدث هذا؟

  تحتوي الكتل الخاصة بنا على خاصية عرض تم تعيينها على inline-block . وهذا يعني أن لديهم صفات عناصر الكتلة (القدرة على تحديد العرض والارتفاع) والعناصر المضمنة. ما نراه هو جودة العناصر المضمنة.

  دعونا نلقي نظرة على سلسلة تحتوي على أحرف "A" بأحجام مختلفة:

  أ أ أ أ أ أ

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

  لمحاذاة النص عموديًا، استخدم خاصية المحاذاة العمودية. في مثالنا رقم 3، نحتاج إلى استخدام القيمة top ، والتي ستقوم بمحاذاة الحد العلوي للعنصر مع الجزء العلوي من العنصر نفسه. عنصر عاليخطوط.

  الآن دعونا نطبقها على سلسلة تحتوي على أحرف "A" بأحجام مختلفة:

  أ أ أ أ أ أ

  يبدو أن الحروف "تقفز" قليلاً. لقد قمت بتعيين حدود CSS على أطول حرف لإظهار أنه لا توجد قفزات في الواقع، فقط مساحة فارغة بين الحد العلوي (حيث تحدث المحاذاة) والنقطة العلوية للحرف "A".

  يجب تطبيق خاصية المحاذاة العمودية على كل منها عنصر مضمن، فهو غير موروث. يمكنك قراءة المزيد عن هذه الخاصية: Vertical-align .

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

  الطريقة الثانية

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

  إليك مثال باستخدام هذا الكود:

  • الفقرة 1
  • النقطة 2
  • النقطة 3

  وهنا نتيجة الكود:

  الشكل 4. مثال العمل.

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

  • الفقرة 1
  • النقطة 2
  • النقطة 3
  • الفقرة 1
  • النقطة 2
  • النقطة 3

  وهنا نتيجة الكود:

  الشكل 5. مثال العمل.

  في هذه الأمثلة قائمة الحاويات

  لها حدود حمراء بسمك 1 بكسل. لكن أول القائمة، الذي يستخدم خاصية العرض، يتضمن عناصر القائمة. لكن عناصر القائمة التي تم إنشاؤها باستخدام الخاصية float تقع خارج الحاوية الخاصة بها.

  للوهلة الأولى، كل شيء يعمل. ولكن دعونا نتبادل قوائمنا. لنضع القائمة مع فئة القائمة 1 في الكود قبل القائمة مع فئة القائمة 2 (الآن أصبحت أقل).

  وهذا ما نحصل عليه نتيجة لذلك:

  الشكل 6. مثال العمل.

  أغراض القائمة السفليةيلتف أيضًا حول الجزء العلوي من القائمة، لأنه لم يتم إلغاء تأثير الخاصية float وينطبق على جميع العناصر اللاحقة.

  كيفية حل هذه المشكلة؟

  للقيام بذلك، تحتاج إلى استخدام الخاصية Clear، فهي تلغي التفاف العنصر حول عنصر آخر إذا كان يحتوي على الخاصية float.

  فيما يلي مثال معدل باستخدام الخاصية الواضحة:

  • الفقرة 1
  • النقطة 2
  • النقطة 3
  • الفقرة 1
  • النقطة 2
  • النقطة 3

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

  • لا تزال موجودة خارج الحاوية
    .
    الشكل 7. مثال العمل.

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

    يتم ذلك باستخدام عنصر زائف. إليك الكود:

    • الفقرة 1
    • النقطة 2
    • النقطة 3
    • الفقرة 1
    • النقطة 2
    • النقطة 3

    الآن أصبح لدينا كود فعال 100%.

    الشكل 8. مثال على التشغيل.

    تُستخدم هذه التقنية مع الخاصية float عادةً عند تصميم مواقع الويب لمحاذاة الأعمدة التي تم إنشاؤها بواسطة العلامات

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

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

    مهمة

    قم بإنشاء قائمة أفقية، تحتوي عناصرها على منحدر تعسفي (الشكل 1).

    أرز. 1. عرض القائمة مع العناصر المائلة

    حل

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

    تدعم المتصفحات خاصية التحويل بشكل رئيسي مع البادئات الخاصة بها، لذا لتحقيق عالمية الأنماط، يجب عليك تكرارها عدة مرات بنفس القيمة، وإضافة -moz- لمتصفح Firefox، و -webkit- لمتصفح Safari وChrome، و -o- لـ Opera و -ms - للمتصفح متصفح الانترنتكما هو موضح في المثال 1.

    مثال 1: إمالة عنصر القائمة

    HTML5 CSS3 IE Cr Op Sa Fx

    • مهرج
    • بازوزو
    • بالباتين
    • طبيب الموت

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

    تستخدم متصفحات Chrome وSafari وFirefox خاصية التحويل للعناصر المحظورة أو المضمنة، لذلك يتم تعيين خاصية العرض الخاصة بالروابط على الحظر.