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

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

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

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

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

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

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

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

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

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

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

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

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

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

أعتقد أنها رائعة 🙂، وآمل أن تكون لديك نفس القائمة الموجودة في قائمتي.

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

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

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

  نص القائمة المنسدلة ( المساحة المتروكة على اليسار: 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 ؛ الحشو: 0 ؛ نمط القائمة: لا شيء ؛ الخلفية: # FF8C00 ؛

  • بيت
  • منتجات
    • الحلوى
    • كيك
    • بسكويت
  • جهات الاتصال

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

  يعد البرنامج التعليمي الأول لقائمة CSS3 المنسدلة هو الأحدث في المجموعة (من أبريل 2016). إيجابيات الحل: في هذه القائمة المنسدلة الأفقية للموقع، تحتوي العناصر الفرعية على أيقونات، كما أن التنفيذ وكود CSS نفسه سهل الفهم والتنفيذ.

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

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

  لوحة القيادة الخاصة بي الإعجابات الآراء وثائق رسائل خروج التحميلات أشرطة فيديو وثائق

  • لوحة القيادة الخاصة بي
  • الإعجابات
  • الآراء
    • وثائق
    • رسائل
    • خروج
  • التحميلات
  • أشرطة فيديو
  • وثائق

  الخطوة 2 - عرض القائمة

  نقوم بإزالة المسافات البادئة غير الضرورية في CSS لعناصر القائمة المنسدلة الأفقية للموقع. في نفس المرحلة، سنقوم بتعيين عرض وارتفاع ثابتين لعناصر القائمة، ونضيف أيضًا زوايا مستديرة.

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

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

  الخطوة 3 - الربط

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

  .menu li a ( العرض: كتلة؛ الحشو: 0 14 بكسل؛ الهامش: 6 بكسل 0؛ ارتفاع الخط: 28 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #393942؛ الحد الأيمن: 1 بكسل صلب #4f5058 ؛ الخط -العائلة: Helvetica، sans-serif؛ حجم الخط: غامق؛ اللون: #f3f3f3؛ moz-transition: color .2s easy-in-out؛ -o-transition: color .2s easy-in-out؛ (الحدود على اليسار: لا شيء ; ) .menu li: الطفل الأخير a (الحدود على اليمين : لا شيء ; ) .menu li : تحوم > a ( اللون : #8fde62 ; )

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

  الخطوة 4 - القائمة الفرعية

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

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

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

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

  .قائمة ul li a (العرض: 100 بكسل؛ الحشو: 4 بكسل 0 4 بكسل 40 بكسل؛ الهامش: 0؛ الحدود: لا شيء؛ الحد السفلي: 1 بكسل صلب #353539؛) .قائمة ul li: الطفل الأخير أ (الحدود: لا شيء؛) .القائمة أ. المستندات ( الخلفية : url (../img/docs.png ) بدون تكرار 6 بكسل مركز ; ) . القائمة أ. الرسائل ( الخلفية : url (../img/bubble.png ) بدون تكرار 6 بكسل مركز . ) .menu a.signout ( الخلفية : url (../img/arrow.png ) مركز بدون تكرار 6 بكسل ؛ )

  القائمة ul li a (العرض: 100 بكسل؛ الحشو: 4 بكسل 0 4 بكسل 40 بكسل؛ الهامش: 0؛ الحدود: لا شيء؛ الحد السفلي: 1 بكسل صلب #353539؛) . القائمة ul li: Last-child a (الحدود: لا شيء؛ ) . القائمة أ. المستندات ( الخلفية: url(../img/docs.png) مركز 6 بكسل بدون تكرار؛ ) . القائمة أ. الرسائل ( الخلفية: url(../img/bubble.png) مركز 6 بكسل بدون تكرار؛ ) .menu a.signout ( الخلفية: url(../img/arrow.png) بدون تكرار 6 بكسل مركزي؛ )

  أنا شخصياً أحب سهولة التنفيذ واستخدام الرموز. هذا هو الكود النهائي من Codepen:

  

  يشبه خيار Josh Riser بصريًا القائمة المنسدلة السابقة لـ HTML وCSS. لا يحتوي الكود على محدد فرعي ">" (مفيد في التصميمات متعددة المستويات)، لكن المؤلف يستفيد جيدًا من تأثيرات CSS3 (الانتقال، وظل الصندوق، وظل النص) للحصول على نتيجة أكثر جمالًا. لا يصف الرابط الموجود في المصدر عملية إنشاء قائمة منسدلة أفقية، لذا سأقدم الكود النهائي على الفور:

  

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

  كود HTML

  للتنقل، كما هو الحال دائمًا، يتم استخدام قائمة غير مرتبة (مع فئة التنقل). عناصر القائمة العادية هي عناصر قائمة (li) وتحتوي على روابط (a href) بدون أي فئات أو معرفات. الاستثناء هو 3 عناصر متخصصة في هذه القائمة المنسدلة الأفقية بالمعرفات التالية:

  • الإعدادات - رابط الصورة؛
  • البحث — كتلة تحتوي على بحث وزر مطابق؛
  • الخيارات - تحتوي على قائمة فرعية (يتم تنفيذها من خلال قائمة ذات فئة التنقل الفرعي).

  سترى أيضًا في الكود برنامجًا نصيًا خاليًا من البادئات لاستخدام خصائص CSS بدون بادئات. يبدو HTML النهائي للقائمة المنسدلة كما يلي:

  طلب سبورة خيارات إعدادات طلب سبورة خيارات

  • 
  • طلب
  • سبورة
  • خيارات
    • إعدادات
    • طلب
    • سبورة
    • خيارات

  القائمة CSS

  1. الأنماط الأساسية وعناصر القائمة

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

  @import url (http: //fonts.googleapis.com/css?family= مونتسيرات) ؛ * (الهامش: 0؛ الحشو: 0؛) .nav (الخلفية: #232323؛ الارتفاع: 60 بكسل؛ العرض: كتلة مضمنة؛) .nav li (تعويم: يسار؛ نوع نمط القائمة: لا شيء؛ الموضع: نسبي؛) )

  @import url(http://fonts.googleapis.com/css?family=Montserrat); * ( الهامش: 0؛ الحشو: 0؛ ) .nav ( الخلفية: #232323؛ الارتفاع: 60 بكسل؛ العرض: كتلة مضمنة؛ ) .nav li ( تعويم: يسار؛ نوع نمط القائمة: لا شيء؛ الموضع: نسبي؛ )

  2. تنسيق الروابط

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

  .nav li a (حجم الخط: 16 بكسل؛ اللون: أبيض؛ العرض: كتلة؛ ارتفاع الخط: 60 بكسل؛ الحشو: 0 26 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #2e2e2e؛ عائلة الخط: مونتسيرات ، sans-serif ؛ ظل النص: 0 0 1 بكسل rgba ( 255 ، 255 ، 255 ، 0.5 ) .nav li a: hover (لون الخلفية : #2e2e2e ;) #settings a ( الحشو : 18px ; الارتفاع : 24px ; حجم الخط: 10 بكسل؛ ارتفاع الخط: 24 بكسل؛

  Nav li a ( حجم الخط: 16 بكسل؛ اللون: أبيض؛ العرض: كتلة؛ ارتفاع الخط: 60 بكسل؛ الحشو: 0 26 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #2e2e2e؛ عائلة الخط: مونتسيرات، Sans-serif؛ text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); -الحجم: 10 بكسل؛ ارتفاع الخط: 24 بكسل)

  3. كتلة البحث

  هذا العنصر له عرض ثابت ويتكون من عدة أجزاء - حقل إدخال (#search_text) بخلفية خضراء وزر بحث (#search_button). في بعض المتصفحات، قد يكون لون الخلفية رماديًا.

  #search (العرض: 357 بكسل ؛ الهامش: 4 بكسل ؛) #search_text (العرض: 297 بكسل ؛ الحشو: 15 بكسل 0 15 بكسل 20 بكسل ؛ حجم الخط: 16 بكسل ؛ عائلة الخط: Montserrat، sans-serif ؛ الحدود: 0 لا شيء ؛ الارتفاع: 52 بكسل الهامش الأيمن: 0؛ اللون: أبيض؛ الخلفية: #1f7f5c؛ تعويم: مربع انتقال: الكل) :: -moz- العنصر النائب ( /* Mozilla Firefox 4 إلى 18 */ اللون : أبيض ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ اللون : أبيض ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ اللون: أبيض؛) #search_text: التركيز (الخلفية: rgb (64، 151، 119)؛) #search_button (الحدود: 0 لا شيء؛ الخلفية: #1f7f5c url (search.png) المركز بدون تكرار؛ تعويم: يسار محاذاة النص: المركز: المؤشر؛

  #search (العرض: 357 بكسل؛ الهامش: 4 بكسل؛) #search_text (العرض: 297 بكسل؛ الحشو: 15 بكسل 0 15 بكسل 20 بكسل؛ حجم الخط: 16 بكسل؛ عائلة الخط: Montserrat، sans-serif؛ الحدود: 0 لا شيء؛ الارتفاع: 52 بكسل ; فايرفوكس 4 إلى 18 */ اللون: أبيض ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: White; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ اللون: أبيض ) #search_text:focus ( الخلفية: rgb(64, 151, 119); ) #search_button (الحدود: 0 لا شيء؛ الخلفية: #1f7f5c url (search.png) المركز بدون تكرار؛ تعويم: يسار؛ محاذاة النص: 52بكسل;

  4. القائمة الفرعية المنسدلة

  ستسمح لنا اللمسة الأخيرة بإنشاء قائمة منسدلة في CSS يتم تشغيلها لعنصر #options الأخير.

  #options a( border-left: 0 none ; ) #options > a ( صورة الخلفية : url (triangle.png ) ; موضع الخلفية : 85% مركز ; تكرار الخلفية : بدون تكرار ; الحشو على اليمين : 42px ; ) .subnav (الرؤية: مخفي؛ الموضع: مطلق؛ الأعلى: 110%؛ اليمين: 0؛ العرض: 200 بكسل؛ الارتفاع: تلقائي؛ العتامة: 0؛ الانتقال: الكل 0.1 ثانية؛ الخلفية: #232323؛) .subnav li (تعويم) : لا يوجد ;

  #options a( border-left: 0 none; ) #options>a ( صورة الخلفية: url(triangle.png); موضع الخلفية: مركز 85%; تكرار الخلفية: بدون تكرار; الحشو على اليمين: 42px; ) .subnav (الرؤية: مخفي؛ الموضع: مطلق؛ الأعلى: 110%؛ اليمين: 0؛ العرض: 200 بكسل؛ الارتفاع: تلقائي؛ العتامة: 0؛ الانتقال: الكل 0.1 ثانية؛ الخلفية: #232323؛ ) .subnav li ( float : لا شيء؛ ) .subnav li a (الحدود السفلية: 1 بكسل صلب #2e2e2e؛) #options:hover .subnav (الرؤية: مرئية؛ الأعلى: 100%؛ العتامة: 1؛)

  ستجد في الأنماط إدراج صورة خلفية مثلث (triangle.png) للإشارة إلى القائمة الفرعية - لا تنس الإشارة إلى المسار الصحيح لهذه الصورة وغيرها من الصور في المثال. يتم تنفيذ مظهر القائمة الفرعية باستخدام خاصية العتامة. الحل النهائي على Codepen:

  

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

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

  المجموع

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

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

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

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

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

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

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

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

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

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

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

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

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

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