O Soft Dropdown é um projeto desenvolvido com HTML, CSS e JavaScript, que tem como objetivo criar um dropdown interativo para seleção de categorias. Ele permite que o usuário selecione uma categoria de uma lista pré-definida, oferecendo uma experiência dinâmica e fluida.
- Interatividade: O dropdown exibe e seleciona categorias de modo dinâmico, fechando automaticamente após clique.
- Estilo Responsivo: O design é moderno e adaptável a diferentes dispositivos.
- Controle JavaScript: Gerencia a exibição, seleção e acessibilidade do componente.
O Soft Dropdown foi projetado com acessibilidade em mente. Ele suporta navegação via teclado, permitindo que usuários possam abrir e fechar o dropdown usando as teclas Escape e espaço. Além disso, o foco automático na opção selecionada facilita o uso para pessoas com deficiências visuais ou motoras, garantindo uma experiência inclusiva para todos os usuários.
Confira o projeto online através deste link.
- HTML: Base estrutural do dropdown e seus elementos.
- CSS: Criação de um design responsivo com animações suaves.
- JavaScript: Implementação da lógica de interação do dropdown.
- Lucide Icons: Biblioteca utilizada para aprimorar a interface com ícones.
- Lucide Icons - Biblioteca de ícones utilizada no projeto.
- Clone o Repositório
git clone https://github.com/devAndreotti/soft-dropdown.git
- Abra o Projeto
- Abra o arquivo
index.htmlem um navegador.
- Abra o arquivo
Contribuições são bem-vindas! Siga estas etapas para colaborar:
- Faça um fork do projeto.
- Crie uma nova branch para sua feature:
git checkout -b feature/nome-feature. - Commit suas mudanças:
git commit -m 'Adiciona nova feature'. - Envie para a branch:
git push origin feature/nome-feature. - Abra um Pull Request.
Este projeto foi desenvolvido durante uma aula da Rocketseat. Fique à vontade para explorar, adaptar e expandir o que foi criado.
Desenvolvido por Ricardo Andreotti Gonçalves