ไม่กี่วันที่ผ่านมาฉันดูวิดีโอของเจ้านายต่างประเทศโดยใช้ HTML + CSS เพื่อใช้ Hamburgermenu ฉันกำลังดู Sass เมื่อเร็ว ๆ นี้ดังนั้นฉันจึงใช้ Sass เพื่อนำไปใช้
การแสดงผลสุดท้ายมีดังนี้:
โครงสร้างไฟล์ในรหัส VS (SASS Easy ใช้ในการรวบรวมไฟล์ SCSS):
โครงสร้างหน้า (index.html):
_config.scss:
/*ตั้งค่าสีและความกว้างสูงสุด*/$ primary-color: RGBA (13,110,139, .75); $ Overlay-Color: RGBA (24,39,51, .85); $ Max-Width: 980px;/*ตั้งค่าสีพื้นหลัง @if (Lightness ($ color)> 70) {@return #333; } @else {@return #fff; }}/*มิกเซอร์ตั้งค่าสีพื้นหลังและสีข้อความ*/@mixin set-background ($ color) {พื้นหลังสี: $ color; สี: ชุดข้อความสี ($ color);}style.scss:
@Import '_config';*{margin: 0; Padding: 0;}. คอนเทนเนอร์ {Max-Width: $ Max-Width; ระยะขอบ: 0 auto;}/*ตั้งค่าสีพื้นหลังสำหรับ showcase ใช้คลาสหลอกเพื่อเพิ่มภาพพื้นหลังและตั้งค่า z-index ของภาพพื้นหลังเป็น -1 (ภาพนี้จะปรากฏภายใน); จากนั้นเพื่อให้ข้อความอยู่ตรงกลางให้ใช้เลย์เอาต์แบบยืดหยุ่น*/. Showcase {ตำแหน่ง: สัมพัทธ์; ความสูง: 100VH; พื้นหลังสี: $ สีปฐมภูมิ; &: ก่อน {เนื้อหา: ''; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%; ความเป็นมา: url ('../ img/pexels-photo-533923.jpeg') ศูนย์กลาง/หน้าปกที่ไม่มีการทำซ้ำ; z -index: -1; } & -inner {display: flex; ความสูง: 100%; Flex-Direction: คอลัมน์; Justify-Content: Center; ALIGN-ATEMS: ศูนย์; TEXT-ALIGN: CENTER; สี: #FFF; Font-Weight: 100; H1 {ขนาดตัวอักษร: 4REM; Padding: 1.2rem 0; } p {space สีขาว: pre-wrap; ขนาดตัวอักษร: 1.6Rem; Padding: 0.85REM 0; } .Btn {padding: .65REM 1REM; /*ใช้เครื่องผสมเพื่อตั้งค่าสีพื้นหลังและสีข้อความ*/ @include set-background (lighten ($ สีปฐมภูมิ, 30%)); ชายแดน: ไม่มี; ชายแดน: 1PX SOLID $ สีปฐมภูมิ; แนวชายแดน: 5px; การตกแต่งข้อความ: ไม่มี; โครงร่าง: ไม่มี; การเปลี่ยนแปลง:. 2S ทั้งหมดง่าย. 1s; /* เมื่อปุ่มโฮเวอร์ถูกใช้เพื่อตั้งค่าเอฟเฟกต์การปรับสเกลโดยใช้สเกลของ CSS3*/ &: Hover {@include set-background (lighten ($ overlay-color, 30%)); สีชายแดน: เบา ($ ซ้อนทับสี, 25%); แปลง: สเกล (.98); }}}}}/*หลักการ: เปลี่ยนรูปแบบว่าจะทำเครื่องหมายในหรือไม่ (ตั้งค่าความโปร่งใสในช่องทำเครื่องหมายเป็น 0 และ z-index ถูกตั้งค่าสูงกว่า) เมื่อคลิกเมนูจะปรากฏขึ้น คลิกอีกครั้งและเมนูจะหายไป *// *ตั้งค่าการแก้ไขสำหรับเมนู wrap เพื่อให้ showcase จะเติมเต็มทั้งหน้าจอ; ในเวลาเดียวกันตั้งค่าความทึบของช่องทำเครื่องหมายเป็น 0; นอกจากนี้โปรดทราบว่าคุณต้องตั้งค่าดัชนี z ของช่องทำเครื่องหมายเป็น 2 เนื่องจาก z-index ของแฮมเบอร์เกอร์ถูกตั้งค่าเป็น 1 มิฉะนั้นการคลิกจะไม่ทำงาน*/. เมนู wrap {ตำแหน่ง: แก้ไข; ซ้าย: 0; ด้านบน: 0; z-index: 1; .toggle {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 50px; ความสูง: 50px; ความทึบ: 0; z-index: 2; เคอร์เซอร์: ตัวชี้; /*เมื่อมีการตรวจสอบช่องทำเครื่องหมายให้ตั้งค่าเอฟเฟกต์การหมุนของ DIV และ Pseudo-Class ใน Hamburger*/ &: ตรวจสอบ ~ .hamburger> div {transform: หมุน (135deg); /*ระดับหลอกจริงหมุนได้ 225 องศาและคุณต้องตั้งค่าสูงสุดเป็น 0 มิฉะนั้นความยาวของ❌ที่เกิดขึ้นไม่สอดคล้องกัน*/ &: ก่อนหน้า &: หลังจาก {transform: หมุน (90deg); ด้านบน: 0; }} / * เมื่อเลือกช่องทำเครื่องหมายเอฟเฟกต์การหมุนจะถูกตั้งค่า * / &: ตรวจสอบ: hover ~ .hamburger> div {transform: rotate (235deg); } &: ตรวจสอบ ~ .menu {การมองเห็น: มองเห็นได้; > div {transform: scale (1); > div {ความทึบ: 1; }}}}}} .hamburger {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 60px; ความสูง: 60px; Padding: 1REM; พื้นหลังสี: $ สีปฐมภูมิ; การปรับขนาดกล่อง: กล่องชายแดน; จอแสดงผล: Flex; Flex-Direction: คอลัมน์; Justify-Content: Center; ALIGN-ATEMS: ศูนย์; TEXT-ALIGN: CENTER; z-index: 1; /*div สร้างเส้นแนวนอนกลางจากนั้นตั้งค่าตำแหน่งเป็นญาติจากนั้นตั้งค่าระดับหลอกให้เป็นสัมบูรณ์และชดเชยด้วยความเคารพต่อ div*/> div {ตำแหน่ง: ญาติ; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 2px; พื้นหลังสี: #FFF; การเปลี่ยนแปลง: ความสะดวก. 7S ทั้งหมด; /*ใช้ pseudo-class เพื่อสร้างเส้นแนวนอนที่หนึ่งและสาม*/ &: ก่อนหน้า &: หลังจาก {เนื้อหา: ''; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: -10px; ความกว้าง: 100%; ความสูง: 2px; พื้นหลังสี: สืบทอด; } &: หลังจาก {top: 10px; }}} /*ตั้งค่าสไตล์ของเมนูเมนูที่เลือก* / /*ตั้งค่าเมนูให้คงที่ด้วยความกว้างและความสูง 100%จากนั้นตั้งค่าแสดงเป็น Flex มิฉะนั้นเมนูจะไม่ปรากฏในกลาง* / .menu {ตำแหน่ง: แก้ไข; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%; ล้น: ซ่อน; จอแสดงผล: Flex; Justify-Content: Center; ALIGN-ATEMS: ศูนย์; ทัศนวิสัย: ซ่อน; /*ตั้งค่าเมนูให้มองไม่เห็นจากนั้นตั้งค่าเป็นมองเห็นได้เมื่อเลือกช่องทำเครื่องหมาย*/ การเปลี่ยนแปลง:. 75S ทั้งหมดง่าย; > div {@include set-background ($ overlay-color); ความกว้าง: 200VW; ความสูง: 200VH; ล้น: ซ่อน; แนวชายแดน: 50%; จอแสดงผล: Flex; Justify-Content: Center; ALIGN-ATEMS: ศูนย์; TEXT-ALIGN: CENTER; แปลง: สเกล (0); การเปลี่ยนแปลง: ความสะดวก. 4S ทั้งหมด; > div {max-width: 90vw; สูงสุด-สูง: 90VH; ความทึบ: 0; การเปลี่ยนแปลง: ความสะดวก. 4S ทั้งหมด; > ul> li {list-style: none; ขนาดฟอนต์: 2REM; Padding: .85REM 0; การเปลี่ยนข้อความ: ตัวพิมพ์ใหญ่; แปลง: SKEW (-5DEG, -5DEG) หมุน (5DEG);/*ตั้งค่าข้อความเอียง*/ a {สี: สืบทอด; การตกแต่งข้อความ: ไม่มี; การเปลี่ยนแปลง: สี. 4S ง่ายดาย; -นี่คือบทความเกี่ยวกับ HTML+SASS ที่ใช้ Hambergurmenu (เมนูสไตล์แฮมเบอร์เกอร์) สำหรับ HTML+SASS ที่เกี่ยวข้องกับการใช้ Hambergurmenu เพิ่มเติมโปรดค้นหาบทความก่อนหน้าจาก Wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!