Como crear un menú con HTML 5 y CSS

En este tutorial crearemos un menú superior desplegable haciendo uso de HTML5 y CSS.

En la creación de un sitio web, un menú superior es de uso común, dado que permite brindar al usuario un resumen de enlaces hacia nuestro contenido, ya sea agrupándolos en categorías o brindando enlaces directos a páginas importantes. Para hacer el menú en HTML5 usaremos una lista desordenada en la que iremos poniendo cada uno de los elementos del menú.

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ú.

Crearemos nuestra estructura básica en HTML utilizando los elementos anteriores.

Nota: Reemplazar en tu estructura HTML el enlace que aparece en el gif por el de tu página.

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 les enseñaremos 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}

Aquí les dejamos un enlace que les resultará interesante para crear menús. En esta página tienen muchos menús ya diseñados, con el código HTML y CSS para copiar y pegar en tu página. Y, si quieres, también puedes editar el que tu escojas en la web para luego pegarlo en la tuya tal y como quieres que se vea finalmente.

http://cssmenumaker.com/css-horizontal-menus

Recuperado de:

https://devcode.la/tutoriales/como-crear-menu-desplegable-con-html-y-css/

http://xn--diseandoweb-4db.com/htmlcss/como-crear-un-menu-con-html-5-y-css/