Skapa ett anpassat dragspel - Webflow hjälp

Hur man lägger till ett dropdown-element

Dropdown-elementet har inbyggda standardåtgärder som gör det användbart som ett anpassat dragspel — det öppnar dropdown-listan när det klickas på och stänger det när ett annat element eller en del av sidan klickas på.

Du kan lägga till ett dropdown-element på din webbplats genom att gå till Lägg till panel (A) > Element > Avancerat och dra dropdown-elementet till arbetsytan.

Hur man ändrar standardstilar för dropdown

För att använda dropdown i ditt anpassade dragspel behöver du ändra standardstilarna för dropdown-elementet. Speciellt behöver du justera bredden så att dropdownen helt fyller utrymmet för dess överordnade element (dvs. vilket element som än håller det anpassade dragspelet).

För att ändra standardstilar för dropdown:

1. Välj det överordnade dropdown-elementet på Designer-ytan (givet en klass av "Dragspelsobjekt" i detta exempel)
2. Gå till Stilpanel > Storlek
3. Ställ in Bredd till 100%

Hur man anpassar din dropdown-omkopplare

Nu behöver du anpassa din dropdown-omkopplare så att den helt fyller sitt överordnade element och döljer innehållet inuti dropdown-listan när dragspelet är stängt. Justera dropdown-omkopplarens display och höjd egenskaper:

1. Välj dropdown-omkopplaren på arbetsytan och ge den en klass (t.ex. "Dragspelsomkopplare")
2. Gå till Stilpanel > Layout
3. Ställ in Display till flexbox för att fylla det horisontella utrymmet
4. Ställ in Justera till center för att centrera texten vertikalt
5. Gå till Stilpanel > Storlek
6. Ställ in ett Höjd-värde (t.ex. 80px)

Hur du stylar din dragspelsmeny

Om du förhandsgranskar din webbplats och klickar på din dragspelsmeny, kanske du märker att menyn öppnas, men standardinnehållet överlappar innehållet runt omkring. Detta sker eftersom standardstilen för position för rullgardinslistan är absolut. Du vill ändra det så att innehållet expanderar och flyttar omgivande element.

För att styla din dragspelsmeny:

1. Välj det överordnade rullgardinselementet (t.ex. "Dragspelsobjekt")
2. Klicka på "kugghjulsikonen" för att öppna Rullgardinsinställningar och visa Menyn
3. Välj Rullgardinslistan
4. Gå till Stilpanelen > Position
5. Ställ in Position till statisk
6. Välj det överordnade rullgardinselementet ("Dragspelsobjekt")
7. Gå till Stilpanelen > Storlek
8. Ställ in Överflöd till dolt

Hur du skapar din egen anpassade animation

Skapa en anpassad animation som öppnar och stänger din anpassade dragspelsmeny:

• Skapa initiala åtgärder
• Animera dragspelsöppningen
• Animera dragspelsstängningen

Skapa initiala åtgärder

Du börjar med att skapa två initiala åtgärder för din dragspelsmeny.

För din rullgardinsmeny:

1. Välj rullgardinselementet ("Dragspelsobjekt")
2. Gå till Interaktionspanelen > Elementutlösare och skapa en ny elementutlösare
3. Välj Rullgardinsmenyn öppnas
4. Välj en åtgärd under Menyn öppnas
5. Välj Starta en animation under Anpassad animation
6. Skapa en tidsinställd animation och namnge den (t.ex. "Dragspelsöppning")
7. Lägg till en åtgärd till din animation: Storlek under Diverse
8. Ställ in som initialt tillstånd
9. Ange ett höjdvärde (t.ex. 80px)
10. Spara

För din växelikonen:

1. Välj Ikonen inom rullgardinselementet
2. Ge din ikon en klass (t.ex. "Dragspelsikon")
3. Välj det överordnade rullgardinselementet
4. Öppna Interaktionspanelen
5. Välj Rullgardinsmenyn öppnas interaktion
6. Redigera den tidsinställda animationen ("Dragspelsöppning")
7. Välj ikonen ("Dragspelsikon")
8. Lägg till åtgärd: Rotera under Transformera
9. Ställ in som initialt tillstånd
10. Ställ in z-axeln till 0 grader
11. Spara

Animera öppningen av dragspelsmenyn

För att öppna dragspelsmenyn och rotera ikonen:

1. Välj föräldraelementet dropdown
2. Öppna Interaktionspanelen
3. Välj interaktionen Dropdown öppnas
4. Redigera tidsinställd animation ("Dragspel öppnas")
5. Lägg till åtgärd: Storlek under Övrigt
6. Avmarkera initialt tillstånd
7. Ange "auto" för höjd
8. Välj ikonen ("Dragspelsikon")
9. Lägg till åtgärd (vid samma tidsstämpel): Rotera under Transformera
10. Ställ in z-axeln till 180 grader
11. Spara

Animera stängningen av dragspelsmenyn

För att animera stängningen:

1. Välj föräldraelementet dropdown ("Dragspelsobjekt")
2. Öppna Interaktionspanelen
3. Välj interaktionen Dropdown öppnas
4. Välj åtgärd under Meny stängs
5. Välj Starta animation
6. Skapa tidsinställd animation och namnge den (t.ex. "Dragspel stängs")
7. Lägg till åtgärd: Storlek under Övrigt
8. Ange höjdvärde (t.ex. 80px)
9. Välj ikon
10. Lägg till åtgärd (samma tidsstämpel): Rotera under Transformera
11. Ställ in z-axeln till 0 grader
12. Spara

Tillbaka till webflow hjälp