Menu laterale con javascript
Ciao a tutti,
ho realizzato un semplice menu laterale che si apre e chiude premendo un pulsante con javascript; questo è il codice:
Codice:
function myMenu() {
var content = document.getElementById("pageLayout-content");
var menu = document.getElementById("pageLayout-nav");
if(content.style.paddingLeft=="280px"){
menu.style.transform="translateX(-280px)";
content.style.paddingLeft="0";
}else{
menu.style.transform="translateX(0)";
content.style.paddingLeft="280px";
}
}
contet è il contenuto della pagina che si allarga e si stringe con un padding-left
menu è ovviamente il menu che apro e chiudo traslando la x di -280px, ovvero la larghezza del menu, in modo da nasconderlo tutto
Nei CSS ho inizialmente:
- menu: transform:translateX(-280px)
- content: padding-left:0
ovvero ho il menu chiuso.
Tutto funziona però vorrei fare in modo che con min-width:1200px il menu sia aperto (ovvero translateX(0))
Ho provato a inserire una semplice media query nei css ma penso che javascript non la legga perché la prima volta che premo il button per chiudere il menu, me lo apre anche se è visibilmente già aperto, dalla seconda volta procede normalmente.
Come dovrei fare?
