Elabora Menú en HTML5 Y CSS (Tutorial)

Este vídeo que aquí se presenta consiste en que puedas visualizar de una forma mucho mas Fácil y practica la creación de este tipo de menús, se debe tener en cuenta que cuando hablamos de HTML5 Todo será mas avanzado y además te brinda un apoyo muy grande en el momento de empezar a hacer tu pagina web. 

elementos html para hacer un menú:

<nav></nav> Indica que lo que hay en su interior es una zona de navegación

<ul></ul> Lista desordenada.

<li> </li> Elementos de la lista desordenada, cada una de las partes del menú

<a></a> Enlaces de cada ítem del menú.

HTML completo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<nav> <!-- Indica que lo que hay en su interior es una zona de navegación -->   <ul> <!-- Lista desordenada-->   <li><a href=”www.diseñandoweb.com”>Home</a></li> <!-- Elementos del menú-->   <li><a href=”www.diseñandoweb.com”>Blog</li>   <li><a href=”www.diseñandoweb.com”>Acerca de</li>   <li><a href=”www.diseñandoweb.com”>Contacto</li>   </ul>   <nav>

Con esto ya tendremos creado nuestro menú en HTML. Ahora lo que hará falta es darle estilo para que tenga el diseño que queramos. A continuación os muestro unos retoques básicos con CSS:

Darle una anchura fija al menú

nav {width: 300px;}

Quitar el círculo anterior cada item del menú

li { list-style-type: none;} También puedes cambiar el círculo por otro símbolo

Cambiar el color del texto

a { color: grey;}

Quitar el subrayado de cada enlace

a {text-decoration: none;}

Aumentar el tamaño de cada elemento de la lista

ul li { padding: 2px;}

Cambiar el color del fondo

ul { background-color: blue; }

Cambiar el color del texto al pasar el ratón por encima

a:hover { color: white; }

 Cambiar el color del fondo de cada ítem al pasar el ratón por encima

ul li:hover {background-color: grey:}

Aumentar el tamaño del texto al pasar el ratón por encima:

ul li:hover { font-size: 16px}