Menu Mendedahkan oleh Halaman Putar Animasi

Kaedah reka bentuk menu laman web adalah pelbagai. Sesetengah menu sentiasa kelihatan dan semua pilihan dipaparkan secara langsung; Yang lain tersembunyi dan perlu diklik untuk berkembang. Cara menu tersembunyi diperluas adalah berbeza: beberapa slaid keluar dan menutup kandungan, ada yang menolak kandungannya, dan ada yang menggunakan paparan skrin penuh.

Setiap kaedah mempunyai kelebihan dan kekurangannya, dan pilihan terbaik bergantung kepada senario aplikasi tertentu. Saya secara peribadi lebih suka menu slaid, dan pastinya tidak semua situasi terpakai. Tetapi jika menu dan menu yang mudah diakses, menu slaid sukar untuk dilampaui.

Walau bagaimanapun, menu slaid sering bertentangan dengan kandungan halaman. Ia sekurang -kurangnya akan menyekat kandungan, dan paling teruk ia akan mengeluarkan kandungan sepenuhnya dari UI.

Saya mencuba pendekatan yang berbeza yang menggabungkan ketahanan dan kebolehgunaan menu lokasi tetap, serta menu slaid tersembunyi yang tersembunyi tanpa mengeluarkan pengguna dari kandungan semasa.

Inilah kaedah pelaksanaan saya.

Suis suis

Kami sedang membina menu dengan dua negeri (di atas dan dekat) dan beralih antara kedua -dua. Di sinilah helah kotak semak dimainkan. Ia sempurna kerana kotak semak mempunyai dua keadaan interaktif yang biasa -diperiksa dan tidak terkawal (dan negeri -negeri yang tidak menentu) - yang boleh digunakan untuk mencetuskan negeri -negeri tersebut.

Kotak semak tersembunyi di bawah ikon menu dan diletakkan menggunakan CSS supaya tidak dapat dilihat walaupun pengguna berinteraksi dengannya. Memilih kotak semak (atau, ahem , ikon menu) akan memaparkan menu. Nyahtanda menyembunyikannya. Itu mudah. Kami tidak memerlukan JavaScript untuk melakukan kerja!

Sudah tentu, helah kotak semak bukan satu -satunya cara, dan jika anda mahu menukar kelas menggunakan JavaScript untuk membuka dan menutup menu, itu benar -benar OK.

Yang penting, kotak semak harus di hadapan kandungan utama dalam kod sumber, kerana akhirnya kami akan menulis pemilih :checked yang memerlukan pemilih saudara. Jika ini menyebabkan masalah susun atur, gunakan grid atau flexbox untuk susun atur, kerana mereka tidak ada kaitan dengan urutan kod sumber, seperti bagaimana saya dapat memanfaatkan kelebihannya untuk mengira CSS.

Gunakan harta CSS appearance untuk mengeluarkan gaya lalai kotak semak (ditambah oleh penyemak imbas), dan kemudian tambahkan elemen pseudo dengan ikon menu supaya pengguna tidak dapat melihat blok kotak semak.

Pertama, tag asas:

<input type="checkbox" id="menu-toggle">
<div id="page">
  
</div>
<div id="menu">
  
</div>

Dan CSS asas untuk helah kotak semak dan ikon menu:

 /* Sembunyikan kotak semak dan tetapkan semula gaya*/
input [type = "checkbox"] {
  penampilan: awal; /* Padam kotak*/
  Sempadan: 0; Margin: 0; Garis besar: Tiada; /* Keluarkan margin lalai, sempadan dan garis besar*/
  lebar: 30px; Ketinggian: 30px; /* Tetapkan saiz ikon menu*/
  Z-indeks: 1; /* Pastikan ia berada di atas*/
}

/* Ikon menu*/
input :: selepas {
  Kandungan: "\ 2255";
  paparan: blok;
  Font: 25pt/30px "Georgia";
  inden teks: 10px;
  Lebar: 100%; Ketinggian: 100%;
}

