Cum se construiește un meniu în afara canvasului cu CSS și o atingere a JavaScript

În acest tutorial vom trece printr-o metodă simplă dar eficientă pentru crearea unui meniu în afara canvasului cu HTML, CSS și JavaScript.

Pentru a obține o idee inițială despre ceea ce vom construi, aruncăm o privire la demo-ul CodePen (consultați versiunea mai mare pentru o experiență mai bună):

Notă: Acest tutorial nu se va concentra pe modul de a face meniul off-panvas accesibil sau receptiv, astfel încât acestea ar fi cu siguranță valabile pașii următori.

1. Începeți cu marcarea

Marcajul nostru constă din două elemente de înfășurare:

• .top-banner element
• .top-nav element

Iată codul HTML:

2. În continuare avem nevoie de CSS

Cu pregătirea pentru marcare, să examinăm cele mai importante stiluri necesare pentru meniul nostru.

Notă: De dragul lizibilității, acest cod CSS nu este optimizat - veți observa proprietăți duplicate pe care ați putea dori să le eliminați în versiunea proprie.

Styling elementul de banner de sus

 .top-banner elementul arata astfel:

În ceea ce privește stilurile sale, facem următoarele:

• Setați lățimea sa egală cu lățimea ferestrei minus lățimea ferestrei .Meniul împachetarea element.
  
• Setați înălțimea sa egală cu înălțimea ferestrei.
• Definiți-l ca un container flexibil. Aceasta va forța suprapunerea să acopere înălțimea totală a părintelui.
• Utilizați flexbox pentru a centura vertical conținutul suprapusului.

Iată stilurile de care avem nevoie pentru a realiza toate acestea: 

.top-banner afișare: flex; lățime: calc (100% - 150px); înălțime: 100vh; transform: translateX (150px); background: url (IMAGE_PATH) centru de repetare / fixare;  .top-banner-overlay afișare: flex; direcție flexibilă: coloană; justify-content: centru; lățime: 350px; padding: 20px; tranziție: transformare .7s; culoare albă; fundal: rgba (0, 0, 0, .7); 

Styling elementul de sus-nav

.top-nav elementul arata astfel:

În acest caz, vom face următoarele:

• Specificați elementele copilului direct ca elemente fixe fixate care acoperă înălțimea ferestrei.
• Utilizați flexbox pentru alinierea verticală .-Meniu fix element.
• Ascundeți .Meniul împachetarea element implicit. Pentru a face acest lucru, nu îi acordăm o valoare de proprietate, cum ar fi afișare: niciuna. De fapt, folosim Traduceți() funcția de mutare este 200px spre stânga. Rețineți că lățimea elementului este de 350 px, astfel încât o parte din acesta este încă în fereastra de vizualizare. Cu toate acestea, nu este vizibil deoarece elementul este poziționat sub .-Meniu fix element.
• Ascundeți lista de meniuri.

Aruncați o privire asupra stilurilor CSS corespunzătoare:

.top-nav .menu-wrapper poziție: fix; top: 0; stânga: 0; fund: 0; lățime: 350px; padding: 20px; transformă: translateX (-200px); tranziție: transformare .7s; fundal: # B1FFE5;  .top-nav .menu-wrapper .menu opacitate: 0; tranziție: opacitate .4s;  .top-nav .fixed-menu poziție: fix; top: 0; stânga: 0; fund: 0; afișaj: flex; direcție flexibilă: coloană; lățime: 150px; padding: 20px; fundal: acvamarină; 

3. Acum pentru unele JavaScript

În acest moment, vom folosi un cod JavaScript simplu pentru a manipula starea meniului off-canvas. 

Să descriem acțiunile necesare:

• Cand .meniu deschis este apăsat butonul, meniul ar trebui să apară cu un efect frumos de alunecare și suprapunerea ar trebui să fie împinsă simultan spre dreapta. Opțional, putem face mai multe lucruri în această stare. În exemplul nostru, adăugăm o umbră cutie la ::inainte de pseudo-element al suprapunerii și dezvăluie lista de meniuri utilizând un efect de decolorare.
• Cand .meniu close butonul trebuie să dispară cu un efect frumos de alunecare și suprapunerea ar trebui să fie împinsă simultan în stânga.

Iată codul JavaScript care implementează acest comportament:

const meniuOpen = document.querySelector (". top-nav .menu-deschis"); const meniuClose = document.querySelector ("top-nav .menu-close"); const menuWrapper = document.querySelector ("top-nav .menu-wrapper"); const topBannerOverlay = document.querySelector ("top-banner-overlay"); funcția toggleMenu () menuOpen.addEventListener ("click", () => menuWrapper.classList.add ("este deschis"); topBannerOverlay.classList.add ("este mutat"); menuClose.addEventListener ("click", () => menuWrapper.classList.remove ("este deschis"); topBannerOverlay.classList.remove ("este mutat"););  toggleMenu ();

Și mai jos veți găsi stilurile CSS asociate:

.top-banner-overlay.is-a mutat transform: translateX (350px);  .top-banner-overlay.is-mutat :: înainte de content: "; position: absolute; top: 0; bottom: 0; right: 100%; .top-nav .menu-wrapper.is-a deschis transform: translateX (150px); .top-nav .menu-wrapper.is-deschise .menu opacity: 1; transition-delay: .6s;

4. Suport pentru browsere

Această demonstrație va funcționa bine numai pe browserele desktop. Dispozitivele mobile vor necesita un alt aspect al paginii, dar acest lucru depășește scopul acestui tutorial. Ca de obicei, folosim Babel pentru a compila codul ES6 până la ES5.

Singura problemă mică pe care am întâlnit-o în timpul testării este schimbarea redării textului care se întâmplă atunci când suprapunerea este animată. Deși am încercat mai multe abordări propuse în diferite filete de suprapunere Stack, nu am reușit să găsesc o soluție directă pentru toate sistemele de operare și browserele. Deci, păstrați-vă în minte că s-ar putea vedea mici probleme de randare font ca suprapunerea este animat.

Concluzie

Asta e, oameni buni! Am reușit să construim un meniu util în afara canvasului cu un cod relativ simplu. 

Sper că v-ați bucurat de rezultatul final și îl veți folosi ca pe o sursă de inspirație pentru crearea unor meniuri chiar mai puternice în afara pânzei. Și, bineînțeles, dacă construiți ceva, nu uitați să le împărtășiți cu noi!

Aflați mai multe tehnici Off-Canvas