Kuidas luua mobiilimenüüriba HTML -i, CSS -i ja JavaScripti abil

Kahtlemata saate luua lülitatava mobiilimenüü, kasutades CSS -i raamistikke nagu TailWind või BootStrap.

Aga mis kontseptsioon selle taga on? Ja kuidas saate seda teha nullist, sõltumata nendest CSS -i raamistikest?

Ülaltoodud toimingute tegemine annab teile täieliku kohandamise kontrolli. Niisiis, ilma igasuguste lisavõimalusteta, saate siin oma eelistatud programmeerimiskeelt kasutades muuta lülitatava mobiilimenüü.

Lülitatava mobiilimenüü loomine

Kui te pole seda juba teinud, avage oma projekti kaust ja looge oma projektifailid (HTML, CSS ja JavaScript).

Allpool näete näiteid koodist, mida vajate kõigi kolme tüübi jaoks. Ja kui te pole seda veel teinud, kaaluge allalaadimist need rakendused koodi õppimiseks enne edasi lugemist.

Alustame sellest HTML:

 Looge kolm jaotist, mis esindavad kolmerealist rippmenüüriba 








 Lisage oma navigeerimised siia 


Kodu
Umbes
Kontakt

CSS:

/*Selle jaotise piiritlemine on mõeldud ainult õpetuse jaoks*/
jaotis { 
laius: 800 pikslit;

instagram viewer


kõrgus: 600 pikslit;
ülemine äär: 50 pikslit;
veeris vasakul: 250 pikslit;
ääris: must must 1px;
taust: #e6e3dc;
}
/*asetage divs -konteiner oma DOM -i*/
#toggle-container {
kuva: ruudustik;
laius: sobiv sisu;
veeris-vasak: 720 pikslit;
ülemine äär: 10 pikslit;
}
/*Pange kolm divi üksteise kohale. Seejärel määrake nende kõrgus ja laius.*/
#üks kaks kolm{
taust: must;
laius: 30 pikslit;
kõrgus: 3 pikslit;
ülemine äär: 5 pikslit;
} 
.toggle-content {
kuva: puudub;
veeris-vasak: 700 pikslit;
ülemine äär: 20 pikslit;
}
.toggle-content a {
kuva: plokk;
teksti kaunistamine: puudub;
värv: must;
fondi suurus: 30 pikslit;
}
.toggle-content a: hover {
värv: sinine;
}
/*Kuva JavaScripti loodud klassi eksemplar plokis*/
.displayed {
kuva: plokk;
}

Lisa JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("klõps", function () {
// Rakendage igale navigeerimisele klassi kavatsus ja seadke kuvar ümberlülitamiseks:
toggleContents.classList.toggle ("kuvatakse");
});

Menüüribal klõpsates näeb töötulemus välja järgmine.

Menüü on lülitatav, nii et ribal uuesti klõpsamine - või mis tahes lehe sees - peidab navigeerimise.

Seotud: Stiilsed veebisaidielemendid CSS -i tausta gradiendiga

Teie brauser ei pruugi toetada sisu peitmist, kui klõpsate oma veebilehel ükskõik kus. Saate seda sundida sündmuse sihtmärgi ja JavaScripti silmuse abil. Seda saate teha, lisades JavaScriptile järgmise koodiploki:

// Klikkimise lisamine oma veebilehele:
window.onclick = funktsioon (sündmus) {
// Sihtige menüüribal klõpsamise sündmust, et veebilehe sisu saaks seda jälgida:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Navigeerimiste peitmine, lugedes igaüks neist läbi:
jaoks (var i = 0; i var langes = rippmenüüd [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('kuva');
}
}
}
}

Siin on kokkuvõte sellest, mida just tegite: lõite kolm rida, kasutades div HTML -i silt. Reguleerisite nende kõrgust ja laiust ning paigutasite need oma DOM -i. Seejärel andsite neile JavaScripti kasutades klikisündmuse.

Seotud: Veebisaidi loomine: algajatele

Seadistate oma navigeerimiste esialgse kuva mitte ühtegi et neid lehe laadimisel peita. Siis klõpsake sündmus kolmel real lülitab need navigeerimised JavaScripti aktiveeritud klassi alusel (kuvatakse). Lõpuks kasutasite seda uut klassi navigeerimiste kuvamiseks CSS -i ja JavaScripti abil toggleSisu meetod.

Seotud: Neumorfsed disainitrendid HTML -is, CSS -is ja JavaScriptis

Ülejäänud CSS sõltub aga teie eelistustest. Kuid siin näidatud CSS -i väljavõte peaks andma teile ettekujutuse oma stiili kujundamisest.

Olge oma veebisaidi loomisel loomingulisem

Visuaalselt atraktiivse veebisaidi tegemine nõuab teatavat loovust. Ja kasutajasõbralik veebisait toob teie vaatajaskonna tõenäolisemalt kaasa kui õrn.

Kuigi oleme näidanud teile, kuidas siin kohandatud navigeerimismenüüd luua, saate siiski sellest kaugemale minna ja muuta see veenvamaks. Näiteks saate animeerida navigeerimiste kuva, anda neile taustavärvi ja palju muud. Ja hoolimata sellest, mida te teete, veenduge, et teie veebisait kasutaks parimaid kujundustavasid ja paigutusi, mida kasutajatel on lihtne kasutada.

Kuidas vana riistvara uuesti kasutada nagu professionaal

Kas teie kodus on palju vana tehnoloogiat? Selle tehnoloogia ringlussevõtujuhendist saate täpselt teada, mida sellega teha!

Loe edasi

Autori kohta