كيفية إنشاء قائمة منسدلة في CSS؟ كيفية وضع عناصر القائمة أفقيا.

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

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

لنبدأ في وضع قائمتنا الأفقية!

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

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

إذن ماذا لدينا فينا؟ في هذه المرحلة؟ لدينا صفحة أتش تي أم ألمع العلامات القياسية:

القائمة الأفقية

ولدينا ملف نمط متصل بهذه الصفحة (بالنسبة لي هو style.css)، بالمحتوى التالي:

ستكون الخطوة التالية إنشاء أتش تي أم ألترميز لقائمتنا.

إنشاء علامات للقائمة

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

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

سيتم إدراك جميع العلامات بعد ذلك (والعلامات الأخرى المتعلقة بـ HTML5) بشكل طبيعي بواسطة المتصفحات الأقدم.

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

بيت
معلومات عنا
مَلَفّ
مدونة
جهات الاتصال

لذا، يبدو أننا انتهينا من الترميز، وحان الوقت لبدء كتابة الأنماط، نظرًا لأن قائمتنا الآن لا تبدو جيدة جدًا، بعبارة ملطفة:

أساليب الكتابة لقائمتنا الأفقية

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

Ul (نمط القائمة: لا شيء؛)

بعد ذلك سوف تبدو القائمة لدينا كما يلي:

لا يعجبني حقًا بقاء قائمتنا على حواف المتصفح، فلنصلح ذلك:

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

الخطوة التالية هي أخيرًا جعل قائمتنا أفقية؛ ويتم ذلك عن طريق ضبط العناصر

تعويم: اليسار

القائمة لي (تعويم: يسار؛)

أصبحت القائمة بأكملها الآن أفقية.

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

