Kako narediti mobilno menijsko vrstico s HTML, CSS in JavaScript

Nedvomno lahko ustvarite preklopni meni za mobilne naprave z ogrodji CSS, kot sta TailWind ali BootStrap.

Kakšen pa je koncept za tem? In kako ga lahko naredite iz nič, ne da bi bili odvisni od teh okvirov CSS?

Če to storite sami, imate popoln nadzor nad prilagajanjem. Torej, brez dodatnega odlašanja, tukaj je, kako ustvariti preklopni meni za mobilne naprave s svojim želenim programskim jezikom.

Kako ustvariti svoj mobilni meni, ki ga je mogoče preklopiti

Če tega še niste storili, odprite mapo projekta in ustvarite projektne datoteke (HTML, CSS in JavaScript).

Spodaj boste videli primere kode, ki jo potrebujete za vse tri vrste. Če še niste, razmislite o prenosu te aplikacije za učenje kode pred branjem naprej.

Začeli bomo s HTML:

 Ustvarite tri dive, ki predstavljajo vrstico spustnega menija s tremi vrsticami 








 Tukaj dodajte svojo navigacijo 


Domov
Približno
Stik

CSS:

/*Ta razmejitev razdelka je izključno za namen vadnice*/
razdelek { 
širina: 800px;
višina: 600px;





instagram viewer


rob na vrhu: 50px;
levi rob: 250px;
obroba: polno črna 1px;
ozadje: #e6e3dc;
}
/*postavite posodo za div v vaš DOM*/
#toggle-container {
prikaz: mreža;
širina: fit-vsebina;
levi rob: 720px;
margin-top: 10px;
}
/*Zložite tri dive drug nad drugega. Nato jim nastavite višino in širino.*/
#en, #dva, #tri {
ozadje: črno;
širina: 30px;
višina: 3px;
margin-top: 5px;
} 
.toggle-content {
prikaz: brez;
levi rob: 700px;
rob na vrhu: 20px;
}
.toggle-vsebina a {
prikaz: blok;
okras besedila: brez;
barva: črna;
velikost pisave: 30px;
}
.toggle-vsebina a: hover {
barva: modra;
}
/*Prikaz primerka razreda, ki ga je ustvaril JavaScript, v bloku*/
.displayed {
prikaz: blok;
}

Dodaj JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("klik", funkcija () {
// Za vsako navigacijo uporabite vnos razreda in nastavite prikaz za preklop:
toggleContents.classList.toggle ("prikazano");
});

Če kliknete menijsko vrstico, izgleda delovni izhod:

Meni je mogoče preklopiti, zato ponovni klik na vrstico - ali kjer koli na strani - skrije krmarjenje.

Povezano: Slog elementov spletnega mesta z gradientom ozadja CSS

Vaš brskalnik morda ne podpira skrivanja vsebine, ko kliknete kjer koli na svoji spletni strani. To lahko poskusite vsiliti z uporabo cilja dogodka in zanke JavaScript. To lahko storite tako, da v svoj JavaScript dodate naslednji blok kode:

// Dodajte dogodek klika na svojo spletno stran:
window.onclick = function (event) {
// Ciljanje na dogodek klika v menijski vrstici, da telesu spletnega mesta omogoči sledenje:
if (! event.target.matches ('#toggle-container')) {
var dropdownns = document.getElementsByClassName ("toggle-content");
// Skrij krmarjenje tako, da prelistaš vsakega od njih:
za (var i = 0; i var drop = spustni seznami [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('display');
}
}
}
}

Torej, povzetek tega, kar ste pravkar naredili: ustvarili ste tri vrstice z uporabo div oznako HTML. Prilagodili ste njihovo višino in širino ter jih postavili v DOM. Nato ste tem dogodkom kliknili z uporabo JavaScripta.

Povezano: Kako narediti spletno mesto: Za začetnike

Začetni prikaz navigacije nastavite na nobena da jih skrijete, ko se stran naloži. Potem pa kliknite dogodek v treh vrsticah preklopi to navigacijo na podlagi razreda, ki ga je ustvaril JavaScript (prikazano). Nazadnje ste ta novi razred uporabili za prikaz navigacij s pomočjo CSS in JavaScript toggleVsebina metoda.

Povezano: Neumorfni trendi oblikovanja v HTML, CSS in JavaScript

Preostanek CSS pa je odvisen od vaših želja. Toda tisti v vzorčnem delčku CSS tukaj bi vam moral dati idejo, kako oblikovati svojega.

Pri ustvarjanju spletnega mesta bodite bolj ustvarjalni

Izdelava vizualno privlačnega spletnega mesta zahteva nekaj ustvarjalnosti. Uporabniku prijazno spletno mesto bo bolj verjetno spremenilo vaše občinstvo kot nerodno.

Čeprav smo vam pokazali, kako lahko tukaj ustvarite navigacijski meni po meri, lahko to še presežete in ga naredite privlačnejšega. Na primer, lahko animirate prikaz navigacij, jim dodate barvo ozadja in drugo. Karkoli že delate, poskrbite, da bo vaše spletno mesto uporabljalo najboljše prakse oblikovanja in postavitve, ki bodo uporabnikom enostavne.

Kako ponovno uporabiti svojo staro strojno opremo kot profesionalec

Imate v hiši veliko stare tehnologije? V tem priročniku za recikliranje tehnologije natančno preberite, kaj storiti z njim!

Preberite Naprej

O avtorju