<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<style>
.menuDesplegable { position: relative;
height: 45px;
overflow: hidden;
}
.menuDesplegable, .menuDesplegable * { -moz-box-sizing: border-box;
box-sizing: border-box;
}
/* checkbox utilizado para alternar el estado del menu */
.menuDesplegable input[type="checkbox"] { position: absolute;
left: 0;
top: 0;
opacity: 0;
}
/* Icono principar para alternar el estado del menu */
.menuDesplegable > label { z-index: 1000;
display: block;
position: absolute;
width: 40px;
height: 40px;
float: left;
top: 0;
left: 0;
background: white;
text-indent: -1000000px;
border: 6px solid black; /* border color */
border-width: 6px 0;
cursor: pointer;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; /* Transicion para mover la etiqueta */
}
/* rayas internas dentro de la etiqueta */
.menuDesplegable > label::after { content: "";
display: block;
position: absolute;
width: 100%;
height: 18%;
top: 19%;
left: 0;
border: 6px solid black; /* border color */
border-width: 6px 0;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; /* Transicion para mover la etiqueta */
}
/* contenedor <UL> con las opciones del menu */
.menuDesplegable ul { margin: 0;
padding: 0;
position: absolute;
margin-left: 40px;
background: #eee;
left: -100%; /* hide menu intially */
height: 40px; /* height of menu */
font: bold 14px Verdana;
text-align: center;
list-style: none;
opacity: 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
-moz-perspective: 10000px;
perspective: 10000px;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in; /* transition for animating UL in and out */
}
.menuDesplegable li { display: inline;
margin: 0;
padding: 0;
}
/* hace referencia a la etiqueta para cerrar el menu */
.menuDesplegable ul label { cursor: pointer;
position: relative;
height: 100%;
text-align: center;
}
/* etiqueta para el boton de cerrar o recojer el menu */
.menuDesplegable ul label::after { content: "x";
display: inline-block;
line-height: 14px;
color: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
width: 20px;
height: 20px;
background: black;
font-size: 18px;
margin: 5px;
margin-top: 10px;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.menuDesplegable input[type="checkbox"]:checked ~ label, .menuDesplegable ul label:hover::after { -moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg); /* hace rotar 180º */
}
.menuDesplegable > label:hover, .menuDesplegable > label:hover::after, .menuDesplegable input[type="checkbox"]:checked ~ label, .menuDesplegable input[type="checkbox"]:checked ~ label::after { border-color: darkred; /* resaltamos cambiando el color */
}
.menuDesplegable input[type="checkbox"]:checked ~ ul { left: 8px; /* simulamos una pequeña animación */
opacity: 1;
-moz-box-shadow: 1px 1px 5px gray;
-webkit-box-shadow: 1px 1px 5px gray;
box-shadow: 1px 1px 5px gray;
}
.menuDesplegable li a { display: block;
float: left;
text-align: center;
text-decoration: none;
color: black;
margin: 0;
padding: 10px;
padding-right: 15px;
height: 100%;
}
.menuDesplegable li a:hover { background: black;
color: white;
}
</style>
</head>
<body>
<p>Pulsa sobre el icono para visualizar el menu</p>
<div class="menuDesplegable">
<input type="checkbox" id="togglebox" />
<ul>
<li><a href="http://www.lawebdelprogramador.com">Home</a></li>
<li><a href="http://www.lawebdelprogramador.com/cursos/">Cursos</a></li>
<li><a href="http://www.lawebdelprogramador.com/foros/">Foros</a></li>
<li><a href="http://www.lawebdelprogramador.com/Noticias">Noticias</a></li>
<li><label for="togglebox"></label></li>
</ul>
<label class="toggler" for="togglebox">Menu</label>
</div>
</body>
</html>
