Kako napraviti mobilnu traku izbornika s HTML -om, CSS -om i JavaScript -om

Bez sumnje, možete stvoriti mobilni izbornik koji se može mijenjati pomoću CSS okvira kao što su TailWind ili BootStrap.

No, koji koncept stoji iza toga? I kako ga možete napraviti od nule, a da ne ovisite o ovim CSS okvirima?

Ako sami učinite gore navedeno, imate potpunu kontrolu prilagođavanja. Dakle, bez daljnjih poteškoća, evo kako stvoriti mobilni izbornik koji se može preklopiti koristeći vaš željeni programski jezik.

Kako stvoriti svoj mobilni izbornik koji se može uključivati

Ako to već niste učinili, otvorite mapu projekta i stvorite datoteke projekta (HTML, CSS i JavaScript).

U nastavku ćete vidjeti primjere koda koji vam je potreban za sve tri vrste. A ako već niste, razmislite o preuzimanju ove aplikacije za učenje koda prije čitanja.

Počet ćemo s HTML:

 Izradite tri diva koji će predstavljati traku padajućeg izbornika s tri retka 








 Ovdje dodajte svoje navigacije 


Dom
Oko
Kontakt

CSS:

/*Ograničenje ovog odjeljka služi samo u svrhu vodiča*/
odjeljak{ 

instagram viewer


širina: 800px;
visina: 600px;
margin-top: 50px;
margina-lijevo: 250px;
obrub: puna crna 1px;
pozadina: #e6e3dc;
}
/*postavite divs spremnik u svoj DOM*/
#toggle-container {
prikaz: rešetka;
širina: fit-content;
margina-lijevo: 720px;
margin-top: 10px;
}
/*Složite tri diva jedan iznad drugog. Zatim im postavite visinu i širinu.*/
#jedan dva tri{
pozadina: crna;
širina: 30px;
visina: 3px;
margin-top: 5px;
} 
.toggle-content {
prikaz: nema;
margina-lijevo: 700px;
margin-top: 20px;
}
.toggle-sadržaj a {
prikaz: blok;
ukras teksta: nema;
Crna boja;
font-size: 30px;
}
.toggle-content a: hover {
boja: plava;
}
/*Prikažite instancu klase koju je stvorio JavaScript u bloku*/
.prikazano {
prikaz: blok;
}

Dodajte JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("klik", funkcija () {
// Primijenite uzorak klase na svaku navigaciju i postavite prikaz za prebacivanje:
toggleContents.classList.toggle ("prikazano");
});

Evo kako izgleda radni izlaz kada pritisnete traku izbornika:

Izbornik se može uključiti, pa ponovni klik na traku - ili bilo gdje na stranici - skriva navigaciju.

Povezano: Stilite elemente web stranice s CSS gradijentom pozadine

Vaš preglednik možda ne podržava skrivanje sadržaja kada kliknete bilo gdje na svojoj web stranici. To možete pokušati prisiliti pomoću cilja događaja i JavaScript petlje. To možete učiniti dodavanjem sljedećeg bloka koda u svoj JavaScript:

// Dodajte događaj klika na svoju web stranicu:
window.onclick = function (event) {
// Ciljajte događaj klika na traci izbornika kako biste tijelu web stranice omogućili da ga prati:
if (! event.target.matches ('#toggle-container')) {
var dropdownns = document.getElementsByClassName ("toggle-content");
// Sakrijte navigacije ponavljanjem kroz svaku od njih:
za (var i = 0; i var ispušten = padajući izbornici [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('display');
}
}
}
}

Evo sažetka onoga što ste upravo učinili: stvorili ste tri retka koristeći div HTML oznaka. Prilagodili ste njihovu visinu i širinu i postavili ih u svoj DOM. Zatim ste ovim događajima dali klik pomoću JavaScripta.

Povezano: Kako napraviti web stranicu: Za početnike

Početni prikaz navigacije postavili ste na nijedan da ih sakrijete kad se stranica učita. Onda klik događaj u tri retka prebacuje ove navigacije na temelju klase s JavaScriptom (prikazano). Konačno, ovu ste novu klasu upotrijebili za prikaz navigacije pomoću CSS -a i JavaScripta toggleSadržaj metoda.

Povezano: Neumorfni trendovi dizajna u HTML -u, CSS -u i JavaScript -u

Ostatak CSS -a, međutim, ovisi o vašim željama. Ali onaj u primjeru CSS isječka ovdje trebao bi vam dati ideju o tome kako oblikovati svoj.

Budite kreativniji pri izradi web stranice

Izrada vizualno privlačne web stranice zahtijeva određenu kreativnost. Vjerojatnije je da će web stranica prilagođena korisniku pretvoriti vašu publiku od blage.

Iako smo vam ovdje pokazali kako stvoriti prilagođeni navigacijski izbornik, ipak možete otići dalje od toga i učiniti ga privlačnijim. Na primjer, možete animirati prikaz navigacija, dati im boju pozadine i još mnogo toga. I što god radili, pobrinite se da vaša web stranica koristi najbolje dizajnerske prakse i rasporede koje će korisnici jednostavno koristiti.

Kako ponovno koristiti svoj stari hardver kao profesionalac

Imate li puno starih tehnologija u svom domu? Saznajte točno što s tim učiniti u ovom vodiču za recikliranje tehnologije!

Pročitajte Dalje

O autoru