8 ejemplos de navegación basada en símbolos, mejorada con CSS y JavaScript

Los iconos son algunas de las herramientas más versátiles del arsenal de un diseñador web. Se pueden utilizar como gráficos que llaman la atención en casi cualquier lugar de un sitio web o aplicación. Ya sea que estén notificando a los usuarios sobre una venta Flash o una nueva alerta en las redes sociales, generalmente transmiten el mensaje.

Por tanto, el uso de símbolos en la navegación de un sitio parece un complemento natural. Seguro que tiene sentido ópticamente. Pero se requiere una planificación cuidadosa para hacerlo bien.

Dado que la accesibilidad es una preocupación clave, se deben tomar medidas adicionales cuando no se proporcionan iconos con texto. El contexto también es importante. Si bien puede ser obvio que el ícono de la casita lo llevará a la página de inicio, otros conceptos no son tan fáciles de transmitir.

Hoy vamos a compartir 8 fragmentos de código CSS y JavaScript únicos que traen íconos a la navegación. En el camino, señalaremos algunos elementos que los hacen destacar, para bien o para mal.

Caja de herramientas del diseñador web

Descargas ilimitadas: ¡Más de 1,000,000 de plantillas web, diseños, complementos, recursos de diseño y mucho más!

Deslizarse a través

Esta navegación es atractiva, hace un uso óptimo del espacio asignado y tiene en cuenta la accesibilidad. Haga clic en un icono y verá un ingenioso efecto de “diapositiva” que resalta el icono y muestra el texto asociado (que también está disponible para lectores de pantalla). También tenga en cuenta que el ancho total del contenedor nunca crece ni se encoge, es maravillosamente uniforme.

Ver la pluma Menú de icono de diapositiva por Steve Gardner

Pastillas dulces y pegajosas

El efecto de navegación “pegajoso” que se encuentra en este menú con pestañas es divertido e intuitivo. Combinado con íconos limpios, texto descriptivo y colores llamativos, es perfecto para una aplicación móvil o web. Dicho esto, podría ser más eficaz en pequeñas dosis. Los menús más grandes pueden volverse un poco buenos, abrumadores y pegajosos.

Ver la pluma TAB Gooey Icon Concepto de menú de navegación

¿Por qué no cambiar toda la pantalla?

Claro, hay algunas similitudes con el ejemplo anterior. Pero este menú pegajoso lo hace aún mejor gracias a su efecto de fondo que cambia de color con cada selección. Los iconos animados también se “dibujan” cuando se hace clic en ellos, lo que hace que la experiencia del usuario sea más emocionante. Lo único que falta aquí es la accesibilidad, pero eso podría resolverse con algunos Texto de lectura de pantalla.

Ver la pluma Barra de pestañas animada por abxlfazl khxrshidi

Iconos verticales con contexto

Una barra de navegación vertical ofrece la posibilidad de crear una navegación altamente visual que no ocupa demasiado espacio. Pero los símbolos por sí solos no son suficientes. Por lo general, tiene sentido expandir el menú de alguna manera. Este ejemplo de CSS en particular utiliza un efecto de desplazamiento para mostrar el título del elemento del menú. Es ordenado, limpio e intuitivo.

Ver la pluma Menú de navegación de iconos vertical por Saxon Chuang

Entrar en modo oscuro

El diseño oscuro parece ser cada día más popular. Y esta barra de navegación de iconos es un complemento perfecto. Haga clic en uno de estos íconos negros y se volverán blancos brillantes con un lindo subrayado rojo. El menú usa jQuery para crear una animación suave. Nuevamente, querrá agregar sus propias funciones de accesibilidad.

Ver la pluma Navegación de iconos simple por Ganesh Chikhalikar

Apretar botones

Si está buscando una navegación infalible con una animación genial, debe detenerse aquí. Este menú basado en iconos fue diseñado para un quiosco y definitivamente puedes ver esa inspiración. Sin embargo, un diseñador diligente podría agregar texto aquí y usar este fragmento para un micrositio o una página de destino.

Ver la pluma Menú de icono de kiosco SVG por Chris Gannon

Navegación vertical expandible

Aquí hay otro menú vertical basado en íconos que funciona muy bien para mantenerse fuera del camino. Pero, ¿y si necesita más contexto? Haga clic o toque el icono de la hamburguesa en la parte superior izquierda de la pantalla para expandir el menú, que tiene un cuadro de búsqueda. Hay más que puede hacer aquí, como: B. expanda cada elemento del menú individual con un clic o desplazamiento. Pero de todos modos está bien.

Ver la pluma Menú de Google Nexus por Ahmed Elhanony

Formar un semicírculo

Este diseño circular podría ser un interesante menú de utilidades. Ocupa un espacio limitado y se puede guardar perfectamente en un rincón. Perfecto para dar a los usuarios acceso a algunas funciones clave de la cuenta, por ejemplo.

Ver la pluma Navegación circular de iconos por Mark Little

Opciones icónicas para sus menús

Los fragmentos anteriores ofrecen algo para todos. Tienen diferentes requisitos de espacio, interacciones y, a pesar de su apariencia simple, la complejidad subyacente. Cada uno podría ser una combinación perfecta para su proyecto en particular.

Esperamos que haya disfrutado de la variedad de estilos que se muestran aquí. Si está buscando aún más navegación basada en iconos, consulte la nuestra Colección CodePen.