Home » , , , , » Crear un Menú Vertical con Bordes Redondos con Animaciones CSS3

Crear un Menú Vertical con Bordes Redondos con Animaciones CSS3

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





Video Tutorial, sobre como crear un Menú Vertical con Bordes Redondos 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">
  <ul>
   <a href="#">Inicio</a>
   <a href="#">Acerca</a>
   <a href="#">Servicios</a>
   <a href="#">Contacto</a>
   <a href="#">Otros</a>
  </ul>
 </section>
</body>
</html>



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

#menu{
 width:200px;
 height:100%;
 position:fixed;
 background:transparent;
}

#menu ul{
 padding-top:25px;
 margin-left:-30px;
 margin-right:20px;
}
#menu ul a{
 text-decoration:none;
 color:#f2f2f2;
 font:16px Verdana;
 display:block;
 background:#086A87;
 margin-bottom:10px;
 padding:10px 20px 10px 50px;
 border-radius:15px;
 transition:background .6s, margin-left .6s, margin-right .6s;
 -webkit-transition:background .6s, margin-left .6s, margin-right .6s;
 -moz-transition:background .6s, margin-left .6s, margin-right .6s;
 -o-transition:background .6s, margin-left .6s, margin-right .6s;

}

#menu ul a:hover{
 margin-right:-20px;
 margin-left:20px;
 background:#00BFFF;
}

0 comentarios:

Publicar un comentario