Apri i dropdown di Webflow in automatico con gli attributi

Trasforma i normali dropdown di Webflow in dropdown che si aprono da soli — in automatico al caricamento della pagina, mentre entrano nel viewport allo scroll, o quando qualcuno clicca un link o un pulsante — usando solo una manciata di attributi custom. Nessuna libreria JavaScript in più, nessun codice da modificare: cloni un progetto, aggiungi gli attributi e configuri tutto dal pannello impostazioni di Webflow.

Perché farlo? Un dropdown aperto è un riflettore. Magari è la domanda chiave di una pagina FAQ, il primo modulo di un corso che stai vendendo, o una sezione su cui vuoi che un link porti dritto. Questo approccio copre tutti questi casi — dropdown singoli, quelli guidati dal CMS, più sezioni, eccezioni su mobile e link cross-page — con lo stesso, piccolo set di attributi.

Come funziona

Tutto gira attorno a un piccolo blocco di codice custom contenuto in un componente che cloni. Legge i tuoi attributi e fa il resto, così non apri mai l’editor di codice. Il caso più semplice è un singolo dropdown che si apre al caricamento: seleziona l’elemento dropdown stesso (non il toggle del dropdown) e dagli FC-drop-behavior="open". Pubblica ed è aperto nell’istante in cui la pagina carica. Tutto qui.

Il contenuto da CMS richiede un’idea in più. Qualsiasi cosa modifichi su un elemento dentro una Collection List vale per ogni item della lista, quindi non puoi semplicemente impostare l’attributo su open e aspettarti che reagisca un solo dropdown. La soluzione è la capacità di Webflow di legare il valore di un attributo a un campo CMS: aggiungi un campo plain text (chiamalo, ad esempio, “open behavior”) alla collection, scrivi open sul solo item che vuoi e lascialo vuoto sugli altri, poi lega FC-drop-behavior a quel campo. Ora si apre soltanto l’item il cui campo dice open.

Aprire più dropdown insieme richiede un modello mentale diverso. Un dropdown nativo di Webflow è costruito in modo che cliccare altrove lo chiuda — due non possono mai stare aperti insieme. Perciò, quando hai sezioni separate ognuna con la sua lista, non li apri tutti al caricamento: apri ognuno mentre entra nel viewport allo scroll. Dato che le sezioni sono abbastanza distanti da averne solo una a schermo alla volta, il risultato è identico a “sempre aperto” senza combattere il comportamento di Webflow — ed è sempre lo stesso attributo FC-drop-behavior="open" a guidarlo. Se preferisci non farlo girare sugli schermi piccoli, aggiungi FC-drop-breakpoint-off e impostalo sul breakpoint da cui la funzionalità deve disattivarsi (landscape o portrait, per esempio); reagisce al ridimensionamento del viewport, attivandosi e disattivandosi mentre attraversi quel punto.

Due tocchi finali lo rendono più garbato. Primo, i gruppi: metti FC-drop="group" sulla lista o sul div che racchiude un set di dropdown, e appena un visitatore ne apre uno da solo, l’auto-apertura di default si ferma per quel gruppo — così scorrere via e tornare indietro non riapre il default sopra ciò che ha scelto (un refresh lo ripristina). Secondo, il click-to-open: dai al trigger un attributo FC-drop-source e al dropdown un FC-drop-target corrispondente con lo stesso valore, e cliccando il link si apre quello specifico dropdown, nella stessa pagina o in una diversa, scorrendolo nel viewport. Per i link che escono da una Collection List, lega entrambi i valori al campo slug — gli slug sono sempre unici, così ogni link punta con precisione al suo dropdown. E arrivare tramite un link trigger disattiva in automatico il dropdown di default per quella visita.

Come si usa

1. Clona il progetto. Prendi il cloneable di Webflow — include la struttura e il componente di codice custom, con tutta la documentazione di configurazione direttamente sulla pagina.

2. Aggiungi il componente a ogni pagina che lo usa. Dato che il codice vive in un componente, copialo su ogni pagina dove i dropdown si affidano a questo comportamento — comprese le pagine che ospitano solo un dropdown target aperto da un link altrove.

3. Aprine uno al caricamento. Seleziona l’elemento dropdown (non il toggle) e aggiungi FC-drop-behavior="open". Pubblica e controlla il link live.

4. Fai la versione CMS. Aggiungi un campo plain text alla collection, impostalo su open sul solo item che vuoi e lega FC-drop-behavior a quel campo sul dropdown dentro la Collection List.

5. Aprine uno per sezione allo scroll. Per più liste su sezioni separate, metti FC-drop-behavior="open" su un dropdown in ciascuna; si apriranno man mano che ogni sezione entra nel viewport.

6. Aggiungi un’eccezione per breakpoint (opzionale). Su ogni dropdown che vuoi addomesticare, aggiungi FC-drop-breakpoint-off con il nome di un breakpoint per disattivare il comportamento da quel breakpoint in giù.

7. Raggruppa i tuoi dropdown (opzionale). Aggiungi FC-drop="group" a ogni lista o div che racchiude un set di dropdown così l’auto-apertura si fa da parte appena un visitatore prende il controllo.

8. Collega i link trigger. Metti FC-drop-source sul link o sul pulsante e FC-drop-target sul dropdown, usando lo stesso valore su entrambi. Per i link da CMS, lega entrambi allo slug così ogni trigger apre il suo dropdown unico.