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

18.09.2023 -

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

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

أدوات لإنشاء شريط التنقل

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

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

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

ملاحة

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

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

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

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

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

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

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

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

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

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

-ms- (إنترنت إكسبلورر)
-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؛)

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

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

للقيام بذلك، استخدمت خاصية أخرى لخاصية css border-radius.

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

اللوحة العمودية 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؛

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

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

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

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

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

HTML5 CSS3 IE Cr Op Sa Fx

القائمة li (العرض: كتلة مضمنة؛ /* عناصر الكتلة المضمنة */ الخلفية: #CA181A؛ /* لون الخلفية */ الهامش الأيمن: 3 بكسل؛ /* المسافة بين عناصر القائمة */ -webkit-transform: skewX(- 30deg ); /* بالنسبة إلى Safari وChrome */ -moz-transform: skewX(-30deg); /* بالنسبة إلى Firefox */ -o-transform: skewX(-30deg); (-30deg); /* بالنسبة إلى IE */ تحويل: skewX(-30deg); /* CSS3 */ ) a ( color: #fff; /* لون الرابط */ العرض: block; /* عنصر الكتلة */ الحشو : 5px 15px; /* الهوامش حول النص */ زخرفة النص: لا شيء; /* إزالة التسطير */ -webkit-transform: skewX(30deg); /* لمتصفح Firefox */ -o-transform: skewX(30deg); /* لـ Opera */ -ms-transform: skewX(30deg); /* لـ IE */ تحويل: skewX(30deg); (الخلفية: #333; /* لون الخلفية عند التمرير */ )

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

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

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

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

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

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

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

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

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

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

الخطوة التالية هي إنشاء ترميز HTML لقائمتنا.

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

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

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

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

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

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

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

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

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

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

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

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

تعويم: اليسار
القائمة لي (تعويم: يسار؛)
أصبحت القائمة بأكملها الآن أفقية.

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

القائمة li a(display:block;/* جعل الرابط عنصر كتلة*/ padding:12px 20px;/* تعيين الحشو */ text-decoration: none; /* إزالة التسطير */ color:#fff;/* تعيين لون الروابط باللون الأبيض */ الخلفية:#444;/* جعل لون الخلفية داكنًا */ الخط:14px Verdana, sans-serif;/* ضبط حجم الخط واسمه */ )
إحدى أهم القواعد هنا هي العرض:كتلة؛. الحقيقة هي أن الروابط افتراضيًا هي عناصر مضمنة، ويتم تطبيق المسافات البادئة بشكل مختلف على العناصر المضمنة في متصفحات مختلفة، لذلك يُنصح بجعل الرابط عنصر كتلة ثم تطبيق الخصائص المرتبطة بالمسافات البادئة الخارجية أو الداخلية عليه فقط. الآن لا أريد أن أثقل كاهلك بمعلومات غير ضرورية؛ وباستخدام أمثلة حقيقية، ستفهم سبب التركيز هنا.

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

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

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

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

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

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

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

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

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

قد تبدو القائمة مختلفة. يمكن أن تكون أفقية

رَأسِيّ

متعدد المستويات

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

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

إذا كنت في شك، دعونا نتوجه إلى السلطات للحصول على المساعدة. W3C حول القوائم:
قد تحتوي القوائم على:
- قائمة غير مرتبة
- قائمة مرتبة
- ملاحة
- تعريفات
القائمة مع الصور
- كرايسلر
- أودي
- بوجاتي
التنقل ( نمط القائمة: لا شيء؛ / * إخفاء العلامات * / الهامش: 30 بكسل؛ ) .navigation li ( تعويم: يسار؛ / * ترتيب عناصر القائمة في صف واحد * / هامش اليمين: 15 بكسل؛ / * مسافة بادئة بحيث تكون عناصر القائمة لم يتم الدمج */ ) .navigation li a ( العرض: كتلة؛ محاذاة النص: المركز؛ الحشو العلوي: 100 بكسل؛ /* المساحة الداخلية بحيث يكون النص خارج الخلفية */ اللون: #ff0000; موقف الخلفية: أعلى الوسط؛ / * محاذاة الخلفية لأعلى وفي المنتصف */ تكرار الخلفية: عرض غير متكرر؛ /* تحديد الأبعاد بحيث يتم عرض الصور بالكامل */ الارتفاع: 50px) * html .navigation li a ( /* hack for IE6، الذي يتعامل مع نموذج الصندوق بشكل مختلف */ height: 150px; ) .navigation .chrysler a ( صورة الخلفية: url(path-to/menu-chrysler.jpg); ) .navigation .audi أ (صورة الخلفية: url(path-to /menu-audi.jpg);

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

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

مدخلات حديثة