<!DOCTYPE html>
<html>
<head>
<title>Sidenav Simple</title>
<meta name="viewport" content="width=device-width">
<style>
body {
font: normal 16px/18px Helvetica, sans-serif;
}
#menu {
top: 0px;
left: 0px;
width: 0px;
height: 100%;
position: fixed;
background: #000000;
overflow-x: hidden;
padding-top: 48px;
transition: 0.4s;
z-index: 1;
}
#menu a {
padding: 24px;
text-decoration: none;
font-size: 24px;
color: #848484;
display: block;
transition: 0.4s;
}
#menu a:hover, #menu a:focus {
color: #FFFFFF;
}
</style>
<script>
function open_() {
document.getElementById("menu").style.width="240px";
}
function close_() {
document.getElementById("menu").style.width="0px";
}
</script>
</head>
<body>
<div id="menu" onclick="close_()">
<a href="#">Inicio</a>
<a href="#">Equipo</a>
<a href="#">Galería</a>
<a href="#">Contacto</a>
</div>
<p style="color:#000000;cursor:pointer" onclick="open_()"><b>menu</b></p>
</body>
</html>
Comentarios sobre la versión: 1.0 (1)