Menu Mobile - HTML, CSS e JavaScript
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.
Видео Menu Mobile - HTML, CSS e JavaScript канала Origamid
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.
Видео Menu Mobile - HTML, CSS e JavaScript канала Origamid
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![CSS Grid Layout e Flexbox - Quando Utilizar](https://i.ytimg.com/vi/x-4z_u8LcGc/default.jpg)
![Slide estilo Stories com HTML, CSS e JavaScript do zero.](https://i.ytimg.com/vi/VaSr6uixmb0/default.jpg)
![Por onde começar? Front End e UX/UI Design](https://i.ytimg.com/vi/-5kJdbkG90g/default.jpg)
![06/10 Fetch - JavaScript Antes do Framework (React ou Vue.js)](https://i.ytimg.com/vi/fhIDgAfuJZ8/default.jpg)
![🔥 App de Agendamento para Barbeiros em React Native para iniciantes](https://i.ytimg.com/vi/kk_pGWBOkc4/default.jpg)
![](https://i.ytimg.com/vi/9Mem_R4XC-s/default.jpg)
![Pure CSS Hamburger Menu & Overlay](https://i.ytimg.com/vi/DZg6UfS5zYg/default.jpg)
![Live - Perguntas Frequentes sobre Front End e UX/UI Design - Respondidas](https://i.ytimg.com/vi/_YTIvc8Nnc4/default.jpg)
![Criando um menu horizontal com HTML e CSS](https://i.ytimg.com/vi/CNiH_hkvcDA/default.jpg)
![David Guetta | United at Home - Fundraising Live from NYC #UnitedatHome #StayHome #WithMe](https://i.ytimg.com/vi/L-qnVT36868/default.jpg)
![Responsividade na Prática | Masterclass #08](https://i.ytimg.com/vi/H91DhKPjhPk/default.jpg)
![Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox](https://i.ytimg.com/vi/PwWHL3RyQgk/default.jpg)
![React para Iniciantes - 19:00h quinta (28/11)](https://i.ytimg.com/vi/iIQOtwsWXqU/default.jpg)
![Modal "pop-up" com JavaScript e CSS](https://i.ytimg.com/vi/fu-enUG2VEE/default.jpg)
![CSS Animation - Mini Tutorial](https://i.ytimg.com/vi/zWmaohjrkRw/default.jpg)
![Tudo é Objeto em JavaScript - Dica para iniciantes](https://i.ytimg.com/vi/n5uiJr-v0KQ/default.jpg)
![Máscaras com CSS clip-path e SVG](https://i.ytimg.com/vi/wdB3Q5MmODo/default.jpg)
![Desvendando o CSS Grid na prática | Mayk Brito](https://i.ytimg.com/vi/HN1UjzRSdBk/default.jpg)
![08/10 Array - Map, Filter e Reduce - JavaScript Antes do Framework (React ou Vue.js)](https://i.ytimg.com/vi/XiAtxDeP-p8/default.jpg)
![⭐ Minicurso Animações CSS](https://i.ytimg.com/vi/eTELLTacg-8/default.jpg)