You are here
Menú animado con CSS 3 Sin categoría 

Menú animado con CSS 3

Menú animado con CSS 3

Nuevo ejemplo de animaciones CSS 3, en el que construimos un menú animado con HTML y CSS, sin necesidad de Javascript ni jQuery.

Lo primero que vamos a hacer es crearnos nuestro HTML, es decir, el código necesario que utilizaríamos para crearnos nuestro menú normalmente, eso si, realizado con DIVs y no con tablas.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 5.0 Transitional//EN”>

<html>
<head>
<title>Menú animado con CSS</title>
<link rel=”stylesheet” href=”menu.css” type=”text/css”>
</head>

<body>

<div class=”menu-general”>
<ul class=”nav”>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”</a></li>
<li><a href=”#”>Javascript</a></li>
<li><a href=”#”>ASP</a></li>
<li><a href=”#”>PHP</a></li>

</ul>
</div>
</div>
</body>
</html>

Bien pues ahora vamos a dar estilos a los DIV y al listado para crear nuestro menú dinámico.
Lo primero que vamos a realizar es un fondo, simplemente para que el menú quede bien en nuestro ejemplo.

body{
background: -webkit-gradient(linear, left top, left bottom, from(#34bdfc), to(#f5f8fa));
}

Este fondo es de un color azul que va degradándose a un blanco de arriba hacia abajo.

A continuación vamos a darle estilos a nuestro menu-general:

.menu-general {
position: relative;
float: left;
}

Simplemente vamos a hacer que flote a la izquierda y que tenga una posición relativa (Esto es importante para que nuestra animación funcione correctamente).

Ahora ya pasamos a los estilos del listado de nuestro menú:

ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: 50px;
left: 100px;
padding: 60px 0 60px 0;
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;
}

Aquí lo que hacemos es quitar los guiones del listado, situamos el listado y le damos un tamaño. Al final le damos la animación de transformar el tamaño del 50% al 100%. esto nos dará la animación que queremos, es decir, que se haga grande el botón.

ul.nav li a {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
background: #f77e08;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
-o-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-o-border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
-o-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
-o-border-bottom-left-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #0e169b;
-moz-box-shadow: 2px 2px 4px #0e169b;
-o-box-shadow: 2px 2px 4px #0e169b;
}

En este estilo lo que hacemos es construir los botones de nuestro menú. Le damos un color de fondo, unas esquinas redondeadas, y una sobra alrededor.

ul.nav li a:hover {
background: #faef77;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}

Por ultimo le damos estilos a nuestro menú para cuando pasemos por encima con el ratón.

Con esto ya tendría que funcionarnos nuestro menú, eso si, recordando siempre que en el momento de escribir este artículo sólo funcionaba completamente para los navegadores Safari y Chrome y parcialmente para Mozilla Firefox y Opera.


 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts

Comments

Leave a Comment


*