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

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 utilizând limbajul de programare preferat.





Cum să vă creați meniul mobil alternativ

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:




Mobile Navigation Menu











Home
About
Contact



CSS:





/*This section demarcation is solely for the purpose of the tutorial*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*position the divs container in your DOM*/
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/*Stack the three divs above each other. Then set a height and width for them.*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/*Display the class instance created by JavaScript in block*/
.displayed{
display: block;
}

Adăugați JavaScript:

cum să rearanjați panourile pinterest în ordine alfabetică
var toggler = document.getElementById('toggle-container');
var toggleContents = document.getElementById('toggle-content');
document.addEventListener('click', function(){
//Apply a class intance to each navigation and set display to toggle:
toggleContents.classList.toggle('displayed');
});

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:

//Add a click event to your webpage:
window.onclick = function(event) {
//Target the click event on the menu bar to allow the webpage body to track it:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName('toggle-content');
//Hide the navigations by looping through each of them:
for (var i = 0; i var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}

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ă.

Corelat: Tendințe de proiectare 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.

Acțiune Acțiune Tweet E-mail 15 Comenzi Windows Prompt Command (CMD) pe care trebuie să le cunoașteți

Promptul de comandă este încă un instrument Windows puternic. Iată cele mai utile comenzi CMD pe care fiecare utilizator Windows trebuie să le cunoască.

Citiți în continuare
Subiecte asemănătoare
  • Programare
  • HTML
  • CSS
  • JavaScript
  • Sfaturi de codare
Despre autor Idisou Omisola(94 articole publicate)

Idowu este pasionat de orice tehnologie inteligentă și productivitate. În timpul liber, se joacă cu codificarea și trece la tabla de șah când se plictisește, dar îi place, de asemenea, să se rupă de rutină din când în când. Pasiunea sa pentru a arăta oamenilor calea în jurul tehnologiei moderne îl motivează să scrie mai multe.

Mai multe de la Idowu Omisola

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona