Mobiilivalikkopalkin luominen HTML: llä, CSS: llä ja JavaScriptillä

Epäilemättä voit luoda vaihdettavan mobiilivalikon käyttämällä CSS -kehyksiä, kuten TailWind tai BootStrap.

Mutta mikä konsepti sen takana on? Ja miten voit tehdä sellaisen tyhjästä riippumatta näistä CSS -kehyksistä?

Edellä mainitun tekeminen antaa sinulle täyden räätälöinnin hallinnan. Joten ilman lisäselvityksiä voit luoda vaihdettavan mobiilivalikon käyttämällä haluamaasi ohjelmointikieltä.

Vaihdettavan mobiilivalikon luominen

Jos et ole jo tehnyt niin, avaa projektikansio ja luo projektitiedostot (HTML, CSS ja JavaScript).

Alla näet esimerkkejä koodista, jota tarvitset kaikille kolmelle tyypille. Ja jos et ole jo tehnyt sitä, harkitse lataamista nämä sovellukset oppivat koodia ennen kuin jatkat lukemista.

Aloitamme HTML:

 Luo kolme divia edustamaan kolmen rivin pudotusvalikkoriviä 








 Lisää navigointisi tähän 


Koti
Noin
Ottaa yhteyttä

CSS:

/*Tämä osion rajaus on tarkoitettu vain opetusohjelmaan*/
osio { 
leveys: 800 pikseliä;
korkeus: 600 kuvapistettä;
marginaali-50px;





instagram viewer


marginaali-vasen: 250 pikseliä;
reuna: kiinteä musta 1px;
tausta: #e6e3dc;
}
/*aseta divs -säiliö DOM -laitteeseesi*/
#toggle-container {
näyttö: ruudukko;
leveys: sopiva sisältö;
marginaali-vasen: 720px;
marginaali-10px;
}
/*Pinoa kolme diviä päällekkäin. Aseta sitten niille korkeus ja leveys.*/
#yksi kaksi kolme{
tausta: musta;
leveys: 30 kuvapistettä;
korkeus: 3 kuvapistettä;
marginaali-5px;
} 
.toggle-content {
näyttö: ei mitään;
marginaali-vasen: 700 kuvapistettä;
marginaali-20px;
}
.toggle-content a {
näyttö: lohko;
tekstin koristelu: ei mitään;
väri musta;
fontin koko: 30px;
}
.toggle-content a: hover {
väri: sininen;
}
/*Näytä JavaScriptin luoma luokkainstanssi lohkossa*/
.displayed {
näyttö: lohko;
}

Lisää JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("napsauta", function () {
// Käytä luokkaintensiota jokaiseen navigointiin ja aseta näyttö vaihtamaan:
toggleContents.classList.toggle ("näytetään");
});

Tältä näyttää toimiva tulos, kun napsautat valikkoriviä:

Valikko on vaihdettavissa, joten palkin napsauttaminen uudelleen - tai missä tahansa sivun sisällä - piilottaa navigoinnin.

Aiheeseen liittyviä: Tyylisiä verkkosivustoelementtejä CSS -taustagradientilla

Selaimesi ei ehkä tue sisällön piilottamista, kun napsautat mitä tahansa verkkosivusi kohtaa. Voit yrittää pakottaa tämän käyttämällä tapahtumatavoitetta ja JavaScript -silmukkaa. Voit tehdä tämän lisäämällä seuraavan koodilohkon JavaScriptisi:

// Lisää napsautustapahtuma verkkosivullesi:
window.onclick = toiminto (tapahtuma) {
// Kohdista valikkorivin napsautustapahtuma, jotta verkkosivun runko voi seurata sitä:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Piilota navigoinnit kiertämällä ne läpi:
for (var i = 0; i var pudonnut = pudotusvalikot [i];
if (drop.classList.contains ('näyttö')) {
drop.classList.remove ('näyttö');
}
}
}
}

Tässä siis yhteenveto tekemästäsi toiminnasta: Loit kolme riviä käyttämällä div HTML -tunniste. Säädit niiden korkeutta ja leveyttä ja sijoitit ne DOM: iisi. Sitten annoit näille napsautustapahtuman JavaScriptin avulla.

Aiheeseen liittyviä: Verkkosivuston luominen: aloittelijoille

Asetat navigointien alkunäytön arvoksi ei mitään piilottaa ne sivun latautuessa. Sitten klikkaus Tapahtuma kolmella rivillä vaihtaa nämä navigoinnit JavaScriptin luodun luokan perusteella (näytetään). Lopuksi käytit tätä uutta luokkaa näyttämään navigoinnit CSS: n ja JavaScriptin avulla toggleSisältö menetelmä.

Aiheeseen liittyviä: Neumorfiset suunnittelutrendit HTML: ssä, CSS: ssä ja JavaScriptissä

Muu CSS riippuu kuitenkin mieltymyksistäsi. Mutta tässä esimerkissä olevan CSS -katkelman pitäisi antaa sinulle käsitys siitä, miten voit muotoilla omasi.

Hanki enemmän luovuutta verkkosivustosi rakentamisessa

Visuaalisesti houkuttelevan verkkosivuston luominen vaatii luovuutta. Käyttäjäystävällinen verkkosivusto kääntää yleisön todennäköisemmin kuin lempeä.

Vaikka olemme osoittaneet sinulle, miten voit luoda mukautetun navigointivalikon täällä, voit silti mennä pidemmälle ja tehdä siitä entistä vakuuttavamman. Voit esimerkiksi animoida navigointien näytön, antaa niille taustavärin ja paljon muuta. Ja mitä tahansa teetkin, varmista, että verkkosivustosi käyttää parhaita suunnittelukäytäntöjä ja asetteluja, jotka ovat helppokäyttöisiä käyttäjille.

Kuinka käyttää vanhaa laitteistoa uudelleen ammattilaisen tavoin

Onko kodissasi paljon vanhaa tekniikkaa? Tässä tekniikan kierrätysoppaassa voit selvittää, mitä tehdä sen kanssa!

Lue seuraava

Kirjailijasta