Google+ Crear menú horizontal simple mediante html5 y CSS3 - Turorial - Miopiblog

lunes, 11 de febrero de 2013

Crear menú horizontal simple mediante html5 y CSS3 - Turorial

En este tutorial, te voy a enseñar a crear un menú horizontal simple, utilizando html5 y CSS3. El lenguaje html5, lo vamos a utilizar para crear la estructura del menú horizontal simple. Por otro lado, el diseño de nuestro menú de ejemplo del tutorial, estará basado en CSS3. Además, te voy a explicar que tienes que hacer para que este menú funcione correctamente en todos los navegadores, y versiones de Internet Explorer.

Menú web


Para comenzar el tutorial, voy a crear la estructura básica de nuestro menú horizontal html5 de ejemplo. Para crear la estructura de un menú html5, utilizamos la etiqueta <nav>, dentro de la cual debemos insertar una lista html. Para que lo entiendas mejor, en el siguiente ejemplo, te muestro como podría quedar la estructura de un menú horizontal simple, realizado mediante html5:


<nav>
        <ul>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/SEO" target="_blank">SEO</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/tutoriales" target="_blank">Tutoriales</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/crear%20web" target="_blank">Crear Web</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/css3" target="_blank">CSS3</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/dise%C3%B1o%20web" target="_blank">Diseño web</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/search/label/google" target="_blank">Google</a></li>
            <li><a href="http://miopiblog.blogspot.com.es/2013/02/seorimicuaro-que-es-y-para-que-sirve.html" target="_blank"><strong>SEORIMÍCUARO</strong></a></li>
        </ul>
        </nav>

Si quieres, puedes copiar el código y personalizar el menú a tu gusto, es decir, sustituir las direcciones web por las que quieras y los enunciados o términos que aparecen en los botones del menú. El resto, lo puedes dejar igual.

Muy bien, hasta el momento, se debería ver esto:






Ahora llega el turno de dar estilo al menú, utilizando CSS3. Lo primero que vamos a hacer en cuanto al estilo se refiere, es indicar la anchura y altura del menú html5 de ejemplo. Lo hacemos de la siguiente manera:


nav{
    width: 850px; /* Anchura del menú */
    height: 25px; /* Altura del menú */
    margin: 0 auto;
}


Yo en este caso he elegido un ancho de 850px y una altura de 25px para el menú. No obstante, te recomiendo modificar el ancho por la medida que a tí te venga bien (normalmente, el ancho debe ser igual o algo menor, a la anchura del elemento en el cual va a ir insertado el menú) . Ten en cuenta que si el ancho del menú es demasiado bajo y los botones no caben, cuando el menú esté termiando, éstos, se agruparán en una segunda fila, como en la imagen:


Continuamos dando al menú algo más de estilo mediante CSS3. Ahora vamos a indicar que no queremos que se muestre el puntito negro de la izquierda de los botones ó <li> de la lista. También tenemos que alinear los botones del menú, ya que nuestra estructura html5, hasta el momento, muestra una lista simple de html.

Creamos el siguiente código CSS:


nav ul{
    list-style: none; /* Eliminamos el puntito negro */
    display: block;
    }
 
nav ul li{
    float: left; /* Alineamos los botones del menú */
    margin: 0 5px; /* Distancia de separación entre botones */
}


Hasta el momento, lo que hemos desarrollado debería mostrar algo como lo de la imagen:


Y el último paso que nos queda, es dar un poco de colorido al menú, quitar el subrayado de los enlaces, incluir las pseudoclases de CSS... en fin, creo que este código, comentado completamente, te ayudará a comprender como hacerlo:


nav ul li a, nav ul li a:link{
    text-decoration: none; /* Quitamos el subrayado de los enlaces */
    font-size: 18px; /* Tamaño del texto del menú */
    color: #F0F8FF; /* Color del texto */
    padding: 3px 10px; /* Establecemos ancho y alto de los botones */
     cursor: pointer;
    transition: all 1s linear; /* Comienzan las transiciones CSS3 */
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear; 
-o-transition: all 1s linear;
background-color: #078d12; /* Color de fondo para navegadores sin soporte CSS3 */
background: -webkit-radial-gradient(#00008B, #00FF7F); /* Degradado de fondo CSS3 */
   background: -moz-radial-gradient(#00008B, #00FF7F); /* Degradado de fondo CSS3 */
   -moz-border-radius: 7px 7px 0 0; /* Bordes redondeados */
-webkit-border-radius: 7px 7px 0 0;
}
 
nav ul li a:visited, nav ul li a:active{
    color: #ffd800; 
}
nav ul li a:hover{
    background: #00008B; /* Cambiamos color de fondo cuando cursor del ratón esta encima */
    color: #00ff90; /* Cambiamos color de texto */
  }

Por cierto, un último detalle: para que el menú funcione correctamente en los navegadores que no soportan aún html5, como por ejemplo, algunas versiones de Internet Explorer, deberás hacer algo. Yo te recomiendo utilizar html5shiv de Google code. Puedes usar este medio, introduciendo entre <head> y </head> el siguiente código:


<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Perfecto! ya tenemos nuestro menú horizontal simple, creado y listo para funcionar. Si te apetece, puedes crear este ejemplo de menú html5 y CSS3, y visualizarlo / comprobar su funcionamiento.


Recuerda que, a pesar de utilizar html5shiv, en versiones inferiores a internet explorer 10, se ve algo diferente, pero también funciona correctamente.

Otra cosa, si quieres, también puedes descargar los códigos del menú html5 y CSS3 de este post.




Seguidores (seguir blog)

Me siguen en google plus: