Diseño y efectos
Ajusta cómo se organiza la barra de navegación, hazla fija al hacer scroll y añade animaciones sutiles, todo desde la sección Diseño del Menu Builder.
Espaciado y alineación
En la sección Diseño puedes controlar cómo se distribuyen los elementos del menú:
- Alineación — dónde se sitúan los elementos en la barra: inicio, centro, fin, espacio entre elementos o espacio uniforme.
- Separación — el espacio entre elementos del menú.
- Relleno horizontal / vertical — el relleno interior de la barra de navegación.
- Radio de borde del contenedor — redondea las esquinas de toda la barra.
- Desplazar último elemento — fija el último elemento del menú en el extremo opuesto (útil para un botón de "Contacto" o "Acceder").
Navegación fija
Activa Sticky para mantener la barra de navegación fija en la parte superior de la pantalla mientras el visitante hace scroll.
| Opción | Descripción |
|---|---|
| Reducir al hacer scroll | La barra se vuelve más compacta una vez que se ha hecho scroll en la página. |
| Sombra | Añade una sombra bajo la barra cuando está fija. |
| Espejo de diseño | Usa una alineación diferente para el estado fijo respecto al estado por defecto. |
| Transición | Con qué suavidad anima la barra entre estados (en segundos). |
| Z-index | Orden de apilamiento, por si la barra necesita estar sobre otros elementos fijos. |
Barra de progreso de scroll
Una fina barra que se rellena conforme el visitante hace scroll en la página, un toque popular en artículos largos y documentación.
- Activa Barra de progreso de scroll en la sección Diseño.
- Elige su color, altura (1–10 px) y posición (arriba o abajo de la barra de navegación).
Animación de entrada
Anima el menú cuando la página carga por primera vez. Elige entre Fundido, Deslizar arriba/abajo/izquierda/derecha, Zoom o Flip X, o déjalo en Ninguna.
También puedes ajustar la duración, un retardo antes de que comience y un escalonado para que los elementos aparezcan uno tras otro.
Animación hover de enlace
Añade una microinteracción cuando el visitante pasa el ratón sobre un enlace del menú. Las opciones incluyen Elevar, Escalar, Pulsar, Rebotar, Sacudir, Brillar y Subrayado animado.
Indicador de desplegable
Los elementos con submenú pueden mostrar un pequeño indicador. Elige la forma — triángulo, chevron, punto o ninguno — y opcionalmente su color, tamaño y si rota al abrir el desplegable.
El panel desplegable del submenú es totalmente personalizable en Estilo → Desplegable de submenú: radio de borde, relleno horizontal y vertical, tamaño de fuente, peso de fuente y ancho mínimo.
Scroll Spy
Scroll Spy resalta automáticamente el enlace de navegación correspondiente a la sección visible en el viewport mientras el visitante hace scroll en una página larga.
- Activa Scroll Spy en Diseño → Diseño.
- Establece un desplazamiento de activación (por defecto 80 px) — la altura de la barra fija se añade automáticamente en tiempo de ejecución.
- Activa opcionalmente el Scroll suave con actualizaciones del hash en la API History y anuncios en la región ARIA live para lectores de pantalla.
La última sección de la página siempre se activa al llegar al fondo. Los enlaces de la sección activa comparten el estilo visual definido en Colores → Enlace activo.
Todas las animaciones respetan la configuración prefers-reduced-motion del visitante — consulta la página de Accesibilidad.