[SOLUCIONADO] Conflicto entre javascript y css

[mblascog]

Buenas,
Por medio de media-query visualizo un botón. Dicho botón, al hacer clic visualiza un menú.
Todo esto pasa a los 700 píxeles, es decir, cuando el navegador mide menos de 700 píxeles, aparece el botón. Al hacer clic, aparece el menú. Si ensancho el navegador a más de 700píxeles, desaparece el botón del menú, pero no el menú.

El código es el siguiente:

Código CSS:

#menuR {
    display:none;
    clear:both; 
    width:60%;
    min-width:300px;
    margin-left:-36px;
    background:#99B59F;
}
#menuR nav ul{
    list-style:none;
}
#menuR nav ul li {
    height:30px; 
    border:1px solid #FFFCD8;
    padding-top:6px;
    padding-left:5px;
    background:url('../imatges/fletxeta.png') no-repeat;
    background-position:right center;
}
#menuR nav ul li a {
    text-decoration:none;
    color:#FFFCD8;
    font:bold 1em Helvetica, Arial;
}
 
@media screen and (min-width:700px){
    #menuR {display:none;}
}
 

Y al pulsar clic sobre el botón:

Código Javascript:

function MenuVisible() {
    if (document.getElementById("menuR").style.display == "block") 
        document.getElementById("menuR").style.display = "none";
    else 
        document.getElementById("menuR").style.display = "block"; 
}
 

Qué tengo que hacer para que al pasar de 700píxeles, desaparezca el menú?

Gracias

[mbm150]

Hola,

una solución es en la función comprobar el ancho de la ventana y actuar según lo que sea, aunque yo suelo hacer estas cosas añadiendo clases en lugar de editar las propiedades:

Código CSS:

/*Añado una clase para cuando este abierto*/
#menuR.open{
    display:block;
}
/*Y las hago desaparecer cuando me interesa*/
@media screen and (min-width:700px) {
    #menuR, #menuR.open {
        display:none;
    }
}
 

Código Javascript:

/*Esta funcion añade o quita la clase al clickar*/
function MenuVisible() {
    document.getElementById("menuR").classList.toggle('open');
}
 

La ventaja de esto es que puede añadir transiciones y otras cosas en la clase añadida. Aquí esta en funcionamiento: http://jsfiddle.net/mbm150/51znynr4/

De todas formas, como te he dicho antes puedes averiguar el ancho con js y desde javascript modificarlo también.

Saludos.

[fede5426]

La solución más simple que a mi se me ocurre es meter el botón y el menú dentro de un contenedor, y aplicar el display none o display block con media queries a ese contenedor y no solo al botón de menú.

Algo así:

Código HTML:

<div class="menuR">
    <button class="boton">MENU</button>
    <nav class="lista-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>  
</div>
 

Código CSS:

@media screen and (min-width:700px){
    .menuR{
        display:none;
    }
}
 

Agrego también el Jquery de aparición de menú clickeando el botón..

Código Javascript:

$(document).ready(function(){
    
    $(".boton").click(function(){
        
        $(".lista-menu").slideToggle();
        
    }); 
    
});
 

Y de paso dejo un codepen funcionando:

http://codepen.io/fede5426/pen/vOpLQj

Saludos

[mblascog]

Gracias por tu respuesta, me ha gustado, nunca lo había hecho así.
De todas formas me gustaría saber porqué cuando cuando se asigna la propiedad display:block en javascript, luego en css, se hace caso omiso cuando asignas display:none?

De nuevo, gracias

[mblascog]

Gracias fede 5426, pero creo que no me sirve, pues el botón es siempre visible cuando el navegador tiene un ancho inferior a los 700 píxeles. Y el menú se visualiza cuando haces clic a dicho botón.
De todas maneras, no acabo de entender el motivo por el que css no puede cambiar una propiedad asignada por javascript.

Gracias.

[mblascog]

Sigo peleándome con el tema.
Veo que lo que se asigna en javascript pasa por encima de lo que se pretenda hacer con media queries, motivo por lo que, siguiendo los consejos, definiré los mediaqueries en javascript.

Lo que quiero es ocultar la capa menuR cuando el navegador supere los 700 píxeles, en el caso que esté visible. Si está visible, es porqué mediante javascript se ha asignado document.getElementById("menuR").style.display = "block";

He puesto este código pero no hace nada:

Código Javascript:

$(document).ready(function(){
    if (window.matchMedia("(min-width:700px)").matches) {
        if ($("#menuR").css("display") == "block")
            $("#menuR").css("display", "none");
    }
}
 

[mbm150]

Hola,

el problema del CSS es la prioridad, creo que si pones !important ya funciona...

Código Javascript:

@media screen and (min-width:700px){
    #menuR {display:none !important;}
}
 

Este es tu ejemplo inicial funcionando correctamente: http://jsfiddle.net/mbm150/51znynr4/1/

Saludos.

[mblascog]

Fenomenal. Muchas gracias