قائمة طعام
مجانا
تسجيل
بيت  /  البرامج/ Bootstrap 4 قائمة التمدد إلى العرض الكامل. القائمة المنسدلة الأفقية "افعل ذلك بنفسك" في css و html

قائمة التمديد Bootstrap 4 إلى العرض الكامل. القائمة المنسدلة الأفقية "افعل ذلك بنفسك" في css و html

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

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

الخطوة الأولى في قائمة السوائل في CSS

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

  • كتلة المجمع القائمة
  • القائمة نفسها ، التي يتم تقديمها عبر قائمة نقطية (علامة ul)
  • حسنًا ، عناصر القائمة بالداخل ، وفيها ، على التوالي ، توجد روابط بالفعل

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



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

    الآن سنقوم بإحضار كل شيء إلى النموذج المطلوب ، يتم استخدام CSS للعمل.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    R-menu li: hover (
    لون الخلفية: # 6bba70 ؛
    }

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

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

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

    سأضيف فقرة واحدة طويلة أخرى:

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

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

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

    كيف تتكيف؟

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

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

    مساء الخير

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

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

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

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

    علامة HTML

    ...
    بيت
    أخبار مثيرة للاهتمام
    عنصر قائمة آخر!

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

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

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

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

    قواعد CSS

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

    Menu_container (padding-top: 40px؛ width: 100٪؛ height: 47px؛ border-spacing: 0px؛) .menu_container td (محاذاة رأسية: وسط ؛ / * محاذاة رأسية * /) .last_point_menu، .first_point_menu،. mid_point_menu ( العرض: 100٪ ؛ الارتفاع: 47 بكسل ؛ الحد: 1 بكسل صلب # dadbda ؛ مؤشر z: 1000 ؛ الموضع: نسبي ؛ الحد الأيسر: لا شيء ؛) .inner_table (العرض: 100٪ ؛ الارتفاع: 100٪ ؛) .inner_table td (المساحة المتروكة: 0 بكسل ؛ المحاذاة الرأسية: الوسط ؛ الحد: لا شيء ؛ محاذاة النص: يسار ؛ العرض: 150 بكسل ؛ المساحة اليسرى: 4 بكسل ؛) .td.inner_table_title (المساحة العلوية: 4 بكسل ؛ وزن الخط: غامق ؛) .td.inner_table_img (width: 40px! important؛) .inner_table_menu (height: 100٪؛ padding: 0px؛ vertical-align: middle؛ border: none؛ text-align: left؛) .inner_table_title (padding-left: 10px؛ padding-right: 10px ؛ تحويل النص: أحرف كبيرة ؛ ارتفاع الخط: 13 بكسل ؛) .inner_table_menu td.inner_table_img (العرض: 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 بكسل ؛ الحد الأيمن: 1 بكسل صلب # dadbda ؛) .last_point_menu (-webkit-border-top-right-radius: 5px ؛ -webkit-border نصف قطر أسفل اليمين: 5 بكسل ؛ -موز-حد-نصف قطر-إلى اليمين: 5 بكسل ؛ -موز-حد-نصف قطر-أسفل اليمين: 5 بكسل ؛ نصف قطر أعلى يمين الحد: 5 بكسل ؛ نصف قطر الحد السفلي الأيمن: 5 بكسل ؛)

    الآن اكتسبت قائمتنا مظهرًا أكثر جمالًا:

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

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

    Middle_point_menu: hover، .last_point_menu: hover، .first_point_menu: hover،. التدرج اللوني (أعلى ، # CAE285 ، # 9FCB56) ؛ صورة الخلفية: -مجموعة ويب التدرج (خطي ، 0 0 ، 0 100٪ ، من (# CAE285) ، إلى (# 9FCB56)) ؛ صورة الخلفية: -مجموعة ويب خطية -التدرج (أعلى ، # CAE285 ، # 9FCB56) ؛ صورة الخلفية: - التدرج الخطي (أعلى ، # CAE285 ، # 9FCB56) ؛ صورة الخلفية: التدرج الخطي (إلى الأسفل ، # CAE285 ، # 9FCB56) ؛ border: 1px صلب # 9FCB56 ؛ لون الحدود: # aec671 # 9fbb62 # 87ac4a ؛ الحد الأيسر: لا شيء ؛ z-index: 5000 ؛) / * حدود العمل على التحويم * / .first_point_menu (border: 1px solid #dadbda ؛) .first_point_menu: hover، .first_point_menu.active (border: 1px solid # 9FCB56؛ border-color: # aec671 # 9fbb62 # 87ac4a؛) .last_point_menu (border: 1px solid #dadbda؛ border-left: none؛) .last_point_menu: hover (الحد: 1 بكسل صلب # 9FCB56 ؛ الحد الأيسر: لا شيء ؛ لون الحدود: # aec671 # 9fbb62 # 87ac4a ؛ ) .last_point_menu.active (الحد الأيسر: لا شيء ؛)

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

    / * أنماط الحدود الجانبية * / .borderLeftSecond، .borderRightSecond (عرض: لا شيء ؛ الموضع: مطلق ؛ العرض: 1 بكسل ؛ الارتفاع: 47 بكسل ؛ لون الخلفية: # 9fbb62 ؛ أعلى: 0 بكسل ؛ مؤشر z: 1000 ؛) / * الإزاحات المطلقة للحدود * / .borderLeftSecond (يسار: 0 بكسل ؛) .borderRightSecond (يمين: -1 بكسل ؛) / * إظهار الحدود للكائنات النشطة والمرور عليها * /. active .borderLeftSecond ،. active .borderRightSecond ،. mid_point_menu: hover>. borderLeftSecond ،. لا شيء ؛) .last_point_menu.active .borderRightSecond (عرض: بلا ؛) .last_point_menu: hover .borderLeftSecond (display: block؛)

    هذا كل شئ!

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

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

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

    سيصف هذا القسم القائمة الأفقية المنسدلة في CSS و HTML.

    التنقل في الصفحة:

    لذا، مهمتنا:

    إنشاء قائمة منسدلة أفقية css (في قوائم ul li) بدون استخدام jQuery و Javascript وأيضًا بدون استخدام الجداول

    في الكود.

    القائمة المنسدلة الأفقية html

    بادئ ذي بدء ، قبل أن نبدأ في كتابة التعليمات البرمجية ، نحتاج إلى إنشاء قالب html للقائمة.

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

    • بيت
    • معلومات عنا
    • خدماتنا
      • خدمتنا # 1
      • خدمتنا # 2
      • خدمتنا # 3
      • خدمتنا # 4
      • الخدمة 5
    • أخبار
    • جهات الاتصال

    كما ترى من الكود ، سيتم تطبيق القائمة المنسدلة على قوائم ul و li. هذا ما تبدو عليه القائمة بدون نمط CSS:

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

    القائمة المنسدلة الأفقية لـ CSS

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

    بالنسبة إلى القائمة المنسدلة الأفقية ، نحتاج إلى الأنماط التالية:

    # menu1 (الوضع: نسبي ؛ العرض: الكتلة ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ z-index: 10 ؛) # menu1 ul (الموقف: النسبي ؛ العرض: الكتلة ؛ الهامش: 0 بكسل ؛ الحشو: 0 بكسل ؛ العرض: 100 ٪؛ height: auto؛ list-style: none؛ background: # F3A601؛) # menu1> ul :: after (display: block؛ width: 100٪؛ height: 0px؛ clear: both؛ content: ""؛) # menu1 ul li (position: النسبي ؛ display: block ؛ float: left ؛ width: auto ؛ height: auto ؛) # menu1 ul li a (display: block؛ padding: 9px 25px 0px 25px؛ font-size: 14px؛ font- family: Arial، sans-serif؛ color: #ffffef؛ line-height: 1.3em؛ text-decoration: none؛ font-weight: bold؛ text-transform: uppercase؛ height: 36px؛ box-sizing: border-box؛ ) # menu1 ul li> a: hover، # menu1 ul li: hover> a (background: # EBBD5B؛ color: # 2B45E0؛)

    هذه ليست النهاية بعد ، فقط جزء من CSS للقائمة الأفقية الرئيسية. بعد ذلك ، سنكتب أنماط القائمة المنسدلة:

    # menu1 ul li ul (الموضع: مطلق ؛ أعلى: 36 بكسل ؛ يسار: 0 بكسل ؛ عرض: لا شيء ؛ العرض: 200 بكسل ؛ الخلفية: # EBBD5B ؛) # menu1 ul li: hover ul (display: block ؛) / * هذا الخط يطبق آلية التسرب * / # menu1 ul li ul li (float: none؛ width: 100٪؛) # menu1 ul li ul li a (display: block؛ text-transform: none؛ height: auto؛ padding: 7px 25px؛ width: 100٪؛ box-sizing: border-box؛ border-top: 1px solid #ffffff؛) # menu1 ul li ul li: first-child a (border-top: 0px؛) # menu1 ul li ul li a: hover ( الخلفية: # FDDC96 ؛ اللون: # 6572BC ؛)

    الآن هذا كل شيء. يتم تنفيذ آلية القائمة المنسدلة نفسها في سطر واحد.

    انظر إلى الجلد بهذه القائمة:

    أرز. 2 (قائمة أفقية منسدلة)

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

    القائمة المنسدلة الأفقية ذات العرض الكامل

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

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

    #conteiner (العرض: 1000 بكسل ؛ الارتفاع: تلقائي ؛ الهامش: 0 بكسل تلقائي ؛ المساحة العلوية: 10 بكسل ؛) # menu1 (الموضع: نسبي ؛ العرض: الكتلة ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ مؤشر z: 10 ؛) # menu1 ul (الموضع: نسبي ؛ عرض: كتلة ؛ هامش: 0 بكسل ؛ حشوة: 0 بكسل ؛ عرض: 100٪ ؛ ارتفاع: تلقائي ؛ نمط القائمة: لا شيء ؛ الخلفية: # F3A601 ؛) # menu1> ul (محاذاة النص: justify؛ font-size: 1px؛ line-height: 1px؛) # menu1> ul :: after (display: inline-block؛ width: 100٪؛ height: 0px؛ content: ""؛) # menu1 ul li (position : نسبي ؛ عرض: كتلة مضمنة ؛ العرض: تلقائي ؛ الارتفاع: تلقائي ؛ المحاذاة الرأسية: أعلى ؛ محاذاة النص: يسار ؛) # menu1 ul li a (عرض: كتلة ؛ المساحة المتروكة: 9px 35px 0px 35px ؛ حجم الخط : 14px؛ font-family: Arial، sans-serif؛ color: #ffffef؛ line-height: 1.3em؛ text-decoration: none؛ font-weight: bold؛ text-transform: uppercase؛ height: 36px؛ box-sizing : border-box؛) # menu1 ul li> a: hover، # menu1 ul li: hover> a (background: # EBBD5B؛ color: # 2B45E0؛) # menu1 ul li ul (الموقف: مطلق ؛ أعلى: 36px ؛ يسار : 0 بكسل ؛ عرض لا شيء؛ العرض: تلقائي ؛ الخلفية: # EBBD5B ؛ مساحة بيضاء: نوراراب. ) # menu1 ul li: last-child ul (/ * سيتم تثبيت العنصر الأخير على اليمين * / left: auto؛ right: 0px؛) # menu1 ul li: hover ul (display: block؛) / * هذا السطر تنفذ آلية التسرب * / # menu1 ul li ul li (display: block؛ width: auto؛) # menu1 ul li ul li a (display: block؛ text-transform: none؛ height: auto؛ padding: 7px 35px؛ width : 100٪؛ box-sizing: border-box؛ border-top: 1px solid #ffffff؛) # menu1 ul li ul li: first-child a (border-top: 0px؛) # menu1 ul li ul li a: hover (الخلفية: # FDDC96 ؛ اللون: # 6572BC ؛)

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

    بالنسبة لعناصر القائمة الطويلة جدًا ، قد لا يكون هذا الخيار مناسبًا للغاية ، حيث إنها ستتجاوز الحدود. لتعطيل هذه الخاصية ، ما عليك سوى البحث عن الخاصية "white-space: nowrap؛" المحدد # menu1 ul li ul وإزالته.

    يمكنك أدناه مشاهدة عرض توضيحي أو تنزيل مصدر القائمة المنسدلة الأفقية:

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

    القائمة المنسدلة الأفقية مع الفواصل

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

    هناك حالات يتم فيها بناء التصميم بشكل رائع بحيث لا يمكن الاستغناء عن المسج.

    يظل كود Html كما هو ، فنحن نقوم فقط بتضمين مكتبة jQuery والملف الذي يستخدمها في البداية:

    تماما بعد .

    كما تفهم ، تحتاج إلى إنشاء ملف script-menu-3.jsووضع هذا الرمز الصغير هناك:

    $ (document) .ready (function () ($ ("# menu1> ul> li: not (: last-child)"). after ("")؛))؛

    يجب ترك أنماط CSS لمثل هذه القائمة كما هي ، + قم برمي هذه القطعة في النهاية:

    # menu1 ul li.razd (الارتفاع: 28 بكسل ؛ العرض: 1 بكسل ؛ الخلفية: #ffffff ؛ الهامش العلوي: 4 بكسل ؛)

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

    يمكنك مشاهدة العرض التوضيحي أو تنزيل قالب القائمة الأفقية أدناه:

    مزايا هذا الحل هي:

    • سيتم سحب القائمة ديناميكيًا ؛
    • المسافات البادئة من الفاصل إلى الفقرة هي نفسها في كل مكان ؛
    • تصميم أكثر جمالا ومرونة.
    القائمة المنسدلة ذات الطبقات الأفقية CSS + HTML

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

  • مع vipadashka عند الإشارة إلى الجانب
  • مع اندفاع منبثق من المستوى الثالث

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

    قائمة منسدلة متعددة المستويات مع vipad إلى الجانب عند التمرير

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

    • بيت
    • معلومات عنا
    • خدماتنا
      • خدمتنا # 1
        • إضافة إلى الخدمة 1
        • إضافة إلى الخدمة 2
      • خدمتنا # 2
        • إضافة إلى الخدمة 3
        • إضافة إلى الخدمة 4
      • خدمتنا # 3
      • خدمتنا # 4
      • الخدمة 5
    • أخبار
    • جهات الاتصال
      • خريطة الطريق
        • إضافة الخريطة
        • إضافة للخريطة 2
      • نموذج الملاحظات

    #conteiner (العرض: 1000 بكسل ؛ الارتفاع: تلقائي ؛ الهامش: 0 بكسل تلقائي ؛ المساحة العلوية: 10 بكسل ؛) # menu1 (الموضع: نسبي ؛ العرض: الكتلة ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ مؤشر z: 10 ؛) # menu1 ul (الموضع: نسبي ؛ عرض: كتلة ؛ هامش: 0 بكسل ؛ حشوة: 0 بكسل ؛ عرض: 100٪ ؛ ارتفاع: تلقائي ؛ نمط القائمة: لا شيء ؛ الخلفية: # F3A601 ؛) # menu1> ul (محاذاة النص: justify؛ font-size: 1px؛ line-height: 1px؛) # menu1> ul :: after (display: inline-block؛ width: 100٪؛ height: 0px؛ content: ""؛) # menu1 ul li (position : نسبي ؛ عرض: كتلة مضمنة ؛ عرض: تلقائي ؛ ارتفاع: تلقائي ؛ محاذاة رأسية: أعلى ؛ محاذاة النص: يسار ؛) # menu1 ul li.razd (الارتفاع: 28 بكسل ؛ العرض: 1 بكسل ؛ الخلفية: #ffffff ؛ margin-top: 4px؛) # menu1 ul li a (display: block؛ padding: 9px 45px 0px 45px؛ font-size: 14px؛ font-family: Arial، sans-serif؛ color: #ffffef؛ line-height: 1.3 em؛ text-decoration: none؛ font-weight: bold؛ text-convert: uppercase؛ height: 36px؛ box-sizing: border-box؛) # menu1 ul li> a: hover، # menu1 ul li: hover> a (الخلفية: # EBBD5B ؛ اللون: # 2B45E0 ؛ ) # menu1 ul li ul (الموضع: مطلق ؛ أعلى: 36 بكسل ؛ يسار: 0 بكسل ؛ عرض: لا شيء ؛ العرض: تلقائي ؛ الخلفية: # EBBD5B ؛ مسافة بيضاء: nowrap ؛) # menu1> ul> li: last-child> ul (/ * سيتم إرساء العنصر الأخير إلى اليمين * / اليسار: auto ؛ right: 0px؛) # menu1 ul li: hover> ul (display: block؛) / * هذا السطر ينفذ آلية التسرب * / # menu1 ul li ul li (display: block؛ width: auto؛) # menu1 ul li ul li a (display: block؛ text-convert: none؛ height: auto؛ padding: 7px 45px؛ width: 100٪؛ box-sizing: border -box؛ border-top: 1px solid #ffffff؛) # menu1 ul li ul li: first-child> a (border-top: 0px؛) # menu1 ul li ul li a: hover، # menu1 ul li ul li: hover> a (background: # FDDC96؛ color: # 6572BC؛) # menu1 ul li ul li ul (top: 0px؛ left: 100٪؛ display: none؛ background: # fddc96؛) # menu1> ul> li: last -الطفل> ul ul (يسار: تلقائي ؛ يمين: 100٪ ؛) # menu1 ul li ul li ul a (color: # F38A01 ؛)

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

    و هكذا حدثت الحكاية:
    لقد صنعت جلدين في واحد لإظهار كيف يبدو الاندفاع على اليمين وفي المنتصف.

    أدناه يمكنك مشاهدة عرض وتنزيل مثال:

    قائمة منسدلة متعددة الطبقات مع قائمة منبثقة عند التمرير

    ظهر القليل من الزيت في العنوان ، لكنه سيعمل ، الشيء الرئيسي هو الكود.

    يتمثل جوهر هذا المثال في إنشاء قائمة منسدلة أفقية كاملة العرض مع قائمة منسدلة كاملة العرض + متعددة المستويات.

    لن أقوم بتغيير كود HTML ، يمكن أخذها من المثال السابق. يتم أيضًا ترك الفواصل في jQuery.

    سيتغير CSS فقط تمامًا:

    #conteiner (العرض: 1000 بكسل ؛ الارتفاع: تلقائي ؛ الهامش: 0 بكسل تلقائي ؛ المساحة العلوية: 10 بكسل ؛) # menu1 (الموضع: نسبي ؛ العرض: الكتلة ؛ العرض: 100٪ ؛ الارتفاع: تلقائي ؛ مؤشر z: 10 ؛) # menu1 ul (الموضع: نسبي ؛ عرض: كتلة ؛ هامش: 0 بكسل ؛ حشوة: 0 بكسل ؛ عرض: 100٪ ؛ ارتفاع: تلقائي ؛ نمط القائمة: لا شيء ؛ الخلفية: # F3A601 ؛) # menu1> ul (محاذاة النص: justify؛ font-size: 1px؛ line-height: 1px؛) # menu1> ul :: after (display: inline-block؛ width: 100٪؛ height: 0px؛ content: ""؛) # menu1 ul li (position : نسبي ؛ عرض: كتلة مضمنة ؛ عرض: تلقائي ؛ ارتفاع: تلقائي ؛ محاذاة رأسية: أعلى ؛ محاذاة النص: يسار ؛) # menu1> ul> li (الموضع: ثابت ؛) # menu1 ul li.razd (الارتفاع : 28px؛ width: 1px؛ background: #ffffff؛ margin-top: 4px؛) # menu1 ul li a (display: block؛ padding: 9px 45px 0px 45px؛ font-size: 14px؛ font-family: Arial، sans- serif؛ color: #ffffef؛ line-height: 1.3em؛ text-decoration: none؛ font-weight: bold؛ تحويل النص: الأحرف الكبيرة؛ height: 36px؛ box-sizing: border-box؛) # menu1 ul li> a: hover، # menu1 ul li: hover> a (background: # EBBD5B؛ اللون: # 2B45E0 ؛ ) # menu1 ul li ul (الموضع: مطلق ؛ أعلى: 36 بكسل ؛ يسار: 0 بكسل ؛ عرض: لا شيء ؛ عرض: 100٪ ؛ الخلفية: # EBBD5B ؛) # menu1> ul> li> ul :: after (clear: both ؛ float: none؛ width: 100٪؛ height: 0px؛ content: ""؛) # menu1 ul li: hover> ul (display: block؛) / * هذا الخط ينفذ آلية التسرب * / # menu1 ul li ul li ( display: block؛ width: 30٪؛ float: left؛) # menu1 ul li ul li a (display: block؛ text-transform: none؛ height: auto؛ padding: 7px 45px؛ width: 100٪؛ box-size: border -box؛) # menu1 ul li ul li: first-child> a (border-top: 0px؛) # menu1 ul li ul li a: hover، # menu1 ul li ul li: hover> a (background: # FDDC96 ؛ اللون: # 6572BC ؛) # menu1 ul li ul li ul (أعلى: 0px ؛ يسار: 100٪ ؛ عرض: لا شيء ؛ الخلفية: # fddc96 ؛ z-index: 15 ؛) # menu1 ul li ul li ul li (عرض : block؛ float: none؛ width: 100٪؛) # menu1 ul li ul li ul a (color: # F38A01؛ border-top: 1px solid #ffffff؛)

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

    شاهد العرض التوضيحي للقائمة المنسدلة الأفقية متعددة المستويات:

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

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

    سوف يفيدهم أنا وأنا 🙂.

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

    أيضًا ، أنصحك بزيارة الصفحة الرئيسية https: // website / vypadayushhee-menu / ، حيث يتم جمع جميع الأمثلة وأنواع القوائم المنسدلة هناك.

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

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

      كيفية عمل قائمة أفقية: أمثلة على الترميز والتصميم ترميز HTML والأنماط الأساسية للقائمة الأفقية

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

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

      يمكن وضع قائمة أفقية داخل علامة اختيارياً داخل عنصر ... و / أو .... يعطي ترميز html معنى دلالي ، بالإضافة إلى فرصة إضافية لتنسيق كتلة القائمة.

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

      Ul (list-style: none؛ / * إزالة علامات القائمة * / margin: 0؛ / * إزالة الهوامش العلوية والسفلية لـ 1em * / padding-left: 0 ؛ / * إزالة المساحة المتروكة اليسرى البالغة 40 بكسل * /) أ (زخرفة النص: لا شيء ؛ / * إزالة تسطير نص الرابط * /)

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

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

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

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

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

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

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

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

      1. قائمة متجاوبة مع تأثير تسطير عند التمرير فوق ارتباط import url ("https://fonts.googleapis.com/css؟family=Ubuntu+Condensed") ؛ .menu-main (list-style: none؛ margin: 40px 0 5px؛ padding: 25px 0 5px؛ text-align: center؛ background: white؛) .menu-main li (display: inline-block؛) .menu- main li: after (content: "|"؛ color: # 606060؛ display: inline-block؛ vertical-align: top؛) .menu-main li: last-child: after (content: none؛) .menu-main أ (زخرفة النص: لا شيء ؛ عائلة الخطوط: "Ubuntu Condensed" ، sans-serif ؛ تباعد الأحرف: 2 بكسل ؛ الموضع: نسبي ؛ المساحة السفلية: 20 بكسل ؛ الهامش: 0 34 بكسل 0 30 بكسل ؛ حجم الخط: 17 بكسل ؛ تحويل النص: أحرف كبيرة ؛ عرض: كتلة مضمنة ؛ انتقال: لون. 2 ثانية ؛). القائمة الرئيسية أ ،. القائمة الرئيسية أ: تمت زيارتها (اللون: # 9d999d ؛). القائمة الرئيسية أ.حالي ،. القائمة- main a: hover (color: # feb386؛). menu-main a: before،. menu-main a: after (content: ""؛ position: due؛ height: 4px؛ top: auto؛ right: 50٪؛ bottom : -5 بكسل ؛ يسار: 50٪ ؛ الخلفية: # feb386 ؛ انتقال: .8 ثانية ؛). القائمة الرئيسية أ: تحوم: قبل ،. القائمة الرئيسية. الحالية: قبل (يسار: 0 ؛). القائمة الرئيسية أ: hover: after، .menu-main .current: after (right: 0؛)media (max-width: 550px) (.menu-main (padding-top: 0؛) .menu-main li (display: block؛ ) .menu-main li: after (content: none؛). menu-main a (padding: 25px 0 20px؛ الهامش: 030 بكسل ؛ )) 2. قائمة مستجيبة لموقع الزفاف import url ("https://fonts.googleapis.com/css؟family=PT+Sans") ؛ .top-menu (position: النسبي ؛ الخلفية: #fff ؛ box-shadow: inset 0 0 10px #ccc؛) .top-menu: before، .top-menu: after (content: ""؛ display: block؛ height : 1 بكسل ؛ الحد الأعلى: 3 بكسل صلب # 575350 ؛ الحد السفلي: 1 بكسل صلب # 575350 ؛ الهامش السفلي: 2 بكسل ؛) أعلى القائمة: بعد (الحد السفلي: 3 بكسل صلب # 575350 ؛ الحد العلوي: 1 بكسل صلب # 575350؛ box-shadow: 0 2px 7px #ccc؛ margin-top: 2px؛). menu-main (list-style: none؛ padding: 0 30px؛ margin: 0؛ font-size: 18px؛ text-align: المركز ؛ الموضع: نسبي ؛). القائمة الرئيسية: قبل ،. القائمة الرئيسية: بعد (المحتوى: "25C8" ؛ ارتفاع السطر: 1 ؛ الموضع: مطلق ؛ أعلى: 50٪ ؛ التحويل: translateY (-50٪ ) ؛). menu-main: before (left: 15px؛). menu-main: after (right: 15px؛). menu-main li (display: inline-block؛ padding: 5px 0؛). (زخرفة النص: لا شيء ؛ العرض: كتلة مضمنة ؛ الهامش: 2 بكسل 5 بكسل ؛ المساحة المتروكة: 6 بكسل 15 بكسل ؛ مجموعة الخطوط: "PT Sans" ، sans-serif ؛ حجم الخط: 16 بكسل ؛ اللون: # 777777 ؛ الحد السفلي : شفاف صلب 1 بكسل ؛ الانتقال: 3 ثوانٍ خطي ؛ ). menu-main .current، .menu-main a: hover (border-radius: 3px؛ background: # f3ece1؛ color: # 313131؛ text-shadow: 0 1px 0 #fff؛ border-color: # c6c6c6؛) media (max-width: 500px) (.menu-main li (display: block؛)) 3. قائمة صدفي سريعة الاستجابة import url ("https://fonts.googleapis.com/css؟family=PT+Sans+Caption") ؛ .menu-main (list-style: none؛ padding: 0 30px؛ margin: 0؛ font-size: 18px؛ text-align: center؛ position: النسبي ؛ الخلفية: أبيض ؛). menu-main: after (content:: "" ؛ الموضع: مطلق ؛ العرض: 100٪ ؛ الارتفاع: 20 بكسل ؛ اليسار: 0 ؛ الأسفل: -20 بكسل ؛ الخلفية: التدرج الشعاعي (أبيض 0٪ ، أبيض 70٪ ، rgba (255،255،255،0) 70٪ ، rgba ( 255،255،255،0) 100٪) 0-10 بكسل ؛ حجم الخلفية: 20 بكسل 20 بكسل ؛ تكرار الخلفية: تكرار س ؛). القائمة الرئيسية لي (عرض: كتلة مضمنة ؛). القائمة الرئيسية أ (زخرفة النص: بلا ؛ عرض: كتلة مضمنة ؛ الهامش: 0 15 بكسل ؛ المساحة المتروكة: 10 بكسل 30 بكسل ؛ عائلة الخطوط: "PT Sans Caption" ، sans-serif ؛ اللون: # 777777 ؛ الانتقال: .3s خطي ؛ الموضع: نسبي ؛). -main a: before، .menu-main a: after (content: ""؛ position: due: top: calc (50٪ - 3px)؛ width: 6px؛ height: 6px؛ border-radius: 50٪؛ background: # F58262 ؛ العتامة: 0 ؛ الانتقال: .5s easy-in-out ؛). القائمة الرئيسية أ: قبل (يسار: 5 بكسل ؛). القائمة الرئيسية أ: بعد (يمين: 5 بكسل ؛). القائمة الرئيسية أ. Current: before، .menu-main a.current: after، .menu-main a: hover: before، .menu-main a: hover: after (opacity: 1؛). menu-main a.current، .menu- الرئيسية أ: تحوم (اللون: # F58262 ؛)media (أقصى عرض: 680 بكسل) (. menu-main li (display: block ؛)) 4. قائمة الشريط المستجيب import url ("https://fonts.googleapis.com/css؟family=PT+Sans+Caption") ؛ .top-menu (margin: 0 60px ؛ الموضع: نسبي ؛ الخلفية: # 5A394E ؛ box-shadow: 1px 0 0 rgba (255،255،255، .1) ، داخلي -1 بكسل 0 0 rgba (255،255،255 ، .1) ، أقحم 150 بكسل 0 150 بكسل -150 بكسل rgba (255،255،255 ، .12) ، أقحم -150 بكسل 0150 بكسل -150 بكسل rgba (255،255،255 ، .12) ؛) ؛ z-index: 2 ؛ اليسار: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: 3 بكسل ؛). القائمة العلوية: قبل (أعلى: 0 ؛ الحد السفلي: 1 بكسل متقطع rgba (255،255،255 ، .2) ؛). أعلى القائمة: بعد (أسفل: 0 ؛ أعلى الحدود: 1 بكسل متقطع rgba (255،255،255 ، .2) ؛ ) .menu-main (list-style: none؛ padding: 0؛ margin: 0؛ text-align: center؛). menu-main: before، .menu-main: after (content: ""؛ position :هير؛ العرض: 50 بكسل ؛ الارتفاع: 0 ؛ أعلى: 8 بكسل ؛ أعلى الحدود: 18 بكسل صلب # 5A394E ؛ الحد السفلي: 18 بكسل صلب # 5A394E ؛ التحويل: تدوير (360 درجة) ؛ مؤشر z: -1 ؛). قبل (يسار: -30 بكسل ؛ الحد الأيسر: 12 بكسل ثابت rgba (255 ، 255 ، 255 ، 0) ؛). القائمة الرئيسية: بعد (يمين: -30 بكسل ؛ الحد الأيمن: 12 بكسل صلب rgba (255 ، 255 ، 255 ، 0) ؛ ) .menu-main li (display: inline-block؛ margin-right: -4px؛). menu-main a (text-decoration: none؛ display: inline-block؛ padding: 15px 30px؛ font-family: "PT Sans Caption "، sans-serif ؛ اللون: أبيض ؛ الانتقال: .3s خطي ؛). القائمة الرئيسية a.current ،. menu-main a: hover (background: rgba (0،0،0، .2)؛) media (max-width: 680px) (.top-menu (margin: 0؛) .menu-main li (display: block؛ margin-right: 0؛) .menu-main: before، .menu-main: after (المحتوى: لا شيء ؛). menu-main a (display: block؛)) 5. قائمة سريعة الاستجابة مع شعار في المنتصف
      • عمل
      • عن
      • قصة
      • اتصال
      • محل
      • صالة عرض
      import url ("https://fonts.googleapis.com/css؟family=Arimo") ؛ .top-menu (position: النسبي ؛ الخلفية: rgba (34،34،34، .2)؛). menu-main (list-style: none؛ margin: 0؛ padding: 0؛) .menu-main: after (content: "" ؛ عرض: جدول ؛ مسح: كلاهما ؛) .left-item (float: left؛). right-item (float: right؛) .navbar-logo (موضع: مطلق ؛ يسار: 50٪ ؛ أعلى : 50٪؛ تحويل: ترجمة (-50٪، - 50٪)؛). menu-main a (زخرفة النص: لا شيء؛ عرض: كتلة؛ ارتفاع السطر: 80 بكسل؛ مساحة الحشو: 0 20 بكسل؛ حجم الخط: 18 بكسل ؛ تباعد الأحرف: 2 بكسل ؛ عائلة الخطوط: "Arimo" ، sans-serif ؛ وزن الخط: غامق ؛ اللون: أبيض ؛ الانتقال: .3s خطي ؛). menu-main a: hover (background: rgba (0، 0،0، .3)؛)media (max-width: 830px) (.menu-main (padding-top: 90px؛ text-align: center؛) .navbar-logo (موضع: مطلق ؛ يسار: 50٪ ؛ top: 10px؛ transform: translateX (-50٪)؛) .menu-main li (float: none؛ display: inline-block؛). menu-main a (line-height: normal؛ padding: 20px 15px؛ font -الحجم: 16 بكسل ؛))media (max-width: 630px) (.menu-main li (display: block؛)) 6. قائمة مستجيبة مع شعار على اليسار import url ("https://fonts.googleapis.com/css؟family=Arimo") ؛ .top-menu (background: rgba (255،255،255، .5)؛ box-shadow: 3px 0 7px rgba (0،0،0، .3)؛ padding: 20px؛) .top-menu: after (content: "" ؛ عرض: جدول ؛ مسح: كلاهما ؛) .navbar-logo (عرض: كتلة مضمنة ؛). القائمة الرئيسية (نمط القائمة: لا شيء ؛ الهامش: 0 ؛ الحشو: 0 ؛ عائم: يمين ؛). القائمة الرئيسية li (display: inline-block؛). menu-main a (زخرفة النص: لا شيء ؛ العرض: الكتلة ؛ الموضع: نسبي ؛ ارتفاع الخط: 61 بكسل ؛ المساحة اليسرى: 20 بكسل ؛ حجم الخط: 18 بكسل ؛ تباعد الأحرف : 2px؛ font-family: "Arimo"، sans-serif؛ font-weight: bold؛ color: # F73E24؛ Transition: .3s linear؛). menu-main a: before (content: ""؛ width: 9px؛ الارتفاع: 9 بكسل ؛ الخلفية: # F73E24 ؛ الموضع: مطلق ؛ اليسار: 50٪ ؛ التحويل: تدوير (45 درجة) translateX (6.5 بكسل) ؛ التعتيم: 0 ؛ الانتقال: .3s خطي ؛). القائمة الرئيسية أ: التمرير: قبل (عتامة: 1 ؛)media (max-width: 660px) (.menu-main (float: none؛ padding-top: 20px؛) .top-list (text-align: center؛ padding: 20px 0 0 0؛ ) .menu-main a (padding: 0 10px؛). menu-main a: before (transform: rotate (45deg) translateX (-6px)؛))media (max-width: 600px) (.menu-main li (العرض محجوب؛) )