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.
#
en loshref
de los anchor