A veces, el menú de navegación puede ser una de las partes más difíciles del proceso de diseño. Esta área única puede establecer el tono para la usabilidad de todo el sitio.
Hoy veremos 30 ejemplos inspiradores de un buen diseño de menú. Aunque muchos son CSS puros, otros agregan algunas imágenes y / o JavaScript para aumentar la estética y la funcionalidad.
Profundizando más profundo
Siempre es más útil tener una idea del proceso de desarrollo que simplemente ver una imagen, por lo que en esta sección analizaremos brevemente la estética de cada menú y cómo el desarrollador logró el efecto. De esta manera, puede inspirarse en cómo utilizar nuevos métodos para crear sus propios menús únicos.
Marea de seda
Este es uno de los menús más mínimos de la lista. Básicamente es solo texto simple con un rollover de cuadro azul extendido, pero es realmente fácil de implementar y resulta en un buen efecto.
Glenn Sorrentino
Este ejemplo utiliza bordes de CSS en la parte superior e inferior del menú que aumentan de grosor cuando se pasa sobre ellos.
Strutta
Si tiene un fondo texturizado, considere usar la transparencia en su menú para aumentar la estética. Esto podría hacerse fácilmente con RGBa en CSS3.
Elbow Park
Otro ejemplo de transparencia en el área de navegación. Este utiliza un efecto similar al primer ejemplo con el cuadro de selección extendiéndose hasta la parte superior de la página. Esto aumenta la visibilidad y permite un diseño más transparente.
Thoughtbot
Al desplazar estos botones, el fondo cambia a un rojo más brillante. Esto, combinado con el aspecto brillante (logrado con un PNG transparente) crea la ilusión de que el área se ilumina.
Diseño de tuerca de toffee
Este hermoso ejemplo utiliza sprites CSS para la navegación. El menú completo es un PNG que muestra cada una de las pestañas en tres estados: apagado, encendido y encendido + seleccionado.
Safarista
Aquí vemos cada sección de la navegación como un híbrido de imagen y texto. El icono, el degradado y el fondo más pequeño forman la imagen de cada sección, mientras que el texto más grande tiene un estilo HTML con un efecto de desplazamiento de subrayado.
David jonsson
Otro simple efecto flotante que sangra hasta la parte superior. Este tenía iconos ocultos que solo se muestran cuando pasas el mouse por encima. Un buen efecto!
Asvalia
Realmente me gustan los colores y el texto torcido en este menú. Los vuelcos resplandecientes son perfectos.
Estudios de bonsai
Este es un menú vertical extremadamente simple con transparencia y oscurecimiento. Hace el trabajo, se ve genial y se puede construir en minutos.
Iglesia de grandes expectativas
Otro menú de navegación vertical. Este implementa algunos iconos básicos pero atractivos y un GIF de fondo con un degradado para el desplazamiento.
Ryan Couser
Este utiliza algunos sprites simples para lograr el hover. Cada icono es una imagen con los estados de encendido y apagado.
Kk media
Aquí vemos un menú vertical con iconos más detallados. Cada enlace es un elemento de la lista HTML con una imagen de fondo simple aplicada en CSS.
Club de mordida
Realmente me encantó esta barra de navegación. El brillo realmente llama tu atención y la inversión de los colores hace que el rollover sea perfecto. Esto también utiliza un sprite para cada elemento del menú, cada uno con tres estados.
Capital City Equipment Company
Pensé que la selección de navegación con forma de casa era inteligente en este caso. El texto en cada enlace es parte de la imagen, si replica algo como esto, sería sencillo usar texto vivo sobre la imagen de fondo.
Ocio De La Fresa
Este menú desplegable utiliza una pequeña PNG transparente que se repite para extraer el efecto de opacidad reducida. Nuevamente, podemos esperar que esto sea mucho más fácil en el futuro cercano con RGBa cuando se incorporen más navegadores.
Estudio artificial
Sí, lo has adivinado, más imágenes de imagen (¿sientes una tendencia aquí?). Los botones grandes y los gradientes excelentes crean una hermosa área de navegación.
Cognitivo
Este fue, con mucho, uno de los conceptos más originales que encontré en mi búsqueda. Para extraer el efecto 3D único, el diseñador ha utilizado la friolera de cuatro estados para cada botón que cambia dependiendo de si el botón está seleccionado, se ha desplazado o tiene una selección adyacente.
Más bondad del menú CSS
Ahora que hemos discutido algunos buenos ejemplos, aquí hay un montón más para ver. ¡Utilice la función de inspección de su navegador para ver el código y las imágenes detrás de cualquiera que le guste!
Cafe Manndible
Código Greene
Ópera
Conejo Mac
Clark Builders
Sr. B y amigos
Subvertir
La vida swish
Lata de misterio
LiveResto
FeelSocial
Gowalla
Festival de Nueva Zelanda
Descargar menús pre-construidos!
¿Necesita un buen punto de partida para sus propios menús CSS? Echa un vistazo a estos grandes recursos gratuitos.
- 13 estilos: los menús se basan en listas, son muy ligeros, fáciles de implementar y compatibles con todos los navegadores.
- CSS Menu Maker
- CSS Play: Menús
- Menús CSS
- Menús CSS de Cross Browser gratis
Ahora muéstranos el tuyo
¿Tienes un menú CSS del que estás particularmente orgulloso? Utilice los comentarios a continuación y deje un enlace para que podamos ver. También háganos saber cuál de los ejemplos anteriores le gustó más.