5 menús de navegación para tu sitio web

Por Noticias0

burger-menu-1200x489.jpg

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

burger-menu
Burger menu

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

google nexus menu
google nexus menu

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

megamenu-responsivo
megamenu responsivo

Comenta

Tu Email no será publicado. Campos requeridos *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.