كيفية إنشاء قائمة استجابة مطاطية باستخدام CSS؟ قائمة أفقية جميلة كاملة العرض، قائمة قابلة للتكيف على الشريط

مساء الخير

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

اليوم أود أن أوضح لك كيفية إنشاء مثل هذه القائمة.

لذلك ستكون قائمتنا على النحو التالي:

يتم تمديده إلى العرض الكامل ويبرز عند المرور فوقه. يتم تقريب القائمة على الجانبين.

ترميز HTML

بيت

أخبار مثيرة للاهتمام

عنصر قائمة آخر!

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

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

فصل نشيطهو المسؤول عن عنصر القائمة المحدد ويسلط الضوء عليه.

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

قواعد CSS

أولاً، لنقم بتعيين أنماط العرض العام للقائمة:

Menu_container ( المساحة المتروكة في الأعلى: 40 بكسل؛ العرض: 100%؛ الارتفاع: 47 بكسل؛ تباعد الحدود: 0 بكسل؛ ) .menu_container td ( محاذاة رأسية: وسط؛ /* محاذاة رأسية */ ) .last_point_menu، .first_point_menu، .middle_point_menu ( العرض: 100%؛ الارتفاع: 47 بكسل؛ الحد: 1 بكسل صلب #dadbda؛ الموضع: حدود يسارية: لا شيء؛ (الحشوة: 0 بكسل؛ محاذاة رأسية: الوسط؛ الحدود: لا شيء؛ محاذاة النص: اليسار؛ العرض: 150 بكسل؛ مساحة المساحة اليسرى: 4 بكسل؛ ) .td.inner_table_title ( مساحة المساحة العلوية: 4 بكسل؛ حجم الخط: غامق؛ ) .td.inner_table_img ( العرض: 40 بكسل! مهم؛ ) .inner_table_menu ( الارتفاع: 100%؛ مساحة المساحة: 0 بكسل ; (العرض: 30 بكسل! مهم؛ الارتفاع: 30 بكسل! مهم؛ مساحة اليسار: 15 بكسل؛)

من أجل الجمال، دعونا نلتف حول الزوايا على جانبي القائمة:

First_point_menu ( -webkit-border-top-left-radius: 5px؛ -webkit-border-bottom-left-radius: 5px؛ -moz-border-radius-topleft: 5px؛ -moz-border-radius-bottomleft: 5px؛ نصف القطر من أعلى اليسار إلى الحد: 5 بكسل؛ نصف القطر من أسفل إلى اليسار: 5 بكسل؛ نصف القطر الأيمن السفلي: 5 بكسل؛ -moz-border-radius-topright: 5px ؛

الآن أصبحت قائمتنا أكثر جمالا:

حتى الآن، النقطة الأولى ليس لها حدود يسرى. سنقوم بإصلاحه في وقت لاحق قليلا.

الآن دعونا نضيف تأثيرات التمرير للقائمة.

Middle_point_menu: تحوم، .last_point_menu: تحوم، .first_point_menu: تحوم، .middle_point_menu.active، .last_point_menu.active، .first_point_menu.active، .middle_point_menu.active ( لون الخلفية: #CAE285؛ صورة الخلفية: -moz-linear- gradient(top, #CAE285, #9FCB56) صورة الخلفية: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); -gradient(top, #CAE285, #9FCB56)؛ صورة الخلفية: -o-linear-gradient(top, #CAE285, #9FCB56); - اللون: #aec671 #9fbb62 #87ac4a؛ الحدود اليسرى: لا شيء؛ مؤشر z: 5000؛ ) .last_point_menu ( الحد: 1 بكسل صلب #dadbda؛ الحد الأيسر: لا شيء؛ ) .last_point_menu: hover ( الحد: 1 بكسل صلب #9FCB56؛ الحد الأيسر: لا شيء؛ ) . لون الحدود: #aec671 #9fbb62 #87ac4a؛ ) .last_point_menu.active ( الحد الأيسر: لا شيء؛ )

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

/* أنماط الحدود الجانبية */ .borderLeftSecond, .borderRightSecond ( العرض: لا شيء; الموضع: مطلق; العرض: 1px; الارتفاع: 47px; لون الخلفية: #9fbb62; الأعلى: 0px; مؤشر z: 1000; ) /* الإزاحات المطلقة للحدود */ .borderLeftSecond ( left: 0px; ). والعنصر الأخير */ .first_point_menu.active .borderLeftSecond ( العرض: لا شيء; ) .last_point_menu.active .borderRightSecond ( العرض: لا شيء; ) .last_point_menu: hover .borderLeftSecond ( العرض: block; )

هذا كل شئ!

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

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

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

كيفية تنفيذ هذا؟

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

الحل لدينا

سيتم بناء عروضنا على أساس متين من معرفة HTML5 وCSS3.

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

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

يوجد أدناه رمز يعمل كمثال لإنشاء قائمة مطاطية:

لغة البرمجة

< ul> < li>< a href= "#" >بيت < li>< a href= "#" >مدونة < li>< a href= "#" >أخبار < li>< a href= "#" >شائع < li>< a href= "#" >عناصر جديدة

ul (محاذاة النص: ضبط؛ تجاوز السعة: مخفي؛ /* يزيل الآثار الجانبية للطريقة */الارتفاع: 20 بكسل؛ /* يزيل أيضًا الأشياء غير الضرورية */المؤشر: افتراضي؛ /* يضبط الشكل الأولي للمؤشر */الهامش: 50 بكسل 100 بكسل 0 100 بكسل؛ الخلفية: #eee؛ الحشو: 5 بكسل؛ ) لى (العرض: مضمن؛ /* يجعل نص عناصر القائمة */) لى (عرض: كتلة مضمنة؛ /* يزيل فواصل الكلمات في القائمة */اللون: #444؛ ) أ: قم بالتحويم (اللون: #ff0000;) ul: بعد ( /* تشكيل السطر الثاني لاختبار الطريقة */المحتوى: "1" ؛ الهامش الأيسر: 100%؛ الارتفاع: 1 بكسل؛ إخفاء الفائض؛

للعمل في Internet Explorer القديم الجيد، يجب عليك أيضًا إضافة الكود التالي إلى CSS

ul ( z-index: Expression(runtimeStyle.zIndex = 1 , InsertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( الهامش الأيسر: 100%; ) * html ul ( /* تحتاج إلى ie6 فقط */ height: 30px; )

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

عيوب الطريقة

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

ما هي المتصفحات التي تعمل فيها؟

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

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

القائمة المطاطية مع CSS - الخطوة 1

الخطوة الأولى هي دائمًا ترميز HTML، أين سنكون بدونه؟ لكن في حالتنا سيكون كل شيء بسيطًا:

1. غلاف الكتلة للقائمة
2. القائمة نفسها، معروضة من خلال قائمة ذات تعداد نقطي (علامة ul)
3. حسنا، هناك عناصر القائمة في الداخل، وفيها، وفقا لذلك، هناك بالفعل روابط

كل شيء واضح، وهنا رمز الترميز الخاص بي:

كل شيء يبدو قياسيا، مثل هذا:

الآن سنضع كل شيء بالشكل المطلوب، وسيبدأ CSS في العمل.

الخطوة 2 – الأنماط الأساسية

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

طَوّق(
الخلفية: #ففف؛
أقصى عرض: 600 بكسل؛
الهامش: 0 تلقائي؛
}

الخطوة 3 - تنفيذ المطاط

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

قائمة R(
الخلفية: تدرج خطي (إلى اليمين، #b0d4e3 0%، #88bacf 100%)؛
العرض: صف الجدول؛
نمط القائمة: لا شيء؛
}

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

قائمة R(
محاذاة عمودية: أسفل؛
العرض: خلية الجدول؛
العرض: تلقائي؛
محاذاة النص: مركز؛
الارتفاع: 50 بكسل؛
الحدود اليمنى: 1 بكسل صلب #222؛
}

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

حتى الآن تبدو القائمة قبيحة، ولكن لا بأس، فقد حان الوقت لتذكرها.

آخر ما عليك فعله هو تصميم الروابط الموجودة داخل العناصر. هنا لدي هذا الرمز:

قائمة R لى(
زخرفة النص: لا شيء؛
العرض: 1000 بكسل؛
الارتفاع: 50 بكسل؛
محاذاة رأسية: وسط؛
العرض: خلية الجدول؛
اللون: #ففف؛
الخط: عادي 14px Verdana؛
}

وهذا ما تبدو عليه القائمة الآن:

مرة أخرى، اسمحوا لي أن أوضح بعض الأسطر:

• تتجاوز خاصية زخرفة النص التسطير الافتراضي للروابط
• width: 1000px ربما يكون الخط الأكثر أهمية. تحتاج إلى ضبط الارتباطات على هذا العرض تقريبًا، وربما أقل، ولكن بالتأكيد أكبر من أوسع عنصر ممكن في القائمة. لن يكون عرض الروابط 1000 بكسل، نظرًا لأن العرض سيكون محدودًا بعنصر القائمة li، الذي تم ضبط عرضه على تلقائي، ولكن هذا سيجعل من الممكن التأكد من أنه بالنسبة لأي عدد من العناصر في القائمة سيكون دائمًا 100 بكسل في المئة من العرض.
• محاذاة رأسية: الوسط والعرض: خلية الجدول - الأول سوف يقوم بمحاذاة النص عموديًا إلى المركز، والثاني سيعرض أيضًا الروابط كخلايا. هناك حاجة إلى كلا الخاصيتين.
• الخط - حسنًا، هذه مجرد مجموعة من إعدادات الخط. اقرأ عن خصائص CSS للخطوط في هذه المقالة.

الخطوة 4 (اختياري) يمكنك إضافة التفاعلية

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

قائمة R: تحوم (
لون الخلفية: #6bba70؛
}

اختبار القائمة للمطاطية

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

تظل القائمة بعرض 600 بكسل. تم تقليص العناصر المتبقية قليلاً لاستيعاب عنصرين جديدين.

سأضيف نقطة أخرى طويلة:

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

سأقوم بتقليل القائمة إلى ثلاثة عناصر.

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

كيفية التكيف معها؟

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

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

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

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

كيفية عمل قائمة أفقية: أمثلة للتخطيط والتصميم

ترميز HTML والأنماط الأساسية لقائمة أفقية

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

ترميز HTML للتنقل الأفقي

• عنصر القائمة
• عنصر القائمة
• عنصر القائمة
...

يمكن أيضًا وضع قائمة أفقية موجودة داخل علامة داخل عنصر ما

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

هناك عدة طرق لوضعها أفقيا. تحتاج أولاً إلى إعادة تعيين أنماط المتصفح الافتراضية لعناصر التنقل:

Ul ( نمط القائمة: لا شيء؛ / * إزالة علامات القائمة * / الهامش: 0؛ / * إزالة الهامش العلوي والسفلي يساوي 1em * / الحشو الأيسر: 0؛ / * إزالة الحشو الأيسر يساوي 40 بكسل * / ) a (زخرفة النص: لا شيء؛ /*إزالة التسطير من نص الرابط*/)

الطريقة الأولى: li (العرض: مضمن؛)

جعل عناصر القائمة صغيرة. ونتيجة لذلك، تم وضعهما أفقيًا، مع إضافة فجوة قدرها 0.4 مم على الجانب الأيمن بينهما (محسوبة بالنسبة لحجم الخط). لإزالته، قم بإضافة هامش أيمن سلبي لـ li li (margin-right: -4px;) . بعد ذلك، نقوم بتصميم الروابط كما نرغب.

الطريقة الثانية: li (عائم: يسار؛)

جعل عناصر القائمة عائمة. ونتيجة لذلك، يتم وضعها أفقيا. يصبح ارتفاع كتلة الحاوية صفرًا. لحل هذه المشكلة، أضفنا (overflow: Hidden;) إلى ul، وقمنا بتوسيعها وبالتالي السماح لها باحتواء العناصر العائمة. بالنسبة للروابط، قم بإضافة (display: block;) وقم بتصميمها كما يحلو لك.

الطريقة الثالثة: li (العرض: كتلة مضمّنة؛)

جعل عناصر القائمة مضمنة في الكتلة. وهي تقع أفقيا، على الجانب الأيمن يتم تشكيل الفجوة، كما في الحالة الأولى. بالنسبة للروابط، قم بإضافة (display: block;) وقم بتصميمها كما تريد.

الطريقة الرابعة.ul (العرض: المرن؛)

جعل قائمة ul حاوية مرنة باستخدام . ونتيجة لذلك، يتم ترتيب عناصر القائمة أفقيا. نضيف (عرض: كتلة؛) للروابط ونصممها حسب الرغبة.

1. قائمة متكيفة مع تأثير التسطير عند المرور فوق الرابط

• عمل
• عن
• مدونة
• اتصال
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Condensed"); .menu-main (نمط القائمة: لا شيء؛ الهامش: 40 بكسل 0 5 بكسل؛ الحشو: 25 بكسل 0 5 بكسل؛ محاذاة النص: المركز؛ الخلفية: أبيض؛) .menu-main li (العرض: كتلة مضمّنة؛).menu- لي الرئيسي: بعد ( المحتوى: "|"؛ اللون: #606060؛ العرض: كتلة مضمنة؛ محاذاة رأسية: أعلى؛ ) .menu-main li: last-child: after (content: none؛) .menu-main a (زخرفة النص: لا شيء؛ عائلة الخط: "Ubuntu Condensed"، sans-serif؛ تباعد الحروف: 2 بكسل؛ الموضع: نسبي؛ الحشو السفلي: 20 بكسل؛ الهامش: 0 34 بكسل 0 30 بكسل؛ حجم الخط: 17 بكسل؛ تحويل النص: حرف كبير؛ العرض: انتقال مضمن: اللون .2s) .menu-main a، .menu-main a:visited (اللون: #9d999d؛). ) .menu-main a: before، .menu-main a: after ( المحتوى: ""؛ الموضع: مطلق؛ الارتفاع: 4px؛ الأعلى: تلقائي؛ اليمين: 50%؛ الأسفل: -5px؛ اليسار: 50%؛ الخلفية : #feb386؛ الانتقال: .8s؛ ) .menu-main a:hover:before، .menu-main .current:before (يسار: 0؛). 0;) @media (الحد الأقصى للعرض: 550 بكسل) ( .menu-main (الحشوة العلوية: 0;).menu-main li (العرض: block; ) .menu-main li:after (content: none;) . القائمة الرئيسية أ ( الحشو: 25 بكسل 0 20 بكسل؛ الهامش: 0 30 بكسل؛ ))

2. القائمة التكيفية لموقع الزفاف

@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu (الموضع: نسبي؛ الخلفية: #fff؛ ظل الصندوق: داخلي 0 0 10px #ccc؛) .top-menu: قبل، .top-menu: بعد (المحتوى: ""؛ العرض: block؛ الارتفاع : 1 بكسل؛ الحد العلوي: 3 بكسل صلب #575350؛ الحد السفلي: 1 بكسل صلب #575350؛ 575350؛ مربع الظل: 0 2 بكسل 7 بكسل #ccc؛ الهامش العلوي: 2 بكسل. القائمة الرئيسية (نمط القائمة: لا شيء؛ الحشو: 0 30 بكسل؛ الهامش: 0؛ حجم الخط: 18 بكسل؛ محاذاة النص: المركز؛ الموضع: نسبي ؛ ) .menu-main: قبل، .menu-main: بعد ( المحتوى: "\25C8"؛ ارتفاع الخط: 1؛ الموضع: مطلق؛ الأعلى: 50%؛ التحويل: ترجمة Y(-50% ); (زخرفة النص: لا شيء؛ العرض: كتلة مضمنة؛ الهامش: 2 بكسل 5 بكسل؛ الحشو: 6 بكسل 15 بكسل؛ عائلة الخط: "PT Sans"، sans-serif؛ حجم الخط: 16 بكسل؛ اللون: #777777؛ الحد السفلي : 1 بكسل انتقال شفاف خالص: .3 ثانية خطي؛ ) .menu-main .current، .menu-main a:hover ( border-radius: 3px; الخلفية: #f3ece1; اللون: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; ) @media (الحد الأقصى للعرض: 500 بكسل) ( .menu-main li (العرض: block;))

3. القائمة التكيفية مع الاسكالوب

• عمل
• عن
• مدونة
• اتصال
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main (نمط القائمة: لا شيء؛ الحشو: 0 30 بكسل؛ الهامش: 0؛ حجم الخط: 18 بكسل؛ محاذاة النص: المركز؛ الموضع: نسبي؛ الخلفية: أبيض؛ ) .menu-main: بعد ( المحتوى: ""؛ الارتفاع: 20 بكسل؛ الجزء السفلي: -20 بكسل؛ أبيض 0%، أبيض 70%، rgba(255,255,255,0) 255,255,0) 100%) 0 -10 بكسل حجم الخلفية: 20 بكسل 20 بكسل; كرر: تكرار x) .menu-main li (العرض: كتلة مضمّنة؛) .menu-main a (زخرفة النص: لا شيء؛ العرض: كتلة مضمّنة؛ الحشو: 10 بكسل 30 بكسل؛ عائلة الخط: "PT Sans Caption" "، sans-serif؛ الانتقال: .3s خطي؛ -main a:before، .menu-main a:after ( content: ""؛ الموضع: مطلق؛ الأعلى: calc(50% - 3px)؛ العرض: 6px؛ الارتفاع : 6 بكسل؛ نصف قطر الحدود: 50%؛ الخلفية: #F58262 العتامة: 0؛ اليمين: 5 بكسل؛) .menu-main أ. الحالي: قبل، .menu-main a.current: بعد، .menu-main a: hover: قبل، .menu-main a: hover: after (التعتيم: 1؛) .menu-main a.current، .menu- main a:hover (اللون: #F58262؛) @media(max-width:680px) ( .menu-main li (display: block;))

4. القائمة التكيفية على الشريط

@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .القائمة العلوية ( الهامش: 0 60 بكسل؛ الموضع: نسبي؛ الخلفية: #5A394E؛ ظل الصندوق: داخلي 1px 0 0 rgba(255,255,255,.1), داخلي -1px 0 0 rgba(255,255,255,.1), داخلي 150 بكسل 0 150px -150px rgba(255,255,255,.12), داخلي -150px 0 150px -150px rgba(255,255,255,.12) .top-menu: قبل، .top-menu:after ( content: ""; الموضع: مطلق ; z -الفهرس: 2؛ العرض: 100%؛ الارتفاع: 3 بكسل؛) .القائمة العلوية: بعد (الأسفل: 0؛ الحد العلوي: 1 بكسل متقطع rgba(255,255,255,.2);) .القائمة الرئيسية (نمط القائمة: لا شيء؛ الحشو: 0؛ الهامش: 0؛ محاذاة النص: المركز) . 8px الحد العلوي: 18px الصلبة #5A394E؛ الحد السفلي: 18px الصلبة # 5A394E؛ تحويل: تدوير (360deg)؛ : 12 بكسل صلب rgba(255, 255, 255, 0); ) .menu-main li (العرض: كتلة مضمّنة؛ الهامش الأيمن: -4 بكسل؛ ) .menu-main a (زخرفة النص: لا شيء؛ العرض: كتلة مضمّنة؛ الحشو: 15 بكسل 30 بكسل؛ عائلة الخط: "PT" Sans Caption"، sans-serif؛ اللون: أبيض؛ الانتقال: .3s خطي؛ ) .menu-main a.current، .menu-main a:hover (الخلفية: rgba(0,0,0,.2);) @media (الحد الأقصى للعرض: 680 بكسل) ( .top-menu (الهامش: 0؛) .menu-main li ( العرض: block؛ الهامش الأيمن: 0؛ ) .menu-main: قبل، .menu-main: بعد (المحتوى: لا شيء؛) .menu-main a (العرض: كتلة؛))

5. قائمة مستجيبة مع شعار في المنتصف

@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( الموضع: نسبي؛ الخلفية: rgba(34,34,34,.2); ) .menu-main (نمط القائمة: لا شيء; الهامش: 0; الحشو: 0; ) .menu-main: بعد ( المحتوى: ""؛ العرض: الجدول؛ واضح: كلاهما؛ ) .left-item (float: left؛) .right-item (float: right؛).navbar-logo ( الموضع: مطلق؛ left: 50%؛ top : 50%؛ تحويل: ترجمة (-50%،-50%)؛ .menu-main a ( زخرفة النص: لا شيء؛ العرض: كتلة؛ ارتفاع الخط: 80 بكسل؛ الحشو: 0 20 بكسل؛ حجم الخط: 18 بكسل؛ تباعد الحروف: 2 بكسل؛ عائلة الخط: "Arimo"، sans-serif؛ اللون: أبيض؛ انتقال: 0.3 ثانية؛) @media (الحد الأقصى للعرض: 830 بكسل) ( .menu- main ( الحشو العلوي: 90 بكسل؛ محاذاة النص: المركز؛ ) .navbar-logo ( الموضع: مطلق؛ اليسار: 50%؛ العلوي: 10 بكسل؛ التحويل: TranslateX(-50%)) .menu-main li ( float: لا يوجد عرض: كتلة مضمنة؛ ) .menu-main أ ( ارتفاع الخط: عادي؛ الحشو: 20 بكسل 15 بكسل؛ حجم الخط: 16 بكسل؛ ) ) @media (الحد الأقصى للعرض: 630 بكسل) ( .menu-main li ( العرض محجوب؛) )

6. قائمة الاستجابة مع الشعار على اليسار

@import url("https://fonts.googleapis.com/css?family=Arimo"); .القائمة العلوية ( الخلفية: rgba(255,255,255,.5); ظل الصندوق: 3px 0 7px rgba(0,0,0,.3); الحشو: 20px; ) .القائمة العلوية:بعد ( المحتوى: "" عرض: جدول؛ واضح: كلاهما) .navbar-logo (عرض: كتلة مضمّنة؛) .menu-main (نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛ تعويم: يمين؛) .menu-main li (العرض: كتلة مضمّنة؛).menu-main a (زخرفة النص: لا شيء؛ العرض: كتلة؛ الموضع: نسبي؛ ارتفاع السطر: 61 بكسل؛ مساحة الحشو على اليسار: 20 بكسل؛ حجم الخط: 18 بكسل؛ تباعد الحروف : 2px؛ عائلة الخط: "Arimo"، sans-serif؛ اللون: #F73E24؛ الانتقال: .3s خطي؛ اليسار: 50%؛ تحويل (45 درجة) ترجمة X (6.5 بكسل)؛ الانتقال: .3 ثانية خطي؛ (التعتيم: 1؛) @media (أقصى عرض: 660 بكسل) ( .menu-main ( float: none; padding-top: 20 بكسل ؛ ) .القائمة العلوية ( محاذاة النص: المركز ؛ الحشو: 20 بكسل 0 0 0 ؛ ) .القائمة الرئيسية أ (الحشوة: 0 10 بكسل ؛) . القائمة الرئيسية أ: قبل (التحويل: تدوير (45 درجة) ترجمة X ( -6px)؛) ) @media (الحد الأقصى للعرض: 600 بكسل) ( .menu-main li (العرض: block؛))