كيفية عمل قائمة أفقية ذات منحدر؟ قائمة مركزية أفقيًا باستخدام تصميم القائمة الصحيح لـ CSS فقط في html5 وcss3.

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

القائمة العمودية

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

ستحتوي قائمتنا على رابط واحد:

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

#navbar ( الهامش: 0؛ الحشو: 0؛ نوع نمط القائمة: لا شيء؛ العرض: 100 بكسل؛)

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

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

#navbar a ( لون الخلفية: #949494؛ اللون: #fff؛ الحشو: 5 بكسل؛ زخرفة النص: لا شيء؛ وزن الخط: غامق؛ الحد الأيسر: 5 بكسل صلب #33ADFF؛ العرض: كتلة؛ ) #navbar li ( الحد الأيسر: 10 بكسل صلب #666؛ الحد السفلي: 1 بكسل صلب #666 ؛

لقد قمنا بدمج كافة التعليمات البرمجية الموضحة أعلاه في مثال واحد، والآن من خلال النقر على زر المحاولة، يمكنك الانتقال إلى صفحة المثال ورؤية النتيجة:

عنوان المستند #navbar ( الهامش: 0؛ الحشو: 0؛ نوع نمط القائمة: لا شيء؛ العرض: 100 بكسل؛ ) #navbar li ( border-left: 10px Solid #666; border-bottom: 1px Solid #666; ) # شريط التنقل أ (لون الخلفية: #949494؛ اللون: #fff؛ الحشو: 5 بكسل؛ زخرفة النص: لا شيء؛ وزن الخط: غامق؛ الحد الأيسر: 5 بكسل صلب #33ADFF؛ العرض: كتلة؛)

يحاول "

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

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

#navbar a:hover ( لون الخلفية: #666; الحد الأيسر: 5px صلب #3333FF; ) حاول »

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

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

يمكن إنشاء قائمة أفقية عن طريق تصميم قائمة عادية. عرض خاصية العناصر

تحتاج إلى تعيين القيمة المضمنة بحيث يتم تحديد موقع عناصر القائمة واحدًا تلو الآخر.

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

دعونا نكتب بعض القواعد لقائمتنا التي تعيد تعيين النمط الافتراضي المستخدم للقوائم، وتعيد تعريف عناصر القائمة من الكتلة إلى السطر:

#navbar ( الهامش: 0؛ الحشو: 0؛ نوع نمط القائمة: لا شيء؛ ) #navbar li ( العرض: مضمّن؛ ) حاول »

الآن كل ما يتعين علينا القيام به هو تحديد التصميم لقائمتنا الأفقية:

#navbar ( الهامش: 0؛ الحشو: 0؛ نوع نمط القائمة: لا شيء؛ الحد: 2 بكسل صلب #0066FF؛ نصف قطر الحدود: 20 بكسل 5 بكسل؛ العرض: 550 بكسل؛ محاذاة النص: المركز؛ لون الخلفية: #33ADFF؛ ) #navbar a ( اللون: #fff؛ الحشو: 5 بكسل 10 بكسل؛ زخرفة النص: لا شيء؛ وزن الخط: غامق؛ العرض: كتلة مضمّنة؛ العرض: 100 بكسل؛ ) #navbar a:hover ( نصف القطر الحدودي: 20 بكسل 5 بكسل لون الخلفية: #0066FF ) جرب »

القائمة المنسدلة

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

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

سنضع العناصر الفرعية في قائمة منفصلة، وندمجها في العنصر

الذي يحتوي على الرابط الأصلي المتعلق بالعناصر الفرعية. الآن لدينا بنية واضحة لشريط التنقل المستقبلي الخاص بنا:

يحاول "

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

تم تحويل القائمة إلى عنصر كتلة مرة أخرى:

#navbar ul (العرض: لا شيء؛) #navbar li:hover ul (العرض: block;)

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

#navbar، #navbar ul ( الهامش: 0؛ الحشو: 0؛ نوع نمط القائمة: لا شيء؛ ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

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

#navbar ul ( العرض: لا شيء؛ الموضع: مطلق؛ الأعلى: 100%؛ ) #navbar li ( تعويم: يسار؛ الموضع: نسبي؛ ) #navbar ( الارتفاع: 30 بكسل؛ ) حاول »

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

نحتاج الآن فقط إلى تصميم كلتا القائمتين وستكون القائمة المنسدلة جاهزة:

#navbar ul (العرض: لا شيء؛ لون الخلفية: #f90؛ الموضع: مطلق؛ الأعلى: 100%؛) #navbar li:hover ul (العرض: block;) #navbar, #navbar ul (الهامش: 0; الحشو: 0 نوع نمط القائمة: لا شيء؛ ) #navbar (الارتفاع: 30 بكسل؛ لون الخلفية: #666؛ مساحة اليسار: 25 بكسل؛ الحد الأدنى للعرض: 470 بكسل؛) #navbar li (طفو: يسار؛ الموضع: نسبي؛ height: 100%; ) #navbar li a ( العرض: كتلة; الحشو: 6 بكسل; العرض: 100 بكسل; اللون: #fff; زخرفة النص: لا شيء; محاذاة النص: المركز; ) #navbar ul li ( تعويم: لا شيء; ) #navbar li:hover (لون الخلفية: #f90;) #navbar ul li:hover (لون الخلفية: #666;)

