hola, este es el código de mi menú de navegación. Agregué una animación como un punto que se mueve cuando paso el mouse sobre mi menú de navegación. pero no sé cómo hacer que ese punto sea estático en el menú activo.
ej: (menu1) este es mi menú, cuando esté activo quiero ese punto al lado de mi menú (menu1.) como este quiero si alguien encuentra la solución por favor dame el código
body { font-family: "Sprint Sans Ofc"; } .navMenu { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); White-space:nowrap; padding-right:20px; padding left:30px; } .navMenu a { color: #000000; text-decoration: none; font-size: 1.3em; text-transform: captilalize; font-weight: 600; display: inline-block; padding:30px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .navMenu a:hover { color: #000000; } .navMenu a:active { color:#000000; } .navMenu .dot { width: 5px; height: 5px; background: #D61E39; border-radius: 50%; opacity: 0; margin:-44px; -webkit-transform: translateX(30px); transform: translateX(30px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .navMenu a:nth-child(1):hover ~ .dot { -webkit-transform: translateX(30px); transform: translateX(145px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: 1; } .navMenu a:nth-child(2):hover ~ .dot { -webkit-transform: translateX(110px); transform: translateX(280px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: 1; } .navMenu a:nth-child(3):hover ~ .dot { -webkit-transform: translateX(200px); transform: translateX(415px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: 1; } .navMenu a:nth-child(4):hover ~ .dot { -webkit-transform: translateX(285px); transform: translateX(550px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: 1; } navMenu a:nth-child(1):active ~ .dot { position: relative; left:40px; bottom:10px; opacity: 1; } .navMenu a:nth-child(1):active ~ .dot { left:20px; opacity:1; } <body> <nav class="navMenu"> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a> <div class="dot"></div> </nav> </body>El desafío con su elemento .dot es aplicar los estilos CSS (especialmente los valores de transform ) de manera que tanto los hover active como los de desplazamiento se manejen correctamente.
Para lograr esto, estoy usando selectores de CSS como este:
.navMenu a:nth-child(2):hover~.dot, .navMenu:not(:hover) a:nth-child(2).active~.dot {Básicamente, esto significa hacer la animación si
.navMenu principal no se está desplazando actualmente. La segunda regla garantiza que un hover tiene la prioridad más alta al establecer el destino del elemento .dot (especialmente, esto hace que el punto se aleje del elemento actualmente activo). De lo contrario, el punto no se movería ni se mantendría en el elemento de menú .active .
Echa un vistazo a mi enfoque a continuación (por cierto, no hay necesidad de propiedades -webkit aquí):
const anchors = document.querySelectorAll('nav a') anchors.forEach(anchor => anchor.addEventListener("click", onClick)); function onClick(e) { anchors.forEach(achor => achor.classList.remove('active')) e.target.classList.add('active') } body { font-family: "Sprint Sans Ofc"; } .navMenu { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); White-space: nowrap; padding-right: 20px; padding left: 30px; } .navMenu a { color: #000000; text-decoration: none; font-size: 1.3em; text-transform: captilalize; font-weight: 600; display: inline-block; padding: 30px; transition: all 0.2s ease-in-out; } .navMenu a:hover { color: #000000; } .navMenu a:active { color: #000000; } .navMenu .dot { width: 5px; height: 5px; background: #D61E39; border-radius: 50%; opacity: 1; margin: -44px; transform: translateX(-30px); transition: all 0.2s ease-in-out; } .navMenu a:nth-child(1):hover~.dot, .navMenu:not(:hover) a:nth-child(1).active~.dot { transform: translateX(145px); } .navMenu a:nth-child(2):hover~.dot, .navMenu:not(:hover) a:nth-child(2).active~.dot { transform: translateX(280px); } .navMenu a:nth-child(3):hover~.dot, .navMenu:not(:hover) a:nth-child(3).active~.dot { transform: translateX(415px); } .navMenu a:nth-child(4):hover~.dot, .navMenu:not(:hover) a:nth-child(4).active~.dot { transform: translateX(550px); } <body> <nav class="navMenu"> <a href="#">menu1</a> <a href="#">menu2</a> <a href="#">menu3</a> <a href="#">menu4</a> <div class="dot"></div> </nav> </body>