Kā izveidot mobilās izvēlnes joslu, izmantojot HTML, CSS un JavaScript

Neapšaubāmi, jūs varat izveidot pārslēdzamu mobilās izvēlni, izmantojot CSS ietvarus, piemēram, TailWind vai BootStrap.

Bet kāda ir tā koncepcija? Un kā jūs varat to izveidot no nulles, neatkarīgi no šiem CSS ietvariem?

Veicot iepriekš minēto, jūs varat pilnībā pielāgot pielāgojumus. Tātad, bez papildu piepūles, lūk, kā izveidot pārslēdzamu mobilās izvēlni, izmantojot vēlamo programmēšanas valodu.

Kā izveidot maināmu mobilās izvēlni

Ja vēl neesat to izdarījis, atveriet projekta mapi un izveidojiet projekta failus (HTML, CSS un JavaScript).

Tālāk redzēsit koda piemērus, kas nepieciešami visiem trim veidiem. Un, ja vēl neesat to izdarījis, apsveriet lejupielādi šīs lietotnes, lai uzzinātu kodu pirms lasīt tālāk.

Mēs sāksim ar HTML:

 Izveidojiet trīs divus, lai attēlotu trīs rindu nolaižamo izvēlņu joslu 








 Pievienojiet savas navigācijas šeit 


Mājas
Par
Kontakti

CSS:

/*Šīs sadaļas norobežojums ir paredzēts tikai apmācībai*/
sadaļa { 
platums: 800 pikseļi;
augstums: 600 pikseļi;

instagram viewer


augšējā mala: 50 pikseļi;
mala pa kreisi: 250 pikseļi;
apmale: vienkrāsaini melna 1px;
fons: #e6e3dc;
}
/*novietojiet divs konteineru savā DOM*/
#toggle-container {
displejs: režģis;
platums: piemērots saturs;
mala pa kreisi: 720 pikseļi;
augšējā mala: 10 pikseļi;
}
/*Sakratiet trīs divus virs otra. Pēc tam iestatiet tiem augstumu un platumu.*/
#viens divi trīs{
fons: melns;
platums: 30 pikseļi;
augstums: 3 pikseļi;
augšējā mala: 5 pikseļi;
} 
.toggle-content {
displejs: nav;
mala pa kreisi: 700 pikseļi;
augšējā mala: 20 pikseļi;
}
.toggle-content a {
displejs: bloks;
teksta dekorēšana: nav;
krāsa: melna;
fonta lielums: 30 pikseļi;
}
.toggle-content a: hover {
krāsa: zila;
}
/*Rādīt JavaScript izveidoto klases gadījumu blokā*/
.displayed {
displejs: bloks;
}

Pievienot JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("klikšķis", function () {
// Katrai navigācijai izmantojiet klases ieceri un iestatiet displeja pārslēgšanu:
toggleContents.classList.toggle ("parādīts");
});

Lūk, kā izskatās darba rezultāts, noklikšķinot uz izvēlnes joslas:

Izvēlne ir pārslēdzama, tāpēc, noklikšķinot uz joslas vēlreiz vai jebkurā vietā lapā, navigācijas tiek paslēptas.

Saistīts: Stila vietnes elementi ar CSS fona gradientu

Iespējams, jūsu pārlūkprogramma neatbalsta satura slēpšanu, noklikšķinot uz jebkuras vietas savā tīmekļa lapā. Varat mēģināt to piespiest, izmantojot notikuma mērķi un JavaScript cilpu. To var izdarīt, pievienojot JavaScript šādam koda blokam:

// Pievienojiet savai tīmekļa lapai klikšķa notikumu:
window.onclick = funkcija (notikums) {
// Izvēlieties klikšķa notikumu izvēlnes joslā, lai tīmekļa lapas pamatteksts varētu to izsekot:
ja (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Paslēpiet navigācijas, veicot katras darbības:
par (var i = 0; i var samazinājās = nolaižamās izvēlnes [i];
ja (drop.classList.contains ('display')) {
drop.classList.remove ('displejs');
}
}
}
}

Tātad šeit ir kopsavilkums par to, ko jūs tikko izdarījāt: jūs izveidojāt trīs rindas, izmantojot div HTML tags. Jūs pielāgojāt to augstumu un platumu un novietojāt tos savā DOM. Tad jūs piešķīrāt tiem klikšķa notikumu, izmantojot JavaScript.

Saistīts: Kā izveidot vietni: iesācējiem

Sākotnējo navigācijas displeju iestatāt uz neviena lai tos paslēptu, kad lapa tiek ielādēta. Tad klikšķis notikums trīs rindās pārslēdz šīs navigācijas, pamatojoties uz JavaScript iniciēto klasi (parādīts). Visbeidzot, jūs izmantojāt šo jauno klasi, lai parādītu navigācijas, izmantojot CSS un JavaScript pārslēgtSaturs metodi.

Saistīts: Neumorfās dizaina tendences HTML, CSS un JavaScript

Pārējais CSS tomēr ir atkarīgs no jūsu vēlmēm. Bet šeit redzamajam CSS fragmenta paraugam vajadzētu dot priekšstatu par sava stila veidošanu.

Veidojiet savu radošumu, veidojot savu vietni

Vizuāli pievilcīgas vietnes izveide prasa zināmu radošumu. Un lietotājam draudzīga vietne, visticamāk, pārveidos jūsu auditoriju, nevis mīlīga.

Lai gan mēs esam parādījuši, kā šeit izveidot pielāgotu navigācijas izvēlni, jūs joprojām varat iet tālāk un padarīt to saistošāku. Piemēram, varat animēt navigāciju displeju, piešķirt tām fona krāsu un daudz ko citu. Un neatkarīgi no tā, ko darāt, nodrošiniet, lai jūsu vietne izmantotu labāko dizaina praksi un izkārtojumu, kas lietotājiem būtu ērti lietojams.

Kā atkārtoti izmantot veco aparatūru kā profesionālis

Vai jūsu mājās ir daudz veco tehnoloģiju? Šajā tehnoloģiju pārstrādes ceļvedī uzziniet, ko tieši ar to darīt!

Lasīt Tālāk

Par autoru