2.5Navegación: anclas, menús y desplazamiento
Lo esencial en 30 segundos
- Menús = la navegación principal (cabecera); anclas = enlaces hacia una sección precisa de la misma página.
- El desplazamiento fluido (smooth scroll) anima suavemente la llegada a un ancla.
- En móvil, el menú se adapta (a menudo un menú "hamburguesa") — a probar.
Hilo conductor — Nadia enlaza la página de inicio
La página de inicio del carpintero es larga: presentación, trabajos, contacto. Nadia añade un menú de anclas arriba ("Trabajos", "Contacto"): un clic desplaza suavemente hasta la sección correcta. En el móvil, comprueba que el menú hamburguesa se abre bien y que las anclas funcionan con el dedo.
Última etapa del nivel 2 — hacer navegable la página larga.
1. Menús, anclas, desplazamiento
El menú principal (en la cabecera) estructura la navegación entre páginas. Las anclas (enlaces de anclaje) llevan a una sección precisa de la misma página: se coloca un "ancla de menú" sobre una sección, luego un enlace hacia ella (p. ej. #realisations). El desplazamiento fluido (smooth scroll) hace la llegada suave en vez de un salto brusco.
Nadia coloca anclas en "Trabajos" y "Contacto", luego crea enlaces hacia ellas en un pequeño menú de inicio. Los enlaces en general (botones, widgets) pueden apuntar a páginas, anclas, un correo o un teléfono.
2. Navegación móvil
En móvil, la navegación se pliega a menudo en un menú "hamburguesa" (icono de tres rayas). Hay que probar: ¿se abre el menú? ¿las anclas llevan al lugar correcto? ¿son los objetivos lo bastante grandes para el dedo?
Una buena navegación guía al visitante sin perderlo: pocas entradas, etiquetas claras y un comportamiento idéntico en ordenador y móvil.
🔎 Ejemplo concreto — Menú de anclas para página larga (caso Nadia)
Secciones: #presentation, #realisations, #contact
Menú de inicio: "Trabajos" → #realisations, "Contacto" → #contact
Desplazamiento fluido activado.
Móvil: menú hamburguesa probado, anclas OK con el dedo.
Botón "Llamar" → tel:+213...Resultado: una página larga fácil de recorrer.
Lección: anclas + desplazamiento fluido + prueba móvil.
Vocabulario de la sección
- Menús
- La navegación principal del sitio (cabecera), entre las páginas.
Ejemplo sencillo: Inicio · Trabajos · Contacto en la cabecera.
Lo que no es: confundir menú de páginas y anclas internas.
Reflejo: menú = páginas del sitio.
- Anclas (enlaces de anclaje)
- Enlaces que llevan a una sección precisa de la misma página.
Ejemplo sencillo: "Trabajos" → #realisations en la página de inicio.
Lo que no es: usar un ancla para ir a otra página.
Reflejo: ancla = misma página; #sección.
- Desplazamiento fluido (smooth scroll)
- El desplazamiento animado y suave hacia un ancla.
Ejemplo sencillo: clic "Contacto" → deslizamiento suave hasta abajo.
Lo que no es: un salto brusco desagradable.
Reflejo: activar el desplazamiento fluido en las anclas.
- Enlaces
- Los botones y widgets pueden apuntar a página, ancla, correo o teléfono.
Ejemplo sencillo: botón "Llamar" → tel:+213…
Lo que no es: un enlace vacío o roto.
Reflejo: elegir el destino según la intención (página/ancla/tel/correo).
- Navegación móvil (hamburguesa)
- El menú plegado en icono en móvil, a probar con el dedo.
Ejemplo sencillo: menú hamburguesa que se abre y cuyas anclas funcionan.
Lo que no es: un menú móvil que no se abre o con objetivos demasiado pequeños.
Reflejo: probar el menú móvil de verdad.
En la práctica — Hacer navegable una página larga
- Coloca anclas de menú sobre tus secciones (p. ej. #realisations, #contact).
- Crea enlaces (menú o botones) hacia esas anclas.
- Activa el desplazamiento fluido.
- Prueba en móvil: menú hamburguesa, anclas con el dedo, objetivos bastante grandes.
Guion listo para decir — presentar la navegación al cliente (20 s)
"Su página de inicio es un poco larga, así que le he añadido un pequeño menú: un clic en 'Trabajos' o 'Contacto' desplaza suavemente hasta la sección correcta. En el móvil, este menú se pliega con limpieza y he comprobado que funciona bien con el dedo."
Mostrar que la navegación guía al visitante, sobre todo en el móvil.
Plantilla para copiar y pegar — plan de navegación
MENÚ PRINCIPAL (páginas): _______________
ANCLAS (misma página): #________ #________ #________
ENLACES HACIA ANCLAS (menú/botones): _______________
DESPLAZAMIENTO FLUIDO: activado / desactivado
BOTÓN TEL (tel:) / CORREO (mailto:): _______________
PRUEBA MÓVIL (hamburguesa + anclas con el dedo): hecha / por hacerPágina larga (one-page)
Menú de anclas indispensable para navegar entre secciones.
Sitio multipágina
Menú de páginas en la cabecera; anclas como complemento en las páginas largas.
Contacto directo
Botones tel:/mailto: para contactar al artesano en un clic, sobre todo en móvil.
Móvil
Menú hamburguesa claro, pocas entradas, objetivos amplios para el dedo.
✓ Buenas prácticas
- Usar anclas para las páginas largas.
- Activar el desplazamiento fluido.
- Probar el menú y las anclas en móvil.
✗ Errores frecuentes
- Confundir ancla (misma página) y enlace de página.
- Olvidar probar el menú móvil.
- Etiquetas de menú vagas o demasiado numerosas.
Puntos clave
- Menús = páginas; anclas = secciones de la misma página.
- Desplazamiento fluido para una llegada suave.
- Enlaces a página, ancla, teléfono, correo.
- Probar la navegación móvil (hamburguesa).
Reto 48h — aplica mañana
En una página larga, coloca 2 anclas, crea enlaces hacia ellas, activa el desplazamiento fluido, luego prueba el menú hamburguesa y las anclas en un teléfono real. 20 minutos.
- Creo anclas y enlaces internos.
- Activo el desplazamiento fluido.
- Pruebo la navegación en móvil.
Preguntas frecuentes
¿Qué diferencia hay entre un ancla y un enlace de página?
Un ancla lleva a una sección de la misma página (#sección); un enlace de página lleva a otra página del sitio. Confundirlos rompe la navegación.
¿Cómo creo un menú que desplaza hasta una sección?
Se coloca un "ancla de menú" sobre la sección, luego se crea un enlace hacia su identificador (#ancla). Al activar el desplazamiento fluido, la llegada es suave.
¿Debo probar el menú en móvil?
Sí: en móvil, el menú se pliega a menudo en hamburguesa. Comprueba que se abre, que las anclas funcionan y que los objetivos son lo bastante grandes para el dedo.
Nadia quiere que un clic en "Trabajos" lleve a la sección de trabajos de la misma página, con suavidad. ¿Qué implementa?