/* Kontena kandungan halaman*/
#page {
  Latar Belakang: URL ("earbuds.jpg") #ebebeb pusat/penutup;
  Lebar: 100%; Ketinggian: 100%;
}

Saya juga menambah gaya kandungan #page , yang akan menjadi imej latar belakang bersaiz penuh.

Kesan peralihan

Dua perkara berlaku apabila anda mengklik kawalan menu. Pertama, ikon menu ditukar kepada tanda "×", menunjukkan bahawa anda boleh mengkliknya untuk menutup menu. Oleh itu, apabila input berada dalam keadaan :checked , kami memilih ::after pseudo-elemen dimasukkan ke dalam kotak semak:

 input: diperiksa :: selepas {
  Kandungan: "\ 00d7"; /* Tukar ke tag "×"*/
  Warna: #ebebeb;
}

Kedua, kandungan utama (imej "fon kepala" kami) ditukar untuk memaparkan menu di bawah. Ia bergerak ke kanan, berputar dan mengecut, dan sudut kirinya menjadi sudut. Ini adalah untuk menjadikan kandungan kelihatan seperti ia ditolak, seperti pintu terbuka.

 Input: diperiksa ~ #page {
  Clip-Path: Polygon (0 8%, 100%0, 100%100%, 0 92%);
  Transform: TranslateX (40%) Skala Rotatey (10Deg) (0.8);
  Transform-Origin: Pusat Kanan;
  Peralihan: Semua .3s linear;
}

Saya menggunakan clip-path untuk menukar sudut imej.

Oleh kerana kita menggunakan peralihan ke transformasi, #page memerlukan nilai clip-path awal supaya ada sesuatu untuk membuat peralihan. Kami juga akan menambah peralihan pada #page kerana ia akan membolehkannya ditutup dengan lancar apabila ia dibuka.

 #page {
  Latar Belakang: URL ("earbuds.jpeg") #EBEBEB Center/Cover;
  Clip-Path: Polygon (0 0, 100% 0, 100% 100%, 0 100%);
  Peralihan: Semua .3s linear;
  Lebar: 100%; Ketinggian: 100%;
}

Pada dasarnya kami menyelesaikan reka bentuk dan kod teras. Apabila kotak semak tidak dicentang (dengan mengklik tanda "×"), penukaran pada imej alat dengar akan dibatalkan secara automatik dan ia akan dibawa kembali ke kedudukan tengah.

JavaScript kecil

Walaupun kita sudah mempunyai apa yang kita mahu, ada satu lagi perkara untuk meningkatkan pengalaman pengguna: Tutup menu apabila mengklik (atau mengklik) unsur #page . Dengan cara ini, pengguna boleh mengembalikan kandungan tanpa melihat atau menggunakan tag "×".

Oleh kerana ini adalah satu lagi cara untuk menyembunyikan menu, kita boleh menggunakan JavaScript. Bagaimana jika JavaScript dilumpuhkan atas sebab tertentu? Tidak menjadi masalah. Ia hanya satu peningkatan yang tidak akan menghalang menu daripada bekerja tanpa ia.

 Document.QuerySelector ("#Page"). AddEventListener ('klik', (e, checkbox = document.QuerySelector ('input')) => {
  jika (checkbox.checked) {checkbox.checked = false; e.Stoppropagation (); }
});

Tujuan tiga baris kod ini adalah untuk menambah pengendali acara klik ke elemen #page . Jika kotak semak berada di :checked , nyahtandakan kotak semak untuk menutup menu.

Kami telah melihat demo yang dibuat untuk reka bentuk menegak/menegak, tetapi ia berfungsi juga pada saiz skrin besar bergantung kepada apa yang kami gunakan.

Ini hanya satu cara atau cuba menu slaid biasa. Animasi membuka banyak kemungkinan, dan anda juga mungkin mempunyai puluhan idea lain. Malah, saya suka mendengar (atau lebih baik lagi, lihat) mereka, jadi sila kongsi!

Atas ialah kandungan terperinci Menu Mendedahkan oleh Halaman Putar Animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!