0

Mi página consta de dos partes dentro del body: el menú y el main. He tratado hacer un modelo responsive con ambos, y el menú va perfectamente. El problema es el main.

Cuando nos encontramos ante un ancho de ventana menor a 768px y clicamos para descubrir el menú, el main debería moverse un 35% a la derecha: un 30% por el ancho del menú y otro 5% para dejar un pequeño margen. Sin embargo, el main no se desplaza y queda cubierto parcialmente por el menú.

Os dejo el código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Ejercicio_1</title>    
<link rel="stylesheet" type="text/css" href="ejercicio_1.css" />
</head>

<body>
    
    <header>
        
        <input type="checkbox" id="btn_menu" />
        <label for="btn_menu"><img src="imagenes/icono_menu.png" alt="menú" /></label>
        
        <nav class="menu">
            <ul>
                <li><a href="">Inicio</a></li>
                <li><a href="">Servicio</a></li>
                <li><a href="">Productos</a></li>
                <li><a href="">Clientes</a></li>
                <li><a href="">Contactos</a></li>
            </ul>
        </nav>
        
    </header>
    
    <div class="main">
        
        <!--deberían añadir un par de "lorem"-->
        
    </div>
    
</body>
</html>

Por aquí tenéis el código CSS. El bloque de código que teóricamente falla es el último, señalado por un comentario.

@charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    font-family: sans-serif;
}

header{
    width: 100%;
    background: #4E94AB;
}

#btn_menu{
    display: none;
}

header label{
    display: none;
    width: 30px;
    height: 30px;
    padding: 10px;
    border-right: 1px solid #FFF;
}

header label:hover{
    cursor: pointer;
    background: rgba(0,0,0,0.3);
    
}

.menu ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
}

.menu li{
    flex-grow: 1;/*Investigar propiedad*/
    text-align: center;
    border-right: 1px solid #FFF;
}

.menu li:hover{
    background: rgba(0,0,0,0.3);
}

.menu a{
    display: block;
    padding: 15px 20px;
    color: #FFF;
    text-decoration: none;
}




/*Dispositivos menores*/




@media (max-width:768px){
    
    header label{
        display: block;
    }
    
    .menu{
        position: absolute;
        background: #4E94AB;
        width: 30%;
        height: 100%;
        margin-left: -70%;
        transition: all 0.5s;
    }
    
    .menu ul{
        flex-direction: column;
    }
    
    .menu li{
        border-top: 1px solid #FFF;
    }
    
    .menu ul:last-child{
        border-bottom: 1px solid #FFF;
    }
    
    #btn_menu:checked ~ .menu{
        margin-left: 0;
    }
    
    
    
    /*NO FUNCIONA*/
    #btn_menu:checked ~ .main{
        margin-left: 35%;
    }
    
}

Muchas gracias.

2
  • Prueba agregando un # en los href de los anchor
    – DavElsanto
    Commented el 9 ago. 2021 a las 1:01
  • ¿Dónde añado el #: dentro de donde deberían ir los links? Lo he probado y nada Commented el 10 ago. 2021 a las 23:16

1 respuesta 1

2

Básicamente sucede porque el estilo está afectando solamente a lo que está dentro del header, ya que como todo se aplica en cascada el checked no se puede revisar desde fuera. La única forma que encontré que te puede servir es aplicar un pequeño script en javascript.

Se espera el click en la zona para desplegar el menú y luego si se despliega se cambia el margen a 35%, y si no está abierto el menú el margen vuelve a 0.

@charset "utf-8";
/* CSS Document */

body{
    margin: 0;
    font-family: sans-serif;
}

header{
    width: 100%;
    background: #4E94AB;
}

#btn_menu{
    display: none;
}

header label{
    display: none;
    width: 30px;
    height: 30px;
    padding: 10px;
    border-right: 1px solid #FFF;
}

header label:hover{
    cursor: pointer;
    background: rgba(0,0,0,0.3);
    
}

.menu ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
}

.menu li{
    flex-grow: 1;/*Investigar propiedad*/
    text-align: center;
    border-right: 1px solid #FFF;
}

.menu li:hover{
    background: rgba(0,0,0,0.3);
}

.menu a{
    display: block;
    padding: 15px 20px;
    color: #FFF;
    text-decoration: none;
}




/*Dispositivos menores*/




@media (max-width:768px){
    
    header label{
        display: block;
    }
    
    .menu{
        position: absolute;
        background: #4E94AB;
        width: 30%;
        height: 100%;
        margin-left: -70%;
        transition: all 0.5s;
    }
    
    .menu ul{
        flex-direction: column;
    }
    
    .menu li{
        border-top: 1px solid #FFF;
    }
    
    .menu ul:last-child{
        border-bottom: 1px solid #FFF;
    }
    
    #btn_menu:checked ~ .menu{
        margin-left: 0;
    }
    
    
    
    /*NO FUNCIONA
    #btn_menu:checked ~ .main{
        margin-left: 35%;
    }
    */
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Ejercicio_1</title>    
<link rel="stylesheet" type="text/css" href="ejercicio_1.css" />
</head>

<body>
    
    <header>
        
        <input type="checkbox" id="btn_menu" />
        <label for="btn_menu"><img src="imagenes/icono_menu.png" alt="menú" /></label>
        
        <nav class="menu">
            <ul>
                <li><a href="">Inicio</a></li>
                <li><a href="">Servicio</a></li>
                <li><a href="">Productos</a></li>
                <li><a href="">Clientes</a></li>
                <li><a href="">Contactos</a></li>
            </ul>
        </nav>
        
    </header>
    
    <div class="main">
        
        <h2>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis mauris risus, dictum vulputate ante commodo nec. Etiam finibus nulla quis est interdum, vel convallis leo lacinia. Maecenas ornare lectus a egestas pellentesque. Ut porta magna a dictum blandit. Aenean commodo neque nec accumsan tristique. Donec nibh lorem, mattis id tincidunt eget, pharetra ac ipsum. Nunc in semper est. Duis imperdiet egestas efficitur. Sed metus massa, sagittis sed nisi porttitor, auctor imperdiet nisl. Suspendisse eget hendrerit ex. Quisque vel leo eros.
        </h2>
        
    </div>
    
    <script>
        
        function cambiarMarginLeft(valor) {
            document.getElementsByClassName("main")[0].style.marginLeft = valor;
        }
        document.getElementById( "btn_menu" ).addEventListener( "click" , function ()
        {
            if(document.getElementById("btn_menu").checked){
                cambiarMarginLeft("35%");
            }else{
                cambiarMarginLeft("0");
            }
        });
        
   </script>
</body>
</html>

1
  • 1
    Cierto, no se aplica por la cascada. En cuanto al script, te lo agradezco. Lo he comprobado y funciona perfectamente el script. Ahora bien, recién empecé con la programación web. Es más, hace solo una semana que empecé a estudiar Javascript, luego estudiaré más adelante tu código. Gracias de nuevo. Commented el 10 ago. 2021 a las 23:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.