القائمة li a(display:block;/* جعل الرابط عنصر كتلة*/ الحشو:12px 20px;/* تعيين الحشو */ زخرفة النص: لا شيء; /* إزالة تسطير أسفل السطر*/ color:#fff;/* جعل لون الرابط أبيض */ الخلفية:#444;/* جعل لون الخلفية غامقًا */ الخط:14px Verdana, sans-serif;/* ضبط حجم الخط واسمه */ )

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

دعونا نرى ما حصلنا عليه، قم بتحديث صفحة المتصفح وها أنت ذا!:

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

لنبدأ بالمحددات:

القائمة لي (الحدود اليسرى: 1 بكسل الصلبة #666؛ ) .القائمة لي: الطفل الأول (الحدود اليسرى: لا شيء؛)

ماذا فعلنا هنا؟ نعم، كل شيء بسيط للغاية، حددنا نقاطنا (

) الحد الأيسر بحجم 1 بكسل ولون #666;. أما بالنسبة لمحدد .menu li:first-child، فإننا هنا نستخدم فئة زائفة خاصة تسمح لنا بتحديد العنصر الفرعي الأول في القائمة. أوصي أيضًا بقراءة المزيد عن الفصول الزائفة على الإنترنت، وسوف تتعلم الكثير من الأشياء المفيدة.

دعونا نرى ما حصلنا عليه مرة أخرى:

في رأيي، إنه أفضل بكثير مع المحددات.

القائمة:تحويم(الخلفية:#888;)

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

أعتقد أنه رائع :) أتمنى أن ينتهي بك الأمر بنفس القائمة التي لدي.

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

مهمة

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

حل

علامة رصاصة

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

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

لوضع علامة

لم يتصرف كعنصر كتلة، يمكنك استخدام CSS لجعله مضمّنًا.

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

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

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

القائمة أفقيًا ul.menu-top > li ( العرض: مضمن؛ /* ترتيب العناصر أفقيًا */ نمط القائمة: لا شيء؛ /* إزالة علامات القائمة */ الحشو: 5 بكسل؛ /* الهوامش حول النص */ الحدود: صلب 1 بكسل # 000000; لون الخلفية: #fffff0;

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

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

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

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

ul.menu-top > li ( العرض: مضمن؛ /* ترتيب العناصر أفقيًا */ نمط القائمة: لا شيء; /* إزالة علامات القائمة */ الحشو: 5px; /* الهوامش حول النص */ border: Solid 1px #000000 ; لون الخلفية: #ffff0 العرض: 150 بكسل؛

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

القائمة أفقيًا ul.menu-top > li ( العرض: كتلة مضمّنة؛ /* ترتيب العناصر أفقيًا */ نمط القائمة: لا شيء؛ /* إزالة علامات القائمة */ الحشو: 5 بكسل؛ /* الهوامش حول النص */ الحدود: صلبة 1px #000000؛ لون الخلفية: #fffff0؛

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

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

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

قائمة متداخلة. ul.menu > li ( العرض: inline-block; /* ترتيب العناصر أفقيًا */ نمط القائمة: لا شيء; /* إزالة علامات القائمة */ الحشو: 5px; /* الهوامش حول النص */ لون الخلفية: #ffffff0 ; الحدود: 1 بكسل صلب #000000؛

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

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

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

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

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

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

أ أ أ أ أ أ

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

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

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

أ أ أ أ أ أ

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

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

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

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

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

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

القائمة أفقيًا ul.menu-top > li ( float: left; /* ضع القائمة أفقيًا */ نمط القائمة: لا شيء; /* إزالة علامات القائمة */ الحشو: 5px; هامش: 2px; الحدود: 1px Solid #000000; لون الخلفية: #fffff0؛

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

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

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

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

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

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

أول القائمة

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

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

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

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

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

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

القائمة أفقيًا ul (الحدود: 1 بكسل أحمر خالص؛ ) ul.menu-1 > li, ul.menu-2 > li (نمط القائمة: لا شيء; /* إزالة علامات القائمة */ الحشو: 5 بكسل; الهامش: 2 بكسل; الحدود: 1px Solid #000000; لون الخلفية: #fffff0 ) /* ضع القوائم أفقيًا */ ul.menu-1 > li ( float: left; ) ul.menu-2 > li ( العرض: inline-block; ) / * إلغاء الالتفاف */ .menu-2( واضح: كلاهما; )

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

لا تزال موجودة خارج الحاوية

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

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

القائمة أفقيًا ul (الحدود: 1 بكسل أحمر خالص؛ ) ul.menu-1 > li, ul.menu-2 > li (نمط القائمة: لا شيء; /* إزالة علامات القائمة */ الحشو: 5 بكسل; الهامش: 2 بكسل; الحدود: 1px Solid #000000; لون الخلفية: #fffff0 ) /* ضع القوائم أفقيًا */ ul.menu-1 > li ( float: left; ) /* إنشاء عنصر زائف للمسح: كلاهما; */ ul.menu-1::after( content: "."; /* المحتوى مطلوب */ العرض: كتلة; /* الكتلة مطلوبة */ واضح: كلاهما; الارتفاع: 0; /* حتى لا تمد الحاوية */ ) ul.menu-2 > li ( العرض: كتلة مضمنة؛ )

الآن لدينا كود يعمل بنسبة 100٪.

تُستخدم هذه التقنية مع الخاصية 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 (العرض: كتلة مضمّنة؛ /* خط- عناصر الكتلة*/ الخلفية: #CA181A؛ /* لون الخلفية */ الهامش الأيمن: 3px; /* المسافة بين عناصر القائمة */ -webkit-transform: skewX(-30deg); /* بالنسبة إلى Safari وChrome */ -moz-transform: skewX(-30deg); /* لمتصفح فايرفوكس */ -o-transform: skewX(-30deg); /* للأوبرا */ -ms-transform: skewX(-30deg); /* بالنسبة إلى IE */ تحويل: skewX(-30deg); /* CSS3 */ ) a ( اللون: #fff; /* لون الرابط */ العرض: كتلة; /* عنصر الكتلة */ الحشو: 5 بكسل 15 بكسل; /* الهوامش حول النص */ زخرفة النص: لا شيء; /* إزالة الشرطة السفلية */ -webkit-transform: skewX(30deg); /* لمتصفح Safari وChrome */ -moz-transform: skewX(30deg); -ms-transform: skewX(30deg); /* بالنسبة إلى IE */ تحويل: skewX(30deg); /* CSS3 */ ) li:hover ( الخلفية: #333; /* لون الخلفية عند التمرير * / )

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

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

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

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

لذلك، دعونا نبدأ. لنقم بإنشاء قائمة بأسماء قائمتنا. لتكن أسماء العناصر: "الصفحة الرئيسية"، "الأخبار"، "المنتجات"، "الخدمات"، "الشركاء"، "جهات الاتصال". نخلق ملف جديديسمى Menu.html، على سبيل المثال، باستخدام Dreamweawer أو باستخدام المفكرة العادية. في ذلك، بين علامات الجسم نضع قائمتنا. هذا امر طبيعي قائمة نقطية ul مع عناصر لي. بالطبع، نجعل كل عنصر في القائمة رابطًا، حيث نقوم بإدخال علامة التجزئة # بدلاً من عنوان URL. استخدام برنامج فوتوشوبقم بإنشاء صورة بحجم 3x30 بكسل ملء الانحداركما هو موضح في الصورة أدناه. سيتم حفظ الملف في تنسيق GIF. دعنا نسميها bg.gif. هذا الرسمستكون بمثابة صورة خلفية لقائمتنا.

فيما يلي محتويات ملف Menu.html:

قائمة أفقية بسيطة عبر المتصفح

بيت
أخبار
منتجات
خدمات
الشركاء
جهات الاتصال

الآن لنقم بإنشاء ملف نمط يسمى main.css بشكل منفصل. وتظهر قائمتها بالكامل أدناه.

Ul ( هامش:0; /*حشوة صفر*/ الحشو:0; /*حشوة صفر*/ float:left; /*محاذاة القائمة إلى اليسار*/ width:auto;/*ضبط عرض تلقائي بناءً على نوع القائمة ومحتوياتها */ صورة الخلفية: url(bg.gif) /*set الصورة الخلفية*/ تكرار الخلفية:تكرار-x; /*كرر صورتنا أفقيًا*/ list-style:none; /*إزالة علامات القائمة*/ لون الخلفية:#4778c3; /*ضبط لون الخلفية للصورة*/ حجم الخط:13px; /*ضبط حجم الخط*/ Font-family:Arial, Helvetica, sans-serif; /*ضبط الخط*/ ) ul li ( float:left; /*محاذاة عناصر القائمة إلى اليسار*/ ) ul a (display:block; /*تمثيل روابط القائمة كعناصر كتلة*/ width:100px; /* ضبط حجم الكتلة*/ height:30px /*وارتفاع الكتلة*/ text-align:center /*centered text*/ line-height: 2.1em; تباعد الأسطر*/ زخرفة النص: لا شيء؛ /*إزالة التسطير من الروابط*/ color:#fff; /*لون نص الرابط - أبيض*/ border-right:#fff Solid 1px; /*حدود الجانب الأيمنكتلة (خط أبيض بحجم 1 بكسل)*/ ) ul a:hover ( color:#ccc; /*يتغير لون الرابط عند التمرير فوقه*/ )

أعتقد أنه لا ينبغي أن يكون هناك أي أسئلة حول محتويات ملف main.css؛ لقد كتبت النصائح في التعليقات بتفاصيل كافية وواضحة، لذلك لن أكرر نفسي. لا تنس توصيله بصفحة Menu.html الخاصة بنا باستخدام

لخص. نتيجة لذلك، حصلنا على قائمة أفقية عبر المتصفحات بالكامل، والتي تبدو متشابهة ليس فقط في جميع المتصفحات الحديثة، ولكن أيضًا في حالات نادرة مثل IE 5.5 و IE 6.0. يتم تقديم جميع عناصر القائمة كعناصر كتلة ولها نفس الأبعاد وهي 100 بكسل عرض و30 بكسل ارتفاع. يتم استخدام تصميم عنصر الكتلة باستخدام الحد الأيمن كفاصل لعناصر القائمة. أبيضسمك 1 بكسل. هذه هي أبسط طريقة تقريبًا لتنفيذ القائمة الأفقية. بالطبع، إذا رغبت في ذلك، يمكنك تعديله، وجعله أكثر جمالا وعمليا باستخدام الخيال وخصائص CSS والمزيد العناصر الرسومية. حسنًا، تبدو قائمتنا الأفقية كما يلي:

إيجابيات هذا الحل:
سهل الفعل
رمز بسيط
لا توجد جداول أو جافا سكريبت
التوافق عبر المتصفحات: تبدو القائمة متشابهة في جميع المتصفحات
يتم استخدام رسم واحد فقط
الحد الأدنى من التعليمات البرمجية في صفحة Menu.html
الحد الأدنى من التعليمات البرمجية لتنفيذ الأنماط في main.css

يمكن تنزيل الملفات المستخدمة في هذا المثال في الأرشيف

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

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

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

كما جاء في المنشورات السابقة، عنصر الزوج

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

ملاحة

التنقل في الموقع

بيت
أخبار الأسبوع
التطورات التكنولوجية
محادثة

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

بدلا من واحد< ul>يوصف< menu>. ومع ذلك، تظهر اختلافات كبيرة عند الحكم عليها من جانب العمل. لذلك، المثال الثاني يسرع العمل برامج البحثوالروبوتات في . عند تحليل بنية الموقع، يفهمون على الفور أن هذا الجزء من التعليمات البرمجية هو المسؤول عن خريطة الموقع.

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

لنقم بإنشاء نموذج تنقل أفقي

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

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

للتحويل نستخدم خاصية CSS تسمى التحويل. لتحديد التحويل، يتم استخدام وظيفة skewX المضمنة، والتي تحدد زاوية الانحراف بالدرجات.

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

-آنسة- ( متصفح الانترنت)
-o- (الأوبرا)
-webkit- (كروم، سفاري)
-موز- (فايرفوكس)

الآن دعونا نطبق المعرفة المكتسبة لكتابة مثال.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

لوحة أفقية

بيت

عن الشركة

منتجات

جهات الاتصال

اللوحة الأفقية li ( العرض: كتلة مضمنة؛ الهامش الأيمن: 6 بكسل؛ الخلفية: #FF8C00؛ التحويل: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) -ms-transform: skewX(-45deg); -moz-transform: skewX(-40deg); لى: تحوم (الخلفية: #1C1C1C؛)

بيت
عن الشركة
منتجات
جهات الاتصال

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

لهذا استخدمت آخر خاصية المغلقنصف قطر الحدود .

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

اللوحة العمودية li (العرض: كتلة؛ الهامش: 13 بكسل؛ الحشو: 13 بكسل؛ الخلفية: #FF8C00؛ العرض: 20%؛ محاذاة النص: المركز؛ حجم الخط: 20 بكسل؛ نصف قطر الحدود: 10 بكسل؛) أ ( اللون: # fff; ) لى: تحوم ( الخلفية: #1C1C1C; )

بيت
عن الشركة
منتجات
جهات الاتصال

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

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

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

لقد أرفقت أدناه رمز برنامج صغير ينفذ هذا النهج.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

نص القائمة المنسدلة ( المساحة المتروكة على اليسار: 30%؛ حجم الخط: 18 بكسل؛ ) .m-القائمة ( الهامش: 0؛ المساحة المتروكة: 9 بكسل؛ العرض: 50%؛ محاذاة النص: المركز؛ الحد: 3 بكسل صلب #000؛ الخلفية : #FF8C00; ) .m-menu > li ( الموضع: نسبي; العرض: كتلة مضمنة; ) .m-menu a ( العرض: كتلة; الهامش الأيسر: -2px; الحشو: 13px; اللون: #fff; الحدود - اليسار: 3 بكسل صلب #fff؛ ) .m-menu a:hover ( الخلفية: #1C1C1C؛ ) .m-menu .s-menu ( اليسار: 10px؛ الموضع: مطلق؛ العرض: لا شيء؛ العرض: 155 بكسل؛ الهامش: 0؛

في هذا المثال، قمت بتقسيم وحدات القائمة إلى فئتين:

القائمة م
القائمة

الفئة الأولى هي المسؤولة عن القائمة الرئيسية، والقائمة s هي المسؤولة عن القائمة الفرعية.

في الكود يمكنك رؤية تقنية مثل .m-menu > li:hover أو .m-menu > li.

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

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

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

كما ترون، فإن تنفيذ هذه التقنية بسيط للغاية.

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

مع أطيب التحيات، رومان تشيشوف

اقرأ: 1010 مرات