This is [breve descrição do projeto]
This project was developed with the following technologies:
HTML e CSS
JavaScript
SASS
- Design: https://www.figma.com/file/LLkrFHfNYTRXThrVxlJCQe/menu?node-id=0%3A1
# Iniciar a compilação SASS
gulp
Menu Type [01-0]
Menu Acessivel com interações Vanilla JS Baseado no menu da W3C.Menu Type [02-0]
Menu Acessivel com interações completas em Vanilla JS Baseado no menu da W3C com semantica correta e facilitada para uso de leitor de tela.Para usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe "active" também deve ativar a visibilidade do submenu.
| Key | Function |
|---|---|
| [Space] / [Enter] | - Abre o submenu e move o foco para o primeiro item no submenu. - Quando usado no submenu abre o link. |
| [ESC] | - Quando o foco esta em um submenu, fecha o submenu. - Move o foco para o item pai da barra de menus |
| ➡ | - Move o foco para o próximo item na barra de menus. - Se o foco estiver no último item, move o foco para o primeiro item. - Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item. - Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |
| ⬅ | - Move o foco para o item anterior na barra de menus. - Se o foco estiver no primeiro item, move o foco para o último item. |
| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu. - Quando em um submenu, move o foco para o próximo item. - Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |
| ⬆ | - Abre o submenu e move o foco para o último item do submenu. - Quando em um submenu, move o foco para o item anterior. - Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |
| [Home] | Move o foco para o primeiro item na barra de menus/ submenu. |
| [End] | Move o foco para o último item na barra de menus/ submenu. |
| [Character 🔡] | - Move o foco para o próximo item na barra de menus/ submenu com um nome que começa com o caractere digitado. - Se nenhum dos itens tiver um nome começando com o caractere digitado, o foco não se moverá. |
Menu Type [02-1]
Menu Acessivel com interações completas utilizando JS e JQuery Baseado no menu da W3C com semantica correta e facilitada para uso de leitor de tela.Para usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe "active" também deve ativar a visibilidade do submenu.
| Key | Function |
|---|---|
| [Space] / [Enter] | - Abre o submenu e move o foco para o primeiro item no submenu. - Quando usado no submenu abre o link. |
| [ESC] | - Quando o foco esta em um submenu, fecha o submenu. - Move o foco para o item pai da barra de menus |
| ➡ | - Move o foco para o próximo item na barra de menus. - Se o foco estiver no último item, move o foco para o primeiro item. - Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item. - Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |
| ⬅ | - Move o foco para o item anterior na barra de menus. - Se o foco estiver no primeiro item, move o foco para o último item. |
| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu. - Quando em um submenu, move o foco para o próximo item. - Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |
| ⬆ | - Abre o submenu e move o foco para o último item do submenu. - Quando em um submenu, move o foco para o item anterior. - Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |
| [Home] | Move o foco para o primeiro item na barra de menus/ submenu. |
| [End] | Move o foco para o último item na barra de menus/ submenu. |
| [Character 🔡] | - Move o foco para o próximo item na barra de menus/ submenu com um nome que começa com o caractere digitado. - Se nenhum dos itens tiver um nome começando com o caractere digitado, o foco não se moverá. |
Menu Type [02-2]
Menu Acessivel mais simples utilizando JS e JQuery Baseado no menu da W3C com semantica correta e facilitada para uso de leitor de tela.Para usar o menu acessível é preciso seguir a estrutura HTML do menu02.html, com os atributos e data-attributes necessários para cada tipo de item ou subitem do menu. E ao utilizar o script JS deve ser selecionado o data atribute correto para a variavel menubar. No CSS alem do hover sobre os itens do menu que deve exibir o submenu, a classe "active" também deve ativar a visibilidade do submenu.
| Key | Function |
|---|---|
| [Space] / [Enter] | - Abre o submenu e move o foco para o primeiro item no submenu. - Quando usado no submenu abre o link. |
| [ESC] | - Quando o foco esta em um submenu, fecha o submenu. - Move o foco para o item pai da barra de menus |
| ➡ | - Move o foco para o próximo item na barra de menus. - Se o foco estiver no último item, move o foco para o primeiro item. - Se o foco estiver em um item de submenu, abre o próximo submenu e coloca o foco no primeiro item. - Se o foco estiver em um item que não possui um submenu: Fecha o submenu; Move o foco para o próximo item na barra de menus; Abre o submenu do item da barra de menus recém-focado, mantendo o foco nesse item da barra de menus pai. |
| ⬅ | - Move o foco para o item anterior na barra de menus. - Se o foco estiver no primeiro item, move o foco para o último item. |
| ⬇ | - Abre o submenu e move o foco para o primeiro item no submenu. - Quando em um submenu, move o foco para o próximo item. - Se o foco estiver no último item de um submenu, move o foco para o primeiro item. |
| ⬆ | - Abre o submenu e move o foco para o último item do submenu. - Quando em um submenu, move o foco para o item anterior. - Se o foco estiver no primeiro item de um submenu, move o foco para o último item. |
| [Home] | Move o foco para o primeiro item na barra de menus/ submenu. |
| [End] | Move o foco para o último item na barra de menus/ submenu. |
ContributingThis project is for study purposes, so contact me and let me know your ideas.
All kinds of contributions are very welcome and appreciated!
- ⭐️ Star the project
- 🐛 Find and report issues
- 📥 Submit PRs to help solve issues or add features
- ✋ Influence the future of project with feature requests
This project is licensed under the MIT License - see the LICENSE page for details.
🤍 Made by Merieli Manzano Ⓜ