Cómo crear un menú

header,nav{
width:95%;
margin:10px auto;
min-height:30px;
text-align:center;
border-radius:5px;
background:#006;
color:#FFF;
}
#primer{
display:inline-block;
min-height:10px;

min-width:75px;
padding:5px;
text-align:center;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit–o-transition:all 1s;
-ms-o-transition:all 1s;
color:#006;
}
#primer:hover{
padding:10px;
background:-moz-linear-gradient(#F90 0%, #C00 100%);
background:-o-linear-gradient(#F90 0%, #C00 100%);
background:-webkit-linear-gradient(#F90 0%, #C00 100%);
background:-ms-linear-gradient(#F90 0%, #C00 100%);
background:linear-gradient(#F90 0%, #C00 100%);
transition-property:all;
cursor:pointer;
opacity:0.3;
color:#FFF;
font:bold;
-webkit-transform: translate(0px, 15px);
-moz-transform: translate(0px, 15px);
-o-transform: translate(0px, 15px);
transform: translate(0px, 15px);
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
padding:10px;
}
nav{
text-align:left;
height:60px;
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%);
background:linear-gradient(#FFF 0%, #DEDEDE 100%);
}
#codigo{
background:#999;
color:#FFF;
padding:10px;
border:soilid 1px #DEDEDE;
border-radius:5px;
}

Cómo crear un menú

Cómo en los post anteriores sombre cómo crear un menú tanto con css cómo con css3 me puse a pensar ¿Y porque no un tutorial donde podamos aprender a crear menú más avanzados aprovechando las propiedades de css3 para crear menú.

El resultado de estar pensando es este otro mini-tutorial, si no has visto el post de Menú con html5 y css3 o menú dinámico con css3 y html5 entonces no podrás entender bien este tema así que te exhortamos que le des un vistazo antes de seguir leyendo el mini tutorial.

Cómo crear un menú con css3?.

Simple primero creamos nuestro documento html5 el cual contendrá el menú que vamos a crear , y luego lo enlazamos a la hoja de estilo css más abajo dejo el código HTML completo.

<!DOCTYPE html>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet” href=”stylo-menu.css” type=”text/css” />
<title>Crear menú</title>
</head>
<body>
<header>
 <h2>Como crear un menú con css3 y html5</h2>
</header>
<nav>
 <menu id=”primer”>Home</menu>
    <menu id=”primer”>Imagenes</menu>
    <menu id=”primer”>Contactos</menu>
    <menu id=”primer”>Historia</menu>
    <menu id=”primer”>Culturas</menu>   
</nav>
</body>
</html>

Bueno ahora con el código HTML copiado y suponiendo que lo entiendes pasamos al código que le dará un aspecto dinámico a nuestro menú.

header,nav{
 width:95%;
 margin:10px auto;
 min-height:30px;
 text-align:center;
 border-radius:5px;
 background:#006;
 color:#FFF;
 }
#primer{
 display:inline-block;
 min-height:10px;

 min-width:75px;
 padding:5px;
 text-align:center;
 -moz-transition:all 1s;
 -o-transition:all 1s;
 -webkit–o-transition:all 1s;
 -ms-o-transition:all 1s;
 color:#006;
 }
#primer:hover{
 padding:10px;
 background:-moz-linear-gradient(#F90 0%, #C00 100%);
 background:-o-linear-gradient(#F90 0%, #C00 100%);
 background:-webkit-linear-gradient(#F90 0%, #C00 100%);
 background:-ms-linear-gradient(#F90 0%, #C00 100%);
 background:linear-gradient(#F90 0%, #C00 100%);
 transition-property:all;
 cursor:pointer;
 opacity:0.3;
 color:#FFF;
 font:bold;
    -webkit-transform: translate(0px, 15px);
    -moz-transform: translate(0px, 15px);
    -o-transform: translate(0px, 15px);
    transform: translate(0px, 15px);
 box-shadow:0 0 10px #000;
 -moz-box-shadow:0 0 10px #000;
 -ms-box-shadow:0 0 10px #000;
 -o-box-shadow:0 0 10px #000;
 -webkit-box-shadow:0 0 10px #000;
 padding:10px;
 }
nav{
 text-align:left;
 height:60px;
 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%);
 background:linear-gradient(#FFF 0%, #DEDEDE 100%);
 }

si te fijas como en los tutoriales anteriores hemos utilizado tanto la transparencias como los degradados por eso la insistencia de que tienes que ver las entradas anteriores sombre crear menú con css3.

Lo primero es que para crear menú elegantes tenemos que saber manejar las funciones de css3 como transform, animation,transition y algunas mas que se me quedan, bueno en este pequeño tutorial de cómo crear menú utilizamos transition, y transform, en las próximas entradas vamos a ir utilizando las demás propiedades para seguir creando y animando etiquetas HTML.

Apariencia de nuestro menu.

Como crear un menú con css3 y html5

Home
Imagenes
Contactos
Historia
Culturas

Si lo pudiste notar el código css3 que utilizamos es muy simple solo no hemos visto hasta ahora las propiedades de transform y como vez en el código css solo necesita que le pasemos los argumentos que queremos que tome nuestra etiqueta html.

En el caso de nuestro menú lo que le hemos indicado con la línea de código transform: translate(0px, 15px); es que traslade la etiqueta menú correspondiente a la posición que le estamos indicando en este caso le decimos que en el eje x no se desplace y que en el eje y se desplace a 15px hacia abajo.

Creo que es bastante sencillo el código hasta este punto más adelante vamos a seguir complicando mas tipos de menú y vamos a seguir creando menú con estilos y aspectos diferentes utilizando las propiedades de css3 para darle más dinamismo y vida a nuestro menú.

Bueno amigo hasta aquí este mini-tutorial de cómo crear un menú, veremos otros casos diferentes y con otros tipos de animaciones en el siguiente post.

Gracias y hasta la próxima entrada..

Comments

  1. By Ruben suarez

  2. By admin

  3. By Ruben suarez

Deja un comentario

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