1

yo hice un menu el cual no se abre cuando toco en el icono de menu ( le puse la propiedad checked).

*{margin: 0px;
    padding:0px;
    box-sizing: border-box; 
}

body {
    font-family: 'Open Sans Condensed','Open Sans', sans-serif;
    
}

header{
    width:100%;
    height: 70px;
    background-color:#4682B4;
    color:white;
    position :fixed;
    top:0px;
    z-index:1000;
    
}
.contenido {
    width:98%;
    margin: auto ;
    display:table;/*darle estilo como si fuera una tabla esto seria una fila*/
   
}
h1{float:left;

font-size: 40px;}


#boton{display:none;
  
    
    
}


header .icon-menu{
cursor:pointer;
    
float:right;
margin-top:18px;
font-size: 26px;
}




.menu{position: absolute; /*no deja espacio al desplasarse*/
    top:0px;
    left:0px;
    width: 100%;
    height: 32vh;/*para que ocupe el 100 porciento del alto de la ventana*/
   background: rgba(70, 130, 180,0.8);
       margin-top: 70PX;   
    transition:all 0.5s; 
       
    transform:translatex(-100%);
   
    
    
    
   
  
    

}



.menu a {
    
    padding-left: 10px;
    display :block;
    /*ponerlo tipo columna*/
    
    color:white;
    height: 50px;
     padding-top:10px;
    
    
    text-decoration-line: none; /*subrayado*/
    list-style-type: none;/*numeracion*/

    border-bottom: 1px/*tamaño*/solid  rgba(255,255,255,0.6);
    
   
    
}
.menu a:hover{
    background-color: rgba(70, 130, 180,0.9);
}
#boton:checked ~ .menu{
    transform: translatex(0%);
    
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title> Tienda de Mascotas</title>
    <link rel="stylesheet"  href="iconos/css/fontello.css">
    <link rel="stylesheet" href="css/1.css">
    
</head>
<body>
   <header>
  <section class="contenido">
    
    <h1  class="icon-guidedog">Mascotas</h1> 
    <input type="checkbox" id="boton">
    <label for="boton"class="icon-menu"></label>
      

<!-- begin snippet: js hide: false console: true babel: false -->

    <nav>
       <div class="menu">
        <ul>

                <li><a href="#Inicio">Inicio</a> </li>
                <li><a href="#Mascotas">Mascotas</a> </li>
                <li><a href="#Blog">Blog</a></li>
                <li><a href="#Contacto">Contacto</a></li>

            </ul>
        </div>


       </nav>
                </section>
   </header>

</body>
</html>

2 respuestas 2

0

menu no es "hermano" (siblings) de input, sino "sobrino", su hermano es nav. Tienes que cambiar esta parte de tu codigo y dejarla así:

#boton:checked ~ nav .menu{
0

Intenta siempre simplificar eso ayuda a ver pequeños errores como éste. Puedes prescindir del div y aplicar la clase .menu diréctamente a nav. De esa forma ya funcionará.

* {
    margin: 0px;
    padding:0px;
    box-sizing: border-box; 
}
header{
    width:100%;
    height: 70px;
    padding: 10px;
    background-color:#4682B4;
    color:white;
    position :fixed;
    top:0px;
    z-index:1000;
}


.menu {position: absolute; /*no deja espacio al desplasarse*/
    top:0px;
    left:0px;
    width: 100%;
    height: 32vh;/*para que ocupe el 100 porciento del alto de la ventana*/
    background: rgba(70, 130, 180,0.8);
    margin-top: 70PX;   
    transition:all 0.5s;
    transform:translatex(-100%);
}
.menu a {
    padding-left: 10px;
    display :block;
    /*ponerlo tipo columna*/
    color:white;
    height: 50px;
    padding-top:10px;
    text-decoration-line: none; /*subrayado*/
    list-style-type: none;/*numeracion*/
    border-bottom: 1px/*tamaño*/solid  rgba(255,255,255,0.6);
 
}
.menu a:hover {
    background-color: rgba(70, 130, 180,0.9);
}
#boton:checked ~ .menu{
    transform: translatex(0%);
    
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title> Tienda de Mascotas</title>
    <link rel="stylesheet"  href="iconos/css/fontello.css">
    <link rel="stylesheet" href="css/1.css">
</head>
<body>
<header>
    <h1  class="icon-guidedog">Mascotas</h1> 
    <input type="checkbox" id="boton">
    <label for="boton"class="icon-menu">Show menu</label>
      
<nav class="menu">
        <ul>
                <li><a href="#Inicio">Inicio</a> </li>
                <li><a href="#Mascotas">Mascotas</a> </li>
                <li><a href="#Blog">Blog</a></li>
                <li><a href="#Contacto">Contacto</a></li>
            </ul>
       </nav>
   </header>
</body>
</html>

Tu Respuesta

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