قبل بضعة أيام ، شاهدت مقطع فيديو لرئيس أجنبي باستخدام HTML + CSS لتنفيذ هامبورغيرمينو. كنت أشاهد ساس مؤخرًا ، لذلك استخدمت ساس لتنفيذها.
التقديم النهائي على النحو التالي:
بنية الملف في VS Code (يتم استخدام SASS EASY لتجميع ملفات SCSS):
بنية الصفحة (index.html):
_config.scss:
/*قم بتعيين اللون و Max-Width*/$-color pract: RGBA (13،110،139 ، .75) ؛ $ تراكب اللون: RGBA (24،39،51 ، .85) ؛ $ max-width: 980px ؛/*تعيين لون النصي ، إذا كان لون الخلفية ضوراً ، واضحة إلى أسود ، على خلاف ذلك. EF (Lightness ($ color)> 70) {Return #333 ؛ } else {return #fff ؛ }}/*mixer ، اضبط لون الخلفية ولون النص*/@mixin set-background ($ color) {background-color: $ color ؛ اللون: Set-Text-Color ($ Color) ؛}style.scss:
import '_config' ؛*{margin: 0 ؛ Padding: 0 ؛}. Container {Max-Width: $ max-Width ؛ الهامش: 0 Auto ؛}/*اضبط لون الخلفية للعرض ، واستخدم الفئة الزائفة لإضافة صورة خلفية ، وتعيين مؤشر z لصورة الخلفية على -1 (سيتم عرض هذه الصورة في الداخل) ؛ ثم من أجل السماح للنص بعرض في الوسط ، استخدم Flex Layout*/. عرض {الموضع: النسبي ؛ الارتفاع: 100VH ؛ خلفية اللون: $ primary-color ؛ &: قبل {content: '' ؛ الموقف: مطلق ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ الخلفية: url ('../ IMG/Pexels-Photo-533923.jpeg') مركز/غطاء لا يكرر ؛ Z -index: -1 ؛ } & -inner {display: flex ؛ الارتفاع: 100 ٪ الاتجاه المرن: العمود ؛ تبرير المحتوى: المركز ؛ محاذاة عناصر: المركز ؛ محاذاة النص: المركز ؛ اللون: #fff ؛ الخط الثقيل: 100 ؛ H1 {font-size: 4rem ؛ الحشو: 1.2REM 0 ؛ } p {White-Space: pre-wrap ؛ حجم الخط: 1.6REM ؛ الحشو: 0.85REM 0 ؛ } .btn {padding: .65rem 1rem ؛ /*استخدم الخلاط لتعيين لون الخلفية ولون النص*/ @include setground (Lighten ($ primary-color ، 30 ٪)) ؛ الحدود: لا شيء ؛ الحدود: 1px الصلبة $ اللون الأولية ؛ الحدود الحدودية: 5px ؛ تدمير النص: لا شيء ؛ الخطوط العريضة: لا شيء ؛ الانتقال: جميع .2s سهولة .1s ؛ /* عند استخدام الزر الذي يتم استخدامه لضبط تأثير التحجيم باستخدام مقياس CSS3*/ &: Hover {inClude Set-Background (Lighten ($ Overlay-Color ، 30 ٪)) ؛ اللون الحدودي: Lighten ($ Overlay-Color ، 25 ٪) ؛ التحويل: مقياس (.98) ؛ }}}}}/*المبدأ: قم بتغيير النمط بما إذا كان يجب القيام مربع الاختيار في أو لا (اضبط شفافية مربع الاختيار على 0 ، ويتم تعيين z-index أعلى). عند النقر ، ستظهر قائمة. انقر مرة أخرى ، وستختفي القائمة *// *تم تعيينه ثابتًا في القائمة ، بحيث تملأ العرض الشاشة بأكملها ؛ في الوقت نفسه ، اضبط عتامة مربع الاختيار على 0 ؛ لاحظ أيضًا أنك تحتاج إلى تعيين مؤشر z من مربع الاختيار على 2 ، لأن Z-index من الهامبرغر يتم ضبطه على 1 ، وإلا فلن تعمل النقر*/. القائمة wrap {الموضع: ثابت ؛ اليسار: 0 ؛ أعلى: 0 ؛ Z-index: 1 ؛ .Toggle {الموضع: مطلق ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ العتامة: 0 ؛ Z-index: 2 ؛ المؤشر: مؤشر. /*عند التحقق من مربع الاختيار ، قم بتعيين تأثير الدوران للفئة DIV والفئة الزائفة في Hamburger*/ &: checked ~ .hamburger> div {transform: rotate (135deg) ؛ /*تدور الفئة الزائفة فعليًا 225 درجة ، وتحتاج إلى ضبط الجزء العلوي إلى 0 ، وإلا فإن طول المكون ❌ غير متسق*/ &: أعلى: 0 ؛ }} / * عند تحديد مربع الاختيار ، سيتم أيضًا تعيين تأثير دوران * / &: يتم التحقق منه: Hover ~ .hamburger> div {transform: rotate (235deg) ؛ } &: تم فحص ~ .menu {الرؤية: مرئي ؛ > div {transform: scale (1) ؛ > div {عتامة: 1 ؛ }}}}}} .hamburger {الموضع: Absolute ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: 60px ؛ الارتفاع: 60px ؛ الحشو: 1rem ؛ خلفية اللون: $ primary-color ؛ حجم الصناديق: صندوق الحدود ؛ العرض: فليكس. الاتجاه المرن: العمود ؛ تبرير المحتوى: المركز ؛ محاذاة عناصر: المركز ؛ محاذاة النص: المركز ؛ Z-index: 1 ؛ /*Div يولد الخط الأفقي الأوسط ، ثم يضع الموضع كنسبي ، ثم يعينه من الفئة الزائفة إلى المطلقة ، ويعوضه فيما يتعلق بـ Div*/> div {الموضع: النسبي ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: 2px ؛ خلفية اللون: #fff ؛ الانتقال: كل .7s سهولة ؛ /*استخدم الفئة الزائفة لإنشاء الخطوط الأفقية الأولى والثالثة*/ &: قبل ، و: بعد {content: '' ؛ الموقف: مطلق ؛ اليسار: 0 ؛ أعلى: -10px ؛ العرض: 100 ٪ ؛ الارتفاع: 2px ؛ لون الخلفية: الوراثة ؛ } &: بعد {top: 10px ؛ }}} /*قم بتعيين نمط القائمة المحددة* / /*تعيين القائمة إلى الثابت ، مع عرض وارتفاع 100 ٪ ، ثم تعيين الشاشة على الثني ، وإلا فلن تظهر القائمة في الوسط* / .menu {الموضع: ثابت ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ الفائض: مخفي. العرض: فليكس. تبرير المحتوى: المركز ؛ محاذاة عناصر: المركز ؛ الرؤية: مخفية ؛ /*قم بتعيين القائمة على غير مرئي ، ثم قم بتعيينها على مرئي عند تحديد مربع الاختيار*/ Transition: All .75S Ease ؛ > div {inClude set-background ($ overlay-color) ؛ العرض: 200VW ؛ الارتفاع: 200vh ؛ الفائض: مخفي. الحدود الحدودية: 50 ٪ ؛ العرض: فليكس. تبرير المحتوى: المركز ؛ محاذاة عناصر: المركز ؛ محاذاة النص: المركز ؛ التحويل: مقياس (0) ؛ الانتقال: كل .4s سهولة ؛ > div {max-width: 90VW ؛ أقصى ارتفاع: 90VH ؛ العتامة: 0 ؛ الانتقال: كل .4s سهولة ؛ > ul> li {list-style: none ؛ حجم الخط: 2Rem ؛ الحشو: .85REM 0 ؛ تحويل النص: الكبير. التحويل: Skew (-5deg ، -5deg) تدوير (5deg) ؛/*تعيين TILT TILT*/ A {color: errant ؛ تدمير النص: لا شيء ؛ الانتقال: اللون .4s سهولة ؛ }}}}}}}}هذه هي المقالة حول HTML+SASS لتنفيذ Hambergurmenu (قائمة على غرار الهامبرغر). لمزيد من HTML+SASS تنفيذ Hambergurmenu ، يرجى البحث عن المقالات السابقة من Wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!