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>