https://codepen.io/shoumiksk/pen/PoJmQEN
Esta es la versión html css de lo que quiero lograr en React.
Aquí está mi código en reaccionar:
function App() { const marker = document.querySelector('#marker') const item = document.querySelectorAll('ul li a') function indicator(e){ marker.style.top = e.offsetTop+'px'; marker.style.width = e.offsetWidth+'px'; } return ( <div className="App"> <ul> <div id="marker"></div> <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>Home</a></li> <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>about</a></li> <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>services</a></li> <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>contact</a></li> <li><a href="/" onMouseMove={(e)=> indicator(e.target)}>team</a></li> </ul> </div> ); }CSS:
body { height: 100vh; display: flex; align-items: center; justify-content: center; } ul { position: relative; } ul li { list-style: none; font-size: 2rem; } ul li a { position: relative; text-decoration: none; padding: 0 1rem; } #marker { height: 3rem; position: absolute; top: 0; background-color: #2196f3; transition: 0.5s; }Pero esto no funciona como se esperaba, a veces funciona después de actualizar, no funciona.
Sé que estoy haciendo algo mal, ¿alguna otra forma de hacerlo?
Verifique el siguiente código para implementar su diseño requerido para el menú en reaccionar.
Aquí está mi código:
export default function App() { const menuItem = [ { i: 0, name: 'Home', link: '/' }, { i: 1, name: 'about', link: '/' }, { i: 2, name: 'services', link: '/' }, { i: 3, name: 'contact', link: '/' }, { i: 4, name: 'team', link: '/' }, ]; const [selected, setSelected] = useState(null); const item = document.querySelectorAll('ul li a'); function indicator(index) { setSelected(index) } const renderMenu = menuItem.map((item, i) => { return ( <ul> <li> <a href="/" className={selected==i ? 'isSelected':'menulist'} onMouseMove={(e) => indicator(i)}> {item.name} </a> </li> </ul> ); }); return <div className="App">{renderMenu}</div>; }.CSS
body { height: 100vh; display: flex; align-items: center; justify-content: center; background: black; } ul { position: relative; } ul li { list-style: none; font-size: 2rem; } ul li a { position: relative; text-decoration: none; padding: 0 1rem; color: white; } .isSelected { height: 4rem; top: 0; background-color: #2196f3; transition: 0.5s ease; } Puede colocar cualquier CSS flotante requerido en la clase isSelected y funcionará de maravilla.
Aquí está mi enlace de demostración de código: https://stackblitz.com/edit/react-mewmxh?file=src%2Fstyle.css
Entonces pude replicar eso usando esta función:
let item; let marker; const indicator = (e) => { marker.style.top = e.offsetTop + "px"; marker.style.width = e.offsetWidth + "px"; }; const getelements = () => { item = document.querySelectorAll("ul li a"); marker = document.querySelector("#marker"); }; const fun = () => { //Feel free to name whatever you want if (item === undefined || marker === undefined) { getelements(); } if (item !== undefined && marker !== undefined) { item.forEach((link) => { link.addEventListener("mousemove", (e) => { indicator(e.target); }); }); } };Y el detector de eventos:
<ul> <div id="marker"></div> <li> <a href="/" onMouseOver={() => fun()}>Home</a> </li> <li> <a href="/" onMouseOver={() => fun()}>about</a> </li> <li> <a href="/" onMouseOver={() => fun()}>services</a> </li> <li> <a href="/" onMouseOver={() => fun()}>contact</a> </li> <li> <a href="/" onMouseOver={() => fun()}>team</a> </li> </ul>Estoy usando onMouseOver en lugar de onMouseMove ya que estaba causando algunos nervios.