Herramientas que he usado
- Bootstrap
- Sass
- Handlebars
- Webpack
Demo
🔗 URL no disponible temporalmente.
Repositorio GitHub
🔗 URL no disponible temporalmente.
Versión escritorio
En escritorio, el menú funciona con el hover no con el click, de esta forma le he podido añadir una transición de CSS.
La tabla de rankings que aparece, está maquetada con el componente de tablas responsive de Bootstrap que añade una barra de desplazamiento para poder ver todas sus columnas y no tener que ocultar información relevante.
Versión móvil
He utilizado el componente Offcanvas de Bootstrap 5, consiguiendo con un solo elemento todas las versiones responsive del menú.
Para animar el icono del menú, he usado los callbacks del componente Offcanvas añadiendo y quitando una clase al mismo.
Usando las clases que añade Bootstrap a los elementos de dropdown, al hacer click en ellos se cambia la dirección del icono.
Top comments (0)