Kaip sukurti meniu juostą mobiliesiems naudojant HTML, CSS ir „JavaScript“

Neabejotinai galite sukurti perjungiamą meniu mobiliesiems naudodami CSS sistemas, tokias kaip „TailWind“ ar „BootStrap“.

Bet kokia už jos esanti koncepcija? Ir kaip tai padaryti nuo nulio, nepriklausomai nuo šių CSS sistemų?

Jei atliksite aukščiau nurodytus veiksmus, galėsite visiškai valdyti tinkinimą. Taigi, be jokių abejonių, štai kaip sukurti perjungiamą meniu mobiliesiems naudojant pageidaujamą programavimo kalbą.

Kaip sukurti perjungiamą meniu mobiliesiems

Jei to dar nepadarėte, atidarykite projekto aplanką ir sukurkite projekto failus (HTML, CSS ir „JavaScript“).

Žemiau matysite visų trijų tipų kodo pavyzdžius. O jei dar to nepadarėte, apsvarstykite galimybę atsisiųsti Šios programos mokosi kodo prieš skaitant toliau.

Pradėsime nuo HTML:

 Sukurkite tris skyrius, rodančius trijų eilučių išskleidžiamojo meniu juostą 








 Čia pridėkite savo navigaciją 


Namai
Apie
kontaktas

CSS:

/*Šis skyrius skiriamas tik mokymo tikslais*/
skyrius{ 
plotis: 800 pikselių;
aukštis: 600 pikselių;





instagram viewer


viršutinė paraštė: 50 taškų;
paraštė kairėn: 250 taškų;
kraštinė: vientisa juoda 1px;
fonas: #e6e3dc;
}
/*padėkite „divs“ konteinerį į savo DOM*/
#toggle-container {
ekranas: tinklelis;
plotis: tinkamas turinys;
paraštė kairėn: 720 taškų;
viršutinė paraštė: 10 taškų;
}
/*Sudėkite tris nardymus vienas virš kito. Tada nustatykite jų aukštį ir plotį.*/
#vienas du trys{
fonas: juodas;
plotis: 30 pikselių;
aukštis: 3 taškai;
viršutinė paraštė: 5 taškų;
} 
.toggle-content {
ekranas: nėra;
paraštė kairėn: 700 pikselių;
viršutinė paraštė: 20 taškų;
}
.toggle-content a {
ekranas: blokas;
teksto dekoravimas: nėra;
spalva: juoda;
šrifto dydis: 30 pikselių;
}
.toggle-content a: hover {
spalva: mėlyna;
}
/*Rodyti „JavaScript“ sukurtą klasės egzempliorių bloke*/
.displayed {
ekranas: blokas;
}

Pridėti „JavaScript“:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("spustelėkite", funkcija () {
// Taikykite klasės intenciją kiekvienai navigacijai ir nustatykite ekraną perjungti:
toggleContents.classList.toggle ("rodomas");
});

Štai kaip darbo rezultatas atrodo spustelėjus meniu juostą:

Meniu yra perjungiamas, todėl dar kartą spustelėję juostą arba bet kurioje puslapio vietoje naršymas yra paslėptas.

Susijęs: Stilingi svetainės elementai su CSS fono gradientu

Jūsų naršyklė gali nepalaikyti turinio slėpimo, kai spustelite bet kurią svetainės vietą. Galite pabandyti tai priversti naudodami įvykio tikslą ir „JavaScript“ kilpą. Tai galite padaryti pridėję šį „JavaScript“ kodo bloką:

// Pridėkite paspaudimo įvykį prie savo tinklalapio:
window.onclick = funkcija (įvykis) {
// Taikykite meniu juostoje esantį paspaudimo įvykį, kad tinklalapio turinys galėtų jį stebėti:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Paslėpkite naršymą, atlikdami kiekvieną iš jų:
už (var i = 0; i var sumažėjo = išskleidžiamieji meniu [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('ekranas');
}
}
}
}

Štai ką jūs ką tik padarėte, santrauka: sukūrėte tris eilutes naudodami div HTML žyma. Jūs pakoregavote jų aukštį ir plotį ir padėjote juos savo DOM. Tada davėte šiems įvykiams paspaudimą naudodami „JavaScript“.

Susijęs: Kaip sukurti svetainę: pradedantiesiems

Pradinį navigacijos rodymą nustatote į nė vienas paslėpti juos, kai puslapis įkeliamas. Tada spustelėkite įvykis trijose eilutėse perjungia šias navigacijas pagal „JavaScript“ sukurtą klasę (rodomas). Galiausiai, jūs panaudojote šią naują klasę norėdami parodyti naršymą naudodami CSS ir „JavaScript“ perjungtiTurinys metodas.

Susijęs: Neumorfinio dizaino tendencijos HTML, CSS ir „JavaScript“

Tačiau likusi CSS dalis priklauso nuo jūsų pageidavimų. Tačiau čia pateiktame CSS fragmento pavyzdyje turėtumėte suprasti, kaip sukurti savo stilių.

Kurkite daugiau kurdami savo svetainę

Norint sukurti vizualiai patrauklią svetainę, reikia šiek tiek kūrybiškumo. Vartotojui patogi svetainė labiau linkusi paversti jūsų auditoriją nei švelni.

Nors čia parodėme, kaip sukurti pasirinktinį naršymo meniu, vis tiek galite tai padaryti ir padaryti jį įtikinamesnį. Pavyzdžiui, galite animuoti naršymo ekraną, suteikti fono spalvą ir dar daugiau. Kad ir ką darytumėte, įsitikinkite, kad jūsų svetainėje naudojama geriausia dizaino praktika ir maketai, kuriuos vartotojai gali lengvai naudoti.

Kaip pakartotinai naudoti seną aparatūrą kaip profesionalas

Ar jūsų namuose yra daug senųjų technologijų? Šiame technologijų perdirbimo vadove tiksliai sužinokite, ką su juo daryti!

Skaityti toliau

Apie autorių