Las barras de navegación horizontales son el estándar en el diseño web, así que si tu audiencia no es muy experta en tecnología, son una apuesta segura. Pero si buscas algo diferente, una navegación lateral puede mantener tu sitio con un aspecto limpio y, al mismo tiempo, ofrecer un acceso sencillo a los enlaces.
En este, mi segundo Webflow Bit, te mostraré lo rápido y fácil que es crear un menú de navegación lateral para tus sitios web en Webflow.
Paso 1: Arrastra un componente de barra de navegación
Abre el panel Añadir a la izquierda, desplázate hasta la sección Componentes y arrastra el componente de barra de navegación al lienzo (o usa la pestaña Navegador si necesitas más precisión).
Paso 2: Dale estilo a tu barra de navegación
Establece la posición en fija a la izquierda y ajusta los valores superior, izquierdo e inferior a 0px. (O colócala a la derecha, ajustando los valores superior, derecho e inferior a 0px). También puedes añadir un color de fondo si quieres.
Paso 3: Define los ajustes de tu barra de navegación
Con la barra seleccionada, ve a la pestaña Ajustes y configura el icono del menú en "Escritorio e inferior" para que se muestre en todos los puntos de interrupción. (Aunque, por supuesto, puedes elegir el punto de interrupción que prefieras). Luego, marca la casilla "El menú ocupa la altura de la página" y establece el tipo de menú en "sobre la izquierda".
Opcional: Dale estilo al icono del menú
Si cambiaste el color de fondo de tu barra de navegación, es posible que también debas cambiar el color del icono del menú. Para ello, ve a la pestaña Navegador, selecciona el botón del menú, asígnale una clase y cambia el color de fuente. Quizás debas hacer lo mismo con los enlaces de tu navegación.
Consejo profesional: comprueba el contraste del color del texto
Verifica la legibilidad de tus enlaces de texto con el Comprobador de contraste de color de WebAIM para que las personas con problemas de visión también puedan navegar por tu sitio.
Paso 4: ¡Previsualiza y disfruta!
Haz clic en el botón de vista previa en la parte superior izquierda del Diseñador para ver tu trabajo en acción.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
