Ricostruire la navbar e il mega menu di Webflow
Ricostruisci da zero la navbar e il mega menu di Webflow — una struttura desktop fluida e accessibile, un menu mobile responsive con blocco dello scroll e mega menu a tutta larghezza.
4 lezioni
Hai mai fissato la navbar della homepage di Webflow chiedendoti come sia costruita? Questa serie la ricostruisce da una tela bianca — niente plugin, solo una comprensione profonda e pratica di layout, posizionamento e accessibilità.
Si parte da una struttura desktop solidissima (Flexbox, spacing fluido con clamp() e un underline all’hover che non sposta mai il layout), la si rende pienamente responsive con un menu mobile che risolve il classico bug dell’altezza dvh e blocca lo scroll della pagina, poi si costruiscono tre mega menu accessibili a tutta larghezza e si rendono responsive anche quelli. Ogni episodio è no-code, rispecchia il sito reale di Webflow e viene con un cloneable per smontarlo con le tue mani.
In questo corso
- Costruire una navbar Webflow: struttura desktop e hover Ricostruisci da zero la navbar desktop di Webflow — struttura Flexbox solida, nav accessibile, spacing fluido con clamp() e un underline all'hover che non sposta il layout.
- Navbar Webflow responsive: unità dvh e blocco scroll Trasforma una navbar desktop Webflow in un menu mobile pienamente responsive — risolvi il bug dell'altezza mobile con le unità dvh, domina il wrap del flex e blocca lo scroll a menu aperto.
- Costruire un mega menu Webflow: struttura e accessibilità Trasforma un dropdown Webflow semplice in un mega menu accessibile a tutta larghezza — un trucco di posizionamento per pannelli edge-to-edge, struttura a liste semantiche, colonne, banner e aria label.
- Rendere un mega menu Webflow pienamente responsive Fai funzionare un mega menu Webflow su ogni schermo — riposiziona il nav menu, rendilo scrollabile, riduci le colonne con larghezze calc() e pulisci gli stati hover per il mobile.