Cum se face o bară de meniu mobilă cu HTML, CSS și JavaScript

Fără îndoială, puteți crea un meniu mobil activabil utilizând cadre CSS precum TailWind sau BootStrap.

Dar care este conceptul din spatele acestuia? Și cum poți face unul de la zero fără a depinde de aceste cadre CSS?

Efectuarea de mai sus a dvs. vă oferă un control complet al personalizării. Așadar, fără alte atenții, iată cum să creați un meniu mobil activabil folosind limbajul de programare preferat.

Cum să vă creați meniul mobil activabil

Dacă nu ați făcut deja acest lucru, deschideți folderul de proiect și creați fișierele de proiect (HTML, CSS și JavaScript).

Mai jos, veți vedea exemple de cod de care aveți nevoie pentru toate cele trei tipuri. Și dacă nu ați făcut-o deja, luați în considerare descărcarea aceste aplicații pentru a învăța codul înainte de a citi mai departe.

Vom începe cu HTML:

 Creați trei divsuri pentru a reprezenta bara de meniu drop-down pe trei linii 








 Adăugați navigările aici 


Acasă
Despre
a lua legatura

CSS:

/ * Această delimitare a secțiunii este exclusiv în scopul tutorialului * /





instagram viewer


secțiune{ 
lățime: 800px;
înălțime: 600px;
marginea de sus: 50 px;
margine-stânga: 250px;
chenar: negru solid 1px;
fundal: # e6e3dc;
}
/ * poziționați containerul divs în DOM * /
# toggle-container {
afișaj: grilă;
lățime: fit-content;
margine-stânga: 720px;
marginea de sus: 10 px;
}
/ * Stivați cele trei divs una peste alta. Apoi setați o înălțime și o lățime pentru ei. * /
#unu, doi, trei{
fundal: negru;
lățime: 30 px;
înălțime: 3px;
marginea de sus: 5 px;
} 
.toggle-content {
display: none;
margine-stânga: 700px;
marginea de sus: 20 px;
}
.toggle-content a {
display: bloc;
decor-text: nici unul;
culoarea neagra;
dimensiunea fontului: 30 px;
}
.toggle-content a: hover {
Culoarea albastra;
}
/ * Afișați instanța clasei create de JavaScript în bloc * /
.afișat{
display: bloc;
}

Adăugați JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("clic", funcție () {
// Aplicați o intenție de clasă la fiecare navigare și setați afișajul pentru a comuta:
toggleContents.classList.toggle („afișat”);
});

Iată cum arată o ieșire de lucru când faceți clic pe bara de meniu:

Meniul este comutabil, astfel încât să faceți clic din nou pe bară - sau oriunde în interiorul paginii - ascunde navigările.

Legate de: Elemente de site web stil cu un gradient de fundal CSS

Este posibil ca browserul dvs. să nu accepte ascunderea conținutului atunci când faceți clic oriunde în pagina dvs. web. Puteți încerca să forțați acest lucru folosind o țintă de eveniment și o buclă JavaScript. Puteți face acest lucru adăugând următorul bloc de cod la JavaScript:

// Adăugați un eveniment de clic pe pagina dvs. web:
window.onclick = funcție (eveniment) {
// Direcționați evenimentul de clic pe bara de meniu pentru a permite corpului paginii web să îl urmărească:
if (! event.target.matches ('# toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Ascundeți navigațiile prin buclă prin fiecare dintre ele:
pentru (var i = 0; i var drop = dropdowns [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('afișaj');
}
}
}
}

Iată un rezumat al ceea ce tocmai ai făcut: ai creat trei linii folosind div etichetă HTML. Le-ați ajustat înălțimea și lățimea și le-ați poziționat în DOM. Apoi le-ați oferit acestora un eveniment de clic folosind JavaScript.

Legate de: Cum să creați un site web: pentru începători

Setați afișarea inițială a navigărilor dvs. la nici unul pentru a le ascunde atunci când pagina se încarcă. Apoi clic evenimentul de pe cele trei linii comută aceste navigări pe baza unei clase instantanee JavaScript (afișat). În cele din urmă, ați folosit această nouă clasă pentru a afișa navigările folosind CSS și JavaScript toggleContents metodă.

Legate de: Tendințe de design neumorf în HTML, CSS și JavaScript

Cu toate acestea, restul CSS depinde de preferințele dvs. Dar cel din fragmentul de exemplu CSS de aici ar trebui să vă dea o idee despre cum să vă stilizați.

Deveniți mai creativi atunci când vă construiți site-ul web

Crearea unui site web atrăgător din punct de vedere vizual necesită o oarecare creativitate. Și un site web ușor de utilizat este mai probabil să vă convertească publicul decât unul insipid.

Deși v-am arătat cum să creați un meniu de navigare personalizat aici, puteți totuși să depășiți acest lucru și să-l faceți mai convingător. De exemplu, puteți anima afișarea navigațiilor, le puteți da o culoare de fundal și multe altele. Și orice faceți, asigurați-vă că site-ul dvs. web utilizează cele mai bune practici de proiectare și machete ușor de utilizat de către utilizatori.

Cum să reutilizați vechiul hardware ca un profesionist

Ai o mulțime de tehnologii vechi aglomerate în casa ta? Aflați exact ce să faceți cu acesta în acest ghid de reciclare tehnologică!

Citiți în continuare

Despre autor