5 menús de navegación para tu sitio web
Te traemos 5 menús para tu web realizados con CSS y Javascript
Una de las partes más importantes de una web es la navegación, por eso el menú es uno de los principales elementos del diseño web.
Un menú mal realizado o con problemas de navegación o visibilidad puede obligar al usuario a salir del sitio web por el simple hecho de no poder navegarlo correctamente.
Existen muchas maneras de mostrar la navegación en la web, tenemos menúes verticales, horizontales, tipo hamburguesa, megamenús, etc etc.
En este post te vamos a mostrar 5 excelentes ejemplos de lo que podemos realizar con CSS y muy poco JS (en algunos)
1 – Burger Menu inspirado por Material Design
Victor Freire nos entrega este excelente código de un menú hamburguesa inspirado por Material Design para Android
2 – Menú responsivo con efecto hover en los items del menú
Bogdan Blinnikov nos trae este excelente menú responsive con un muy buen efecto al pasar sobre cada item.
3 – Google Nexus Website Menu
Uno de los menús más completos. Realizado por illnino este menú se desliza con un efecto muy agradable donde algunos subelementos se expanden. Cuando se desplaza sobre el icono hamburguesa del menú, se revelarán los iconos de la barra lateral. Al hacer clic en el icono, se mostrará todo el menú de la barra lateral. El primer elemento de menú de la barra lateral podemos encontrar un menú de búsqueda que se despliega de la misma manera como los otros elementos del menú.
4 – Fullscreen Burguer Menú
Una Kravets nos trae un menú hamburguesa muy utilizado. Al hacer clic sobre el ícono hamburguesa se despliega el menú ocupando toda la pantalla.
5 – Mega Menú responsivo
Arjun Amgain creó un excelente menú responsivo. Dónde una de las opciones del menú tiene un submenú con imagen y sublinks por lo que es considerado un megamenú.
Ejemplo básico pero muy bueno para iniciar un desarrollo con esta clase de menú en nuestro página web