Menú dinámico con CSS3 y HTML5

Menú animado con CSS3 y HTML5

Hola amigos como están, en esta ocasión he creado un menú o una botonera con estilo CSS3 para que nuestro sitio web se vea más animado, Para este menú dinámico con css3 y html5 vamos a necesitar que crees un documento con la estructura de HTML5 y luego en la etiqueta <nav> coloques los botones o menú, los cuales vamos a darle los estilos.

Ver el menu dinamico con css3 y html5

Estructura HTML5

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Manu animados con CSS3 y HTML5</title>
</head>
<body>
</body>
</html>

Dentro de la etiqueta body vamos a crear el siguiente código que representa los botones de nuestra botonera o menú.

<nav>
    <menu><b>Inicio</b></menu>
    <menu><b>Noticias</b></menu>
    <menu><b>Deportes</b></menu>
    <menu><b>Actualidad</b></menu>
    <menu><b>Facebook</b></menu>
    <menu><b>Twitter</b></menu>
</nav>

Ahora que ya tenemos creado nuestro menú en la etiqueta nav vamos darle estilo con CSS3 para eso nos vamos a situar dentro de la etiquetas head y vamos a colocar el siguiente codigo

<style>
body{background:#f0f0f0;}
nav{
    display:inline-block;   
    border-bottom:solid 1px #dedede;
    }
menu{
    display:inline-block;
    vertical-align:top;
    background:-moz-linear-gradient(#fff 0%, #DEDEDE 100%);
    background:-ms-linear-gradient(#fff 0%, #DEDEDE 100%);
    background:-o-linear-gradient(#fff 0%, #DEDEDE 100%);
    background:-webkit-linear-gradient(#fff 0%, #DEDEDE 100%);
    border-radius:5px;
    border:solid 1px #DEDEDE;
    margin:5px;
    color:orange;
    padding:10px;
    text-align:center;
    width:100px;
    transition:1s;
    }
menu:hover{
    background:-moz-linear-gradient(#09F 0%, #03F 100%);
    background:-ms-linear-gradient(#09F 0%, #03F 100%);
    background:-o-linear-gradient(#09F 0%, #03F 100%);
    background:-webkit-linear-gradient(#09F 0%, #03F 100%);
    box-shadow:0 0 10px #fff;
    -moz-box-shadow:0 0 10px #fff;
    -ms-box-shadow:0 0 10px #fff;
    -o-box-shadow:0 0 10px #fff;
    -webkit-box-shadow:0 0 10px #fff;
    text-shadow:0 0 5px #FFF;
    -moz-text-shadow:0 0 5px #FFF;
    -ms-text-shadow:0 0 5px #FFF;
    -o-text-shadow:0 0 5px #FFF;
    -webkit-text-shadow:0 0 5px #FFF;
    padding:15px;
    font-size:16px;
    color:#FFF;
   cursor:pointer; 
    }
</style>

Con este código en CSS3 lo primero que le indicamos a nuestra página HTML es que el fondo de documento va hacer gris , luego escribimos el nombre de la etiqueta donde esta nuestro menú que es nav a esta etiqueta le decimos que nos coloque todo en bloques con display: inline-block y le añadimos un border inferior de 1 px color gris. Luego hacemos lo mismo con la etiqueta del menú le decimos que todo se va a organizar en bloques y le establecemos un color de fondo con un degradado esto lo hacemos con background:-moz-linear-gradient(#fff 0%, #DEDEDE 100%); Después le establecemos el código que nos va a simular la animación de nuestro menudo en la etiqueta menu:hover.

Con el transition:1s; le indicamos que la animación va a durar un segundo y como en la primera parte le establecimos un padding de 10px ahora en el hover se lo ponemos de 15 para que cresca automatico al pasar el mouse por encima.

Entonces nuestro código completo seria el siguiente

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Menu animados con CSS3 y HTML5</title>
<style>
body{background:#f0f0f0;}
nav{
    display:inline-block;   
    border-bottom:solid 1px #dedede;
    }
menu{
    display:inline-block;
    vertical-align:top;
    background:-moz-linear-gradient(#fff 0%, #DEDEDE 100%);
    background:-ms-linear-gradient(#fff 0%, #DEDEDE 100%);
    background:-o-linear-gradient(#fff 0%, #DEDEDE 100%);
    background:-webkit-linear-gradient(#fff 0%, #DEDEDE 100%);
    border-radius:5px;
    border:solid 1px #DEDEDE;
    margin:5px;
    color:orange;
    padding:10px;
    text-align:center;
    width:100px;
    transition:1s;
    }
menu:hover{
    background:-moz-linear-gradient(#09F 0%, #03F 100%);
    background:-ms-linear-gradient(#09F 0%, #03F 100%);
    background:-o-linear-gradient(#09F 0%, #03F 100%);
    background:-webkit-linear-gradient(#09F 0%, #03F 100%);
    box-shadow:0 0 10px #fff;
    -moz-box-shadow:0 0 10px #fff;
    -ms-box-shadow:0 0 10px #fff;
    -o-box-shadow:0 0 10px #fff;
    -webkit-box-shadow:0 0 10px #fff;
    text-shadow:0 0 5px #FFF;
    -moz-text-shadow:0 0 5px #FFF;
    -ms-text-shadow:0 0 5px #FFF;
    -o-text-shadow:0 0 5px #FFF;
    -webkit-text-shadow:0 0 5px #FFF;
    padding:15px;
    font-size:16px;
    color:#FFF;
    }
</style>
</head>
<body>
<nav>
    <menu><b><a href="#" title="Inicio">Inicio</a></b></menu>
    <menu><b><a href="#" title="Noticias">Noticias</a></b></menu>
    <menu><b><a href="#" title="Deportes">Deportes</a></b></menu>
    <menu><b><a href="#" title="Actualidad">Actualidad</a></b></menu>
    <menu><b><a href="http://www.facebook.com" title="Facebook">Facebook</a></b></menu>
    <menu><b><a href="http://www.twitter.com" title="Twitter">Twitter</a></b></menu>
</nav>
</body>
</html>

Ver el menu en funcion

Espero y les pueda servir de algo y si quieres aprender mas de HTML5 y CSS3 los invito al Curso de HTML5 y CSS3 donde explicamos todo de una forma mas detallada. Recuerda que la programación web va evolucionando y el que no evoluciona se queda atrás así que actualizate con todas las nuevas tecnologías que van saliendo.

Gracias y hasta la próxima entrada

Temas relacionados con crear menú con css.

 

Comments

  1. By joo

Deja un comentario

Tu dirección de correo electrónico no será publicada.