Witaj juiksie!!

Dziś mam dla Ciebie animowany tutorial, pokazujący najprostszy sposób na ciekawe, wysuwane menu. Polecam powiększać obrazki – wspomogłam się dziś paroma gifami. :)

menu_animacja

Obszar roboczy:

Rectangle oraz parę ikonek z Font Awesome ( tutaj tutorial jak zainstalować bibliotekę do Axure ), zmiana kolorów i zdjęcie jako tło.

1

Zaznaczam elementy lewego menu i zmieniam je na Dynamic Panel (PPM > „Convert to Dynamic Panel”).

2

Nasz panel dynamiczny musi mieć dwa stany – zwinięty (początkowy) i rozwinięty (po kliknięciu w dowolne miejsce na pasku).

3

 

Animacja:

Każda z ikonek ma nas przenosić do nowej podstrony, zatem:
ikonka > „Create link” (z panelu Widget Names and Interactions) > wybieramy podstronę:

4

To samo postępujemy na drugim widoku:

5

A teraz najważniejsze: po kliknięciu (OnClick) ma nastąpić zmiana stanu panelu:

6

A następnie, ze stanu drugiego – powrót na pierwszy:

7

 

F5 i w przeglądarce powinniśmy mieć:

menu_animacja

Powodzenia :)

Tutorial Axure

Tutaj znajdziesz pozostałe odcinki naszego tutoriala Axure.

 

TEMATY:
Najświeższe artykuły