Reszponzív menü

Reszponzív menü
2021-03-22T15:07:18+01:00
2021-03-24T19:01:44+01:00
2022-10-15T21:16:18+02:00
*deleted_23419333
Sziasztok!

HTML:

<body> <div id="header"> <h1>Cím</h1> <a onclick="myFunction();" id="ajj">&#8801;</a> </div> <div id="nav"><ul> <li>1</li> </ul></div> </body>

CSS:

#ajj { display:none; } #nav { display:block; } @media screen and (max-width: 600px) { #ajj { display:block; } #nav { display:none; } }

JS:

function myFunction() { var x = document.getElementById("nav"); var y = document.getElementById("ajj"); if ( x.style.display === "none" || x.style.display === "" ) { x.style.display = "block"; y.innerHTML = "&#8802;"; } else { x.style.display = "none"; y.innerHTML = "&#8801;"; } }

Ha asztali gépen lekicsinyítem a böngésző ablakot, akkor megjelenik a ≡ karakter. Ha felnagyítom, akkor eltűnik. Tökéletes. Ha megnyitom a menüt, az is szépen működik, viszont ha elrejtem az is működik, de ha az ablak méretén ezután változtatok és az nagyobb lesz mint 600 pixel, akkor rejtve marad a menü, ami viszont így nem jó. Amit szeretnék: 600 pixel fölötti ablak szélesség esetén mindig látszódjon a #nav div, akárhányszor is hívtam meg a myFunction() függvényt.
Mutasd a teljes hozzászólást!
Hali!

Amit szeretnék: 600 pixel fölötti ablak szélesség esetén mindig látszódjon a #nav div, akárhányszor is hívtam meg a myFunction() függvényt.

Akkor ne úgy járj el, hogy inline stílus adsz neki a hamburger-menüre kattintáskor, hanem pl. osztállyal jelezd:
HTML:
<body> <div id="header"> <h1>Cím</h1> <a onclick="return myFunction();" class="nav" id="ajj"></a> </div> <div id="nav" class="nav"> <ul> <li>1</li> </ul> </div> </body>
CSS:
#ajj { display: none; } #nav { display: block; } @media screen and (max-width: 600px) { #ajj { display: block; } #ajj::before { content: "\2262"; } #ajj.opened::before { content: "\2261"; } #nav { display: none; } #nav.opened { display: block; } }
JS:
function myFunction() { let navs = document.querySelectorAll('.nav'); navs.forEach((el) => el.classList.toggle('opened')); return false; }
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd