Home » , , , , » Como crear un Menú Vertical con Animaciones CSS3

Como crear un Menú Vertical con Animaciones CSS3

Escrito Por Unknown el domingo, 20 de diciembre de 2015 | 10:28





Video Tutorial, sobre como crear un Menú Vertical con Animaciones CSS3. Para esto solo es de tener vinculado los códigos necesarios como el html y el css correspondiente.

A continuación se muestra el código HTML, para un archivo llamado: index.html:

<!DOCTYPE html>
<html>
<head>
 <title>Menu Vertical</title>
 <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
 <section id="menu_vertical">
  <ul>
   <a href="#">Inicio</a>
   <a href="#">Acera</a>
   <a href="#">Servicios</a>
   <a href="#">Otros</a>
   <a href="#">Contacto</a>
  </ul>
 </section>
</body>
</html>



Ahora el Código/Estilos CSS, para un archivo llamado: estilos.css:
*{
 padding:0;
 margin:0;
}

#menu_vertical{
 width:240px;
 height:100%;
 background:#FACC2E;
 position:fixed;
}

#menu_vertical ul{
 margin:auto;
 width:90%;
 padding-top:20px;
}

#menu_vertical ul a{
 text-decoration:none;
 display:block;
 padding:14px;
 color:#f2f2f2;
 font:bold 16px Verdana;
 border-bottom:1px solid #f2f2f2;
 transition:background .6s, color .6s;
 -webkit-transition:background .6s, color .6s;
 -moz-transition:background .6s, color .6s;
 -o-transition:background .6s, color .6s;
}
#menu_vertical ul a:hover{
 background:#f2f2f2;
 color:#FACC2E;
}

0 comentarios:

Publicar un comentario