Ako vytvoriť panel s ponukou pre mobilné zariadenia pomocou HTML, CSS a JavaScript

Nepochybne môžete prepínateľnú mobilnú ponuku vytvoriť pomocou rámcov CSS, ako sú TailWind alebo BootStrap.

Aký je však za tým koncept? A ako ich môžete vytvoriť od začiatku bez toho, aby ste museli závisieť od týchto rámcov CSS?

Vykonaním vyššie uvedených činností získate úplnú kontrolu nad prispôsobením. Bez ďalších okolkov teda uvádzame postup, ako vytvoriť prepínateľnú mobilnú ponuku pomocou preferovaného programovacieho jazyka.

Ako vytvoriť prepínateľnú mobilnú ponuku

Ak ste to ešte neurobili, otvorte priečinok projektu a vytvorte súbory projektu (HTML, CSS a JavaScript).

Nasledujú príklady kódu, ktorý potrebujete pre všetky tri typy. A ak ste to ešte neurobili, zvážte stiahnutie tieto aplikácie na naučenie kódu pred čítaním ďalej.

Začneme s HTML:

 Vytvorte tri divy, ktoré budú predstavovať trojriadkový rozbaľovací panel s ponukami 








 Sem pridajte svoje navigácie 


Domov
O
Kontakt

CSS:

/*Vymedzenie tejto sekcie slúži výlučne na účely tutoriálu*/
sekcia { 
šírka: 800px;





instagram viewer


výška: 600px;
horný okraj: 50 pixelov;
ľavý okraj: 250 pixlov;
orámovanie: plná čierna 1px;
pozadie: #e6e3dc;
}
/*umiestnite kontajner divs do svojho DOMu*/
#toggle-container {
zobrazenie: mriežka;
šírka: vhodný obsah;
ľavý okraj: 720px;
horný okraj: 10 pixelov;
}
/*Uložte tri divy nad seba. Potom im nastavte výšku a šírku.*/
#jeden dva tri{
pozadie: čierne;
šírka: 30px;
výška: 3px;
okraj hore: 5 pixelov;
} 
.toggle-content {
displej: žiadny;
ľavý okraj: 700 pixelov;
horný okraj: 20 pixlov;
}
.toggle-content a {
displej: blok;
textová dekorácia: žiadna;
farba: čierna;
veľkosť písma: 30px;
}
.toggle-content a: hover {
farba: modrá;
}
/*Zobrazte inštanciu triedy vytvorenú jazykom JavaScript v bloku*/
.zobrazené {
displej: blok;
}

Pridať JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener („kliknutie“, funkcia () {
// Na každú navigáciu aplikujte triedu a prepnite zobrazenie:
toggleContents.classList.toggle ("zobrazené");
});

Takto vyzerá pracovný výstup po kliknutí na panel s ponukami:

Ponuku je možné prepínať, takže opätovným kliknutím na panel - alebo kdekoľvek na stránke - sa navigácie skryjú.

Súvisiace: Štýl prvkov webových stránok s prechodom na pozadí CSS

Váš prehliadač nemusí podporovať skrývanie obsahu, keď kliknete kdekoľvek na svojej webovej stránke. Môžete to skúsiť vynútiť pomocou cieľa udalosti a slučky JavaScript. Môžete to urobiť pridaním nasledujúceho bloku kódu do svojho JavaScriptu:

// Pridajte udalosť kliknutia na svoju webovú stránku:
window.onclick = funkcia (udalosť) {
// Zacieľte na udalosť kliknutia na paneli s ponukami, aby ju telo webovej stránky mohlo sledovať:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// Skryte navigácie opakovaním v každom z nich:
pre (var i = 0; i var klesol = rozbaľovacie ponuky [i];
if (Droped.classList.contains ('display')) {
Drop.classList.remove ('display');
}
}
}
}

Tu je teda súhrn toho, čo ste práve urobili: Vytvorili ste tri riadky pomocou súboru div značka HTML. Upravili ste ich výšku a šírku a umiestnili ich vo svojom DOMe. Potom ste im dali kliknutie pomocou JavaScriptu.

Súvisiace: Ako vytvoriť webovú stránku: pre začiatočníkov

Počiatočné zobrazenie svojich navigácií nastavíte na žiadny skryť ich pri načítaní stránky. Potom kliknite udalosť na troch riadkoch prepína tieto navigácie na základe inštancovanej triedy JavaScript (zobrazené). Nakoniec ste túto novú triedu použili na zobrazenie navigácií pomocou CSS a JavaScript toggleObsah metóda.

Súvisiace: Neumorfné trendy dizajnu v HTML, CSS a JavaScript

Ostatné CSS však závisia od vašich preferencií. Ale ten, ktorý je tu v ukážke úryvku CSS, by vám mal poskytnúť predstavu o tom, ako si ten svoj upraviť.

Buďte kreatívnejší pri vytváraní svojich webových stránok

Vytvorenie vizuálne príťažlivej webovej stránky vyžaduje určitú kreativitu. A na užívateľsky prívetivej webovej stránke je väčšia pravdepodobnosť, že premení vaše publikum než na nevýrazné.

Napriek tomu, že sme vám tu ukázali, ako vytvoriť vlastnú navigačnú ponuku, stále môžete ísť nad rámec tohto a urobiť ho pôsobivejším. Môžete napríklad animovať zobrazenie navigácií, dať im farbu pozadia a podobne. Bez ohľadu na to, čo robíte, zaistite, aby váš web používal najlepšie postupy navrhovania a rozloženia, ktoré môžu používatelia ľahko používať.

Ako znova použiť starý hardvér ako profesionál

Máte vo svojom dome veľa starej techniky? Zistite presne, čo s tým robiť v tejto technickej recyklačnej príručke!

Čítajte ďalej

O autorovi