تستخدم معظم مواقع الويب الكلاسيكية على الإنترنت قائمة أفقية كعنصر التنقل الرئيسي. في بعض الأحيان قد يحتوي على ميزات إضافية مختلفة - هياكل متعددة المستويات، وأيقونات للعناصر الفرعية، وكتلة بحث، وقوائم معقدة، وما إلى ذلك. في الآونة الأخيرة، كانت هناك مجموعة صغيرة مختارة على المدونة، واليوم سنلقي نظرة على 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 بكسل؛ .menu li (الموضع: نسبي؛ نمط القائمة: لا شيء؛ تعويم: يسار؛ العرض: كتلة؛ الارتفاع: 40 بكسل)

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

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

.menu li a ( العرض: كتلة؛ الحشو: 0 14 بكسل؛ الهامش: 6 بكسل 0؛ ارتفاع الخط: 28 بكسل؛ زخرفة النص: لا شيء؛ الحد الأيسر: 1 بكسل صلب #393942؛ الحد الأيمن: 1 بكسل صلب #4f5058 ؛ الخط -family: 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 سنوات، لذا يجب عليك التحقق من أدائها مرة أخرى في متصفحات مختلفة.

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

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

ما هي الاختلافات

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

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

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

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

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

كيفية عمل قائمة أفقية باستخدام html5

بيت خدمات جهات الاتصال التعليقات

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

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

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

العرض محجوب؛

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

الملاحة العمودية

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

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

أ (زخرفة النص: لا شيء؛ اللون: #fff؛ الحشو: 5 بكسل؛ حجم الخط: 22 بكسل؛ العرض: كتلة؛ الخلفية: تدرج خطي (إلى اليمين، rgba(96,108,136,1) 0%,rgba(63,76,107) ،1) 100%)؛ العرض: 200 بكسل؛ محاذاة النص: المركز )

زخرفة النص : لا يوجد ;

اللون : #ففف؛

الحشو: 5 بكسل؛

حجم الخط: 22 بكسل؛

العرض محجوب؛

الخلفية: خطي - متدرج (إلى اليمين، rgba (96، 108، 136، 1) 0%، rgba (63، 76، 107، 1) 100%)؛

العرض: 200 بكسل؛

النص - محاذاة: المركز

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

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

بناء الإطار

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

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

حسب عدد العناصر ذات الروابط المضمنة.

بناء الإطار

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

القائمة المنسدلة

القائمة الثابتة

يؤدي هذا إلى إنشاء الأساس، والذي يتم تصميمه بعد ذلك في CSS في قائمة أفقية، ثابتة أو منسدلة.

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

العرض: مضمن؛

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

العرض: مضمن؛

المساحة البيضاء: nowrap؛

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

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

في CSS، يتم استبدال .menu li بـ ".menu > li" لجعل العناصر الداخلية عمودية. تتم إضافة الموضع النسبي إلى المحدد الأصلي، حيث يتم إزاحة العنصر من حدود الكتلة الأصلية، ويتم إضافة الموضع المطلق إلى المحدد الفرعي (إزالته بالكامل من التدفق وتنسيقه من أقرب عنصر، وإذا لم يكن هناك أي عنصر ، ثم من حدود المتصفح). يمكن أن تحتوي العناصر ذات الموضع النسبي على عناصر فرعية ذات موضع مطلق. وهذا يعني أنه عندما تتحرك الكتلة بالموضع: النسبي، فإن الأجزاء الثابتة ستبقى في أماكنها داخلها.

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

العرض: مضمن؛

الموقف: نسبي؛

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

عرض لا شيء؛ (إخفاء العرض)

القائمة > li:hover .sec ((يستخدم فئة التحويم الزائفة لجعل القائمة تظهر عند التمرير)

وستكون النتيجة قائمة صغيرة وأنيقة.

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

العرض: مضمن؛

الموقف: ثابت؛

الموقف: مطلق؛

القائمة > li:hover .ثانية (

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

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

يقوم مطورو المتاجر عبر الإنترنت والمدونات والخدمات التعليمية والموارد الأخرى بتجربة وإنشاء المزيد والمزيد من الخرائط الجديدة وغير العادية. بعد قراءة المقال، ستتعرف على المجموعات الرئيسية التي تنقسم إليها جميع أنواع لوحات التنقل، وستكون قادرًا على تجربة كل منها، وستتعلم أيضًا كيفية كتابة رمز القائمة لموقع ويب بتنسيق 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; الحدود -left: 3px صلب #fff؛ ) .m-menu a:hover ( الخلفية: #1C1C1C; ) .m-menu .s-menu ( اليسار: 10px؛ الموضع: مطلق؛ العرض: لا شيء؛ العرض: 155px؛ الهامش: 0 ؛ الحشو: 0 ؛ نمط القائمة: لا شيء ؛ الخلفية: # FF8C00 ؛