Estoy tratando de crear una barra de menú en el costado de mi página web que cuando una pantalla tiene cierto tamaño, abre el menú desde la derecha en una cierta cantidad.

• Si la pantalla es mayor a 600 pero menor a 992, entonces abre 250px.

• Si la pantalla es inferior a 600, entonces se abre al 100%.

Hasta ahora puedo hacer que el JS funcione solo, pero luego trato de usar 'if ($ (ventana). ancho ()> = 600) {}', entonces nada de eso funciona (tengo un botón para abrir - pero pierde su funcionalidad con el siguiente código.

A continuación se muestra mi trabajo inicial;

 if($(window).width() >= 600) { function openNav() { document.getElementById("myMenu").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("myMenu").style.width = ""; document.getElementById("main").style.marginLeft= "0"; document.body.style.backgroundColor = "white"; } } if($(window).width() < 600) { function openNav() { document.getElementById("myMenu").style.width = "100%"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("myMenu").style.width = ""; document.getElementById("main").style.marginLeft= "0"; document.body.style.backgroundColor = "white"; } }

Sé que estos funcionan individualmente, pero funcionarán con todos los tamaños de pantalla.

 function openNav() { document.getElementById("myMenu").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("myMenu").style.width = ""; document.getElementById("main").style.marginLeft= "0"; document.body.style.backgroundColor = "white"; }