Beberapa hari yang lalu, saya menonton video bos asing menggunakan HTML + CSS untuk mengimplementasikan Hamburgermenu. Saya menonton Sass baru -baru ini, jadi saya menggunakan Sass untuk mengimplementasikannya.
Render terakhir adalah sebagai berikut:
Struktur file dalam kode VS (sass mudah digunakan untuk mengkompilasi file SCSS):
Struktur halaman (index.html):
_config.scss:
/*Atur warna dan max-width*/$ primer-color: rgba (13.110.139, .75); $ overlay-color: rgba (24,39,51, .85); $ max-width: 980px;/atur warna teks, jika warna latar belakangnya terang, ditetapkan ke hitam, sebaliknya ditetapkan ke White*Fungsi@Fungsi@ @if (lightness ($ color)> 70) {@return #333; } @else {@return #fff; }}/*Mixer, atur warna latar belakang dan warna teks*/@mixin set-background ($ color) {latar belakang-warna: $ color; Warna: set-text-color ($ color);}style.scss:
@import '_config';*{margin: 0; padding: 0;}. Container {max-width: $ max-width; margin: 0 auto;}/*Atur warna latar belakang untuk showcase, gunakan kelas pseudo untuk menambahkan gambar latar belakang, dan atur indeks z dari gambar latar belakang ke -1 (gambar ini akan ditampilkan di dalam); dan kemudian untuk membiarkan teks ditampilkan di tengah, gunakan Flex Layout*/. Showcase {position: relatif; Tinggi: 100VH; latar belakang-warna: $-warna primer; &: sebelum {konten: ''; Posisi: Absolute; Kiri: 0; TOP: 0; Lebar: 100%; Tinggi: 100%; Latar belakang: url ('../ img/pexels-photo-533923.jpeg') no-rePeat center/cover; z -index: -1; } & -inner {display: flex; Tinggi: 100%; Direksi fleksibel: kolom; Justify-Content: Center; Align-items: Center; Teks-Align: tengah; Warna: #fff; Font-Weight: 100; h1 {font-size: 4rem; Padding: 1.2rem 0; } p {White-space: pre-wrap; Ukuran font: 1.6rem; Padding: 0.85rem 0; } .btn {padding: .65rem 1rem; /*Gunakan mixer untuk mengatur warna latar belakang dan warna teks*/ @include set-background (lighten ($ primer-color, 30%)); Perbatasan: Tidak Ada; Perbatasan: 1px solid $-warna primer; Border-Radius: 5px; Dekorasi Teks: Tidak Ada; Garis Besar: Tidak Ada; Transisi: semua .2 yang mudah .1; /* Ketika tombol melayang digunakan untuk mengatur efek penskalaan menggunakan skala CSS3*/ &: hover {@include set-background (lighten ($ overlay-color, 30%)); Border-color: Lighten ($ overlay-color, 25%); Transform: Skala (.98); }}}}}/*Prinsip: Ubah gaya dengan apakah akan melakukan kotak centang atau tidak (atur transparansi kotak centang ke 0, dan indeks z ditetapkan lebih tinggi). Saat mengklik, menu akan muncul. Klik lagi, dan menu akan menghilang *// *Setel diperbaiki untuk menu-bungkus, sehingga showcase akan mengisi seluruh layar; Pada saat yang sama, atur opacity kotak centang ke 0; Perhatikan juga bahwa Anda perlu mengatur kotak centang Z-indeks ke 2, karena z-index hamburger diatur ke 1, jika tidak klik tidak akan berfungsi*/. Menu-wrap {position: diperbaiki; Kiri: 0; TOP: 0; z-index: 1; .toggle {position: absolute; Kiri: 0; TOP: 0; Lebar: 50px; Tinggi: 50px; Opacity: 0; z-index: 2; kursor: pointer; /*Ketika kotak centang dicentang, atur efek rotasi dari div dan kelas pseudo di hamburger*/ &: diperiksa ~ .hamburger> div {transform: rotate (135deg); /*Kelas pseudo sebenarnya berputar 225 derajat, dan Anda perlu mengatur bagian atas ke 0, jika tidak panjang yang terbentuk ❌ tidak konsisten*/ &: sebelum, &: setelah {transformasi: putar (90deg); TOP: 0; }} / * Ketika kotak centang dipilih, efek rotasi juga akan diatur * / &: Diperiksa: hover ~ .hamburger> div {transform: rotate (235deg); } &: diperiksa ~ .menu {visibilitas: terlihat; > Div {transform: skala (1); > Div {opacity: 1; }}}}}} .hamburger {position: absolute; Kiri: 0; TOP: 0; Lebar: 60px; Tinggi: 60px; padding: 1rem; latar belakang-warna: $-warna primer; Ukuran kotak: kotak perbatasan; Tampilan: Flex; Direksi fleksibel: kolom; Justify-Content: Center; Align-items: Center; Teks-Align: tengah; z-index: 1; /*Div menghasilkan garis horizontal tengah, kemudian menetapkan posisi sebagai relatif, dan kemudian mengatur kelas semu menjadi absolut, dan mengimbanginya sehubungan dengan div*/> div {position: relatif; Kiri: 0; TOP: 0; Lebar: 100%; Tinggi: 2px; Latar Belakang-Color: #FFF; Transisi: Semua .7 Kemudahan; /*Gunakan kelas pseudo untuk menghasilkan garis horizontal pertama dan ketiga*/ &: sebelum, &: setelah {konten: ''; Posisi: Absolute; Kiri: 0; Atas: -10px; Lebar: 100%; Tinggi: 2px; latar belakang-warna: warisan; } &: setelah {top: 10px; }}} /*Atur gaya menu yang dipilih* / /*Set menu untuk diperbaiki, dengan lebar dan tinggi 100%, dan kemudian atur tampilan untuk melenturkan, jika tidak menu tidak akan muncul di tengah* / .menu {position: diperbaiki; Kiri: 0; TOP: 0; Lebar: 100%; Tinggi: 100%; meluap: tersembunyi; Tampilan: Flex; Justify-Content: Center; Align-items: Center; Visibilitas: Tersembunyi; /*Atur menu ke Invisible, dan kemudian atur ke Visible ketika kotak centang dipilih*/ transisi: semua .75S mudah; > Div {@include set-background ($ overlay-color); Lebar: 200VW; Tinggi: 200VH; meluap: tersembunyi; Border-Radius: 50%; Tampilan: Flex; Justify-Content: Center; Align-items: Center; Teks-Align: tengah; Transform: Skala (0); Transisi: semua kemudahan .4; > Div {Max-Width: 90VW; Max-Height: 90VH; Opacity: 0; Transisi: semua kemudahan .4; > Ul> li {List-style: None; font-size: 2rem; padding: .85rem 0; Teks-transform: huruf besar; Transform: Skew (-5deg, -5deg) Rotate (5deg);/*Set Text Tilt*/ a {Color: wolor; Dekorasi Teks: Tidak Ada; Transisi: Warna .4 Kemudahan; }}}}}}}}Ini adalah artikel tentang HTML+Sass yang menerapkan Hambergurmenu (menu gaya hamburger). Untuk HTML+Sass yang lebih terkait dengan mengimplementasikan Hambergurmenu, silakan cari artikel sebelumnya dari wulin.com atau terus menelusuri artikel terkait di bawah ini. Saya harap semua orang akan mendukung wulin.com di masa depan!