Mobil menüsor létrehozása HTML, CSS és JavaScript segítségével

Kétségtelen, hogy váltható mobilmenüt hozhat létre olyan CSS -keretek segítségével, mint a TailWind vagy a BootStrap.

De mi a koncepció mögötte? És hogyan készíthet egyet a semmiből anélkül, hogy függne ezektől a CSS -keretrendszerektől?

Ha maga elvégzi a fentieket, teljes testreszabhatóságot biztosít. Tehát, minden további nélkül, itt van, hogyan hozhat létre váltható mobil menüt a kívánt programozási nyelv használatával.

A váltható mobil menü létrehozása

Ha még nem tette meg, nyissa meg a projektmappát, és hozza létre a projektfájlokat (HTML, CSS és JavaScript).

Az alábbiakban példákat láthat a mindhárom típushoz szükséges kódra. És ha még nem tette meg, fontolja meg a letöltést ezeket az alkalmazásokat, hogy megtanulják a kódot mielőtt tovább olvasna.

Kezdjük vele HTML:

 Hozzon létre három div-et a háromsoros legördülő menüsor megjelenítéséhez 








 Itt adhatja hozzá navigációit 


itthon
Ról ről
Kapcsolatba lépni

CSS:

/*Ez a szakasz elhatárolása kizárólag az oktatóanyag céljaira szolgál*/





instagram viewer


szakasz{ 
szélesség: 800 képpont;
magasság: 600 képpont;
margin-top: 50 képpont;
margó-bal: 250 képpont;
szegély: egyszínű fekete 1 képpont;
háttér: #e6e3dc;
}
/*helyezze a divs tárolót a DOM -ba*/
#toggle-container {
kijelző: rács;
szélesség: illeszkedő tartalom;
margó-bal: 720 képpont;
margin-top: 10 képpont;
}
/*Rakd egymásra a három div -ot. Ezután állítson be magasságot és szélességet.*/
#egy kettő három{
háttér: fekete;
szélesség: 30 képpont;
magasság: 3 képpont;
margin-top: 5 képpont;
} 
.toggle-content {
kijelző: nincs;
margó-bal: 700 képpont;
margin-top: 20 képpont;
}
.toggle-content a {
kijelző: blokk;
szövegdíszítés: nincs;
fekete szín;
betűméret: 30 képpont;
}
.toggle-content a: hover {
szín: kék;
}
/*A JavaScript által létrehozott osztálypéldány megjelenítése blokkban*/
.Megjelenik{
kijelző: blokk;
}

JavaScript hozzáadása:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("toggle-content");
document.addEventListener ("kattintson", function () {
// Alkalmazza az osztály intanciáját minden navigációra, és állítsa a kijelzőt váltásra:
toggleContents.classList.toggle ("megjelenítve");
});

Így néz ki a működő kimenet, ha a menüsorra kattint:

A menü váltható, így a sávra kattintva - vagy bárhol az oldalon - elrejtik a navigációkat.

Összefüggő: Stílusos weboldal elemek CSS háttér színátmenettel

Előfordulhat, hogy böngészője nem támogatja a tartalom elrejtését, amikor a weboldal bármely pontjára kattint. Megpróbálhatja ezt erőltetni eseménycél és JavaScript -hurok használatával. Ezt úgy teheti meg, hogy hozzáadja a következő kódblokkot a JavaScripthez:

// Kattintási esemény hozzáadása weboldalához:
window.onclick = funkció (esemény) {
// Célozza meg a kattintási eseményt a menüsoron, hogy a weboldal törzse nyomon tudja követni:
if (! event.target.matches ('#toggle-container')) {
var legördülő menük = document.getElementsByClassName ("toggle-content");
// Elrejtheti a navigációkat, ha mindegyiken végigmegy:
for (var i = 0; i var drop = legördülő menü [i];
if (drop.classList.contains ('display')) {
drop.classList.remove ('kijelző');
}
}
}
}

Íme tehát egy összefoglaló arról, amit most tett: Három sort hozott létre a div HTML címke. Beállította a magasságukat és szélességüket, és elhelyezte őket a DOM -ban. Akkor ezekhez kattintási eseményt adott meg JavaScript használatával.

Összefüggő: Weboldal készítés: kezdőknek

A navigációk kezdeti megjelenítését erre állítja egyik sem hogy elrejtse őket az oldal betöltésekor. Aztán a kattintson esemény a három sorban a JavaScript példányosított osztálya alapján váltja ezeket a navigációkat (Megjelenik). Végül ezzel az új osztállyal jelenítette meg a navigációkat CSS és JavaScript használatával toggleContents módszer.

Összefüggő: Neumorf formatervezési trendek HTML -ben, CSS -ben és JavaScriptben

A CSS többi része azonban az Ön preferenciájától függ. De a példában szereplő CSS -kódrészletnek ötletet kell adnia a stílus stílusának kialakítására.

Legyen kreatívabb a webhely felépítése során

A vizuálisan vonzó weboldal készítése némi kreativitást igényel. És egy felhasználóbarát webhely nagyobb valószínűséggel téríti meg közönségét, mint egy szelíd.

Bár itt megmutattuk, hogyan hozhat létre egyéni navigációs menüt, ettől még túlléphet és vonzóbbá teheti. Például animálhatja a navigációk megjelenítését, háttérszínt adhat nekik és így tovább. És bármit is tesz, győződjön meg arról, hogy webhelye a legjobb tervezési gyakorlatokat és elrendezéseket használja, amelyeket a felhasználók könnyen használhatnak.

Hogyan használhatja újra a régi hardvert, mint egy profi

Sok régi technológia zavarja az otthonát? Ebben a technikai újrafeldolgozási útmutatóban megtudhatja, mit tegyen vele!

Olvassa tovább

A szerzőről