¿Hay alguien que me pueda ayudar con esto sin cambiar todo?
No puedo entender por qué las sublistas en mi menú de hamburguesas no funcionan en la pantalla de respuesta móvil, además necesito pasar el mouse sobre las listas de la barra de navegación en la pantalla grande del escritorio.
Aquí está mi repositorio: https://github.com/marco95OP/blogr-landing-page-main.git
Aquí está mi página de inicio: https://marco95op.github.io/blogr-landing-page-main/
¡Gracias por adelantado!
Use un truco simple de javascript para su menú. Agregue el siguiente script dentro de su archivo javascript.
let navLink = document.querySelectorAll('ul.nav-link'); navLink.forEach((eachLink)=>{ eachLink.addEventListener('click',(event)=>{ (!eachLink.classList.contains('active'))? eachLink.classList.add('active'):eachLink.classList.remove('active'); }); });// incluye esta línea de css dentro del archivo de estilo - ul.nav-link.active .dropdown-menu {display:block;}
Para que funcione, puede usar css para afectar otras clases, aquí un ejemplo basado en su sitio web:
<button class='select-btn'>My hover affects my bro</button> <div class='dropdown-menu'> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </div>CSS:
.select-btn { background: red; height: 100px; width: 100px; } .select-btn:focus ~ .dropdown-menu { display: flex; flex-direction: column; } .dropdown-menu { background: blue; height: 100px; width: 100px; transition: all 100ms ease-in-out; display: none; }