En este tutorial crearemos un
menú superior desplegable haciendo uso de HTML5 y CSS3.
En este tutorial, te vamos
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.
Para comenzar el tutorial, vamos 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.
Transcribe los códigos y personaliza el menú
a tu gusto, es decir, sustituye 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 es indicar la anchura y altura del menú
html5. Lo hacemos de la siguiente manera:
nav{
width: 850px; /* Anchura del menú */
height:
25px; /* Altura del menú */
margin: 0 auto;
}
En este caso hemos 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ú).
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:
Creamos el siguiente código CSS:
Hasta el momento, lo que hemos desarrollado debería mostrar
algo como lo de la imagen:
Y el último paso que nos queda dar un poco de color al
menú, quitar el subrayado de los enlaces, incluir las pseudoclases de CSS... en
fin, este código, te ayudará a comprender como hacerlo:
Por último 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 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.
Otra cosa, si quieres, también puedes descargar los códigos del
menú html5 y CSS3 de este post.
https://dl.dropboxusercontent.com/u/47322481/menu_horizontal_html5_CSS3.zip
Recuperado de:
http://www.miopiblog.com/2013/02/crear-menu-horizontal-simple-mediante.html
No hay comentarios.:
Publicar un comentario