Tutorial mostrando como criar uma estrutura de menu principal, utilizando um menu "hamburger" no mobile e tornando o mesmo acessível. Totalmente do zero com HTML, CSS e JavaScript
00:00 Projeto
00:12 HTML Desktop
01:21 CSS Desktop
05:35 Menu Mobile
05:56 HTML Mobile
06:18 CSS Mobile e Media Queries
07:50 JavaScript Mobile
09:50 CSS Dropdown
14:00 Transition
16:58 Botão Hamburger
24:33 touchstart (UX)
26:40 Acessibilidade (ARIA)
31:32 VoiceOver Teste
32:50 Ferramenta
Arquivos
https://github.com/origamid/publico/tree/main/menu-mobile
Exemplo:
https://origamid.github.io/publico/menu-mobile/
Ferramenta Utilizada
https://www.code.origamid.dev/
Cursos da Origamid
https://www.origamid.com/cursos/
Em termos de UX Design, lembre-se, o que está escondido sempre é menos utilizado do que está visível na tela. Então o menu mobile vem com os seus problemas.
