| Autor | Zpráva | ||
|---|---|---|---|
| opsadik Profil * |
#1 · Zasláno: 10. 10. 2022, 22:48:30
Zdravím, mám problém s hlavním menu na webu. Většina webu je all in one page, takže na jednotlivé části odkazuju přes kotvy. V mobilní verzi využívám hamburger menu, které po rozkliknutí překryje celou obrazovku. Teď ale řeším problém s tím, jak menu zavřít po kliknutí na odkaz, aby mobilní uživatel pochopil, že už je na požadované kotvě. Na hamburger menu používám následující JS
function menu() {
var x = document.getElementById("menu");
if (x.style.display === "flex") {
x.style.display = "none";
} else {
x.style.display = "flex";
}
}Dá se nějakým způsobem omezit funkčnost skriptu jen na mobilní zařízení, aby menu na desktopu nemizelo? Případně dělám něco špatně? |
||
| Kajman Profil |
#2 · Zasláno: 11. 10. 2022, 09:23:32
Co nenestavovat přímo display, ale dát menu elementu třídu, zda má být rozbalené nebo ne. A display podle rozbalenosti pomocí css měnit jen pro mobily.
|
||
| opsadik Profil * |
#3 · Zasláno: 12. 10. 2022, 23:22:59
Můžu poprosit to nějak líp rozepsat? Úplně si nedovedu představit, co tím myslíte.
|
||
| anonym_ Profil * |
#4 · Zasláno: 12. 10. 2022, 23:34:23
opsadik:
classList.toggle místo .style.display. A pak v CSS nastavit breakpointem, kdy má být menu viditelné vždy (třída .hidden nic neudělá), nebo skryté (třída .hidden bude mít display: none).
Pokud ani teď nevíš, hledej media queries.
|
||
| Kajman Profil |
#5 · Zasláno: 13. 10. 2022, 07:15:47
opsadik:
Přesně tak to bylo myšleno, funkci menu stačí upravit na function menu() {
var x = document.getElementById("menu");
if(x) {
x.classList.toggle('hamburger_on');
}
}A tam, kde v css máte media queries blok, který rozhoduje, zda na mobilu zobrazit ikonu hamburgeru, tak do stejné podmínky dáte něco jako #menu {display:none}
#menu.hamburger_on {display:flex} |
||
|
Časová prodleva: 3 dny
|
|||
| opsadik Profil * |
#6 · Zasláno: 15. 10. 2022, 23:17:58
Děkuji moc, už to funguje podle mých představ.
|
||
|
Časová prodleva: 2 roky
|
|||
0