Como construir uma microinteração de menu móvel com CSS

O que são microinterações?

microinteração é um termo ouvido com frequência no design de interface do usuário e UX atualmente. As microinterações são pares gatilho-feedbackou seja, onde:

1. algo acontece (por um usuário fazendo algo ou pelo status do sistema mudando)
2. e então há feedback para mostrar que algo aconteceu.

O feedback geralmente é uma indicação visual pequena e altamente contextual na IU. Hoje vamos construir um menu móvel que, quando clicado, faz com que os itens do menu apareçam ou desapareçam. Usaremos movimento e cor para dar feedback ao usuário.

Menu Móvel Animado em CSS

1. Defina a marcação da página

Para começar, vamos definir um nav elemento onde vamos colocar:

• Uma caixa de seleção seguida pelo rótulo associado e
• o menu principal

Cada item de menu incluirá o nó de texto dentro de um span elemento e um ícone Font Awesome. Por esse motivo, já carregamos a biblioteca Font Awesome em nossa caneta.

1

 class="nav">

2

   id="menu" type="checkbox">

3

   for="menu">Menu

4

   class="menu">

5

6

       href="#0">

7

        About

8

         class="fas fa-address-card" aria-hidden="true">

9

10

11

12

       href="#0">

13

        Projects

14

         class="fas fa-tasks" aria-hidden="true">

15

16

17

18

       href="#0">

19

        Clients

20

         class="fas fa-users" aria-hidden="true">

21

22

23

24

       href="#0">

25

        Contact

26

         class="fas fa-envelope-open-text" aria-hidden="true">

27

28

29

30

2. Especifique os estilos principais

Vamos pular alguns estilos introdutórios que você pode examinar clicando na guia CSS do projeto de demonstração e pular direto para os principais.

Para começar, daremos alguns estilos à navegação que a deixarão assim:

A seguir, como sempre, ocultaremos visualmente a caixa de seleção. Depois disso, colocaremos seu rótulo relacionado, que funcionará como um botão, no centro da navegação, assim:

Os estilos correspondentes são simples o suficiente para entrar em mais detalhes. Aqui estão eles:

1

/*CUSTOM VARIABLES HERE*/

2

3

.nav {

4

  position: relative;

5

  display: flex;

6

  justify-content: center;

7

  max-width: 400px;

8

  padding-bottom: 20px;

9

  border-radius: 5px 5px 25px 25px;

10

  margin: 300px auto 0;

11

  background: var(--white);

12

  box-shadow: rgb(50 50 93 / 10%) 0 30px 60px -12px,

13

    rgb(0 0 0 / 15%) 0 18px 36px -18px;

14

}

15

16

.nav [type="checkbox"] {

17

  position: absolute;

18

  left: -9999px;

19

}

20

21

.nav [type="checkbox"] + label {

22

  position: relative;

23

  width: 75px;

24

  height: 75px;

25

  display: flex;

26

  align-items: center;

27

  justify-content: center;

28

  font-size: 16px;

29

  cursor: pointer;

30

  z-index: 1;

31

  background: var(--violet);

32

  border-radius: 50%;

33

  transform: translateY(-50%);

34

  transition: all 0.2s;

35

}

36

37

.nav [type="checkbox"] + label:hover {

38

  background: var(--dark-violet);

39

}

3. Os estilos de menu

Vamos agora mergulhar no menu. Aqui estão os fatos importantes sobre os estilos de seus itens:

• Eles serão elementos absolutamente posicionados e inicialmente ficarão embaixo do rótulo– nós demos z-index: 1. Dessa forma, eles parecerão estar escondidos.

• Em termos de nossa microinteração, usaremos o movimento para indicar que os itens do menu surgiram ao pressionar o botão de menu. Eles vão emergir por trás do botão.
• Atribuiremos a eles um atraso de transição diferente. Especificamente, o quarto item terá o menor, depois o terceiro e assim por diante. Quanto maior o atraso, mais tempo levará para o item associado desaparecer quando o estado desmarcado/fechado do menu for acionado.
• Eles serão elementos circulares com o ícone no centro e o texto alguns pixels acima deles. Inicialmente, o texto ficará invisível.

Os estilos relacionados:

1

/*CUSTOM VARIABLES HERE*/

2

3

.menu li {

4

  position: absolute;

5

  top: -25px;

6

  left: 50%;

7

  transform: translateX(-50%);

8

  transition: all 0.4s;

9

}

10

11

.menu li:nth-child(1) {

12

  transition-delay: 0.2s;

13

}

14

15

.menu li:nth-child(2) {

16

  transition-delay: 0.15s;

17

}

18

19

.menu li:nth-child(3) {

20

  transition-delay: 0.1s;

21

}

22

23

.menu li:nth-child(4) {

24

  transition-delay: 0.05s;

25

}

26

27

.menu li a {

28

  width: 50px;

29

  height: 50px;

30

  border-radius: 50%;

31

  display: flex;

32

  align-items: center;

33

  justify-content: center;

34

  background: var(--violet);

35

}

36

37

.menu li a span {

38

  position: absolute;

39

  top: 0;

40

  left: 0;

41

  transform: translateY(calc(-100% - 5px));

42

  width: 100%;

43

  font-size: 13px;

44

  white-space: nowrap;

45

  pointer-events: none;

46

  opacity: 0;

47

  transition: opacity 0.3s;

48

  color: var(--black);

49

  font-weight: bold;

50

}

4. Alternar menu

Cada vez que clicarmos no rótulo da caixa de seleção, alternaremos a visibilidade do menu. Mais uma vez, vamos conseguir isso com a ajuda do :checked pseudo-classe, o combinador irmão adjacente (+) e o combinador irmão geral (~).

Já discutimos o estado de menu fechado padrão, então vamos agora cobrir a sequência de ações durante seu estado aberto oposto:

• Daremos uma aparência diferente ao rótulo para mostrar que foi pressionado. Isso, novamente, é feedback de microinteração.

• Os itens do menu ficarão visíveis suavemente movendo-os para cima através do top e left valores de deslocamento. Mas, novamente, isso acontecerá em momentos diferentes. Desta vez, o primeiro item aparecerá primeiro, depois o segundo e assim por diante.

• Depois que todos os elementos aparecerem, os nós de texto aparecerão simultaneamente.

Aqui estão os estilos necessários:

1

/*CUSTOM VARIABLES HERE*/

2

3

.nav input:checked + label {

4

  background: var(--black);

5

  transform: translateY(calc(-50% + 4px));

6

}

7

8

.nav input:checked ~ .menu li:nth-child(1) {

9

  top: -210px;

10

  transition-delay: 0.1s;

11

}

12

13

.nav input:checked ~ .menu li:nth-child(2) {

14

  top: -160px;

15

  left: calc(50% - 75px);

16

  transition-delay: 0.2s;

17

}

18

19

.nav input:checked ~ .menu li:nth-child(3) {

20

  top: -160px;

21

  left: calc(50% + 75px);

22

  transition-delay: 0.3s;

23

}

24

25

.nav input:checked ~ .menu li:nth-child(4) {

26

  top: -110px;

27

  transition-delay: 0.4s;

28

}

29

30

.nav input:checked ~ .menu li a span {

31

  opacity: 1;

32

  transition-delay: 0.9s;

33

}

Conclusão

Feito! Com apenas algumas regras de CSS e algumas marcações diretas, conseguimos criar uma microinteração de menu animada somente com CSS. Esse padrão pode ser benéfico se você precisar de inspiração para implementar menus flutuantes para navegação secundária ou telas móveis.

Antes de fechar, aqui está um lembrete do que construímos: