.floating-menu { position: fixed; top: 50%; right: 45px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 40px; z-index: 9999; } .vertical-line { position: absolute; top: 0; bottom: 0; width: 1px; background: #ccc; z-index: -1; } .menu-item { position: relative; display: flex; align-items: center; justify-content: flex-end; } .circle { width: 24px; height: 24px; background: #fdb913; border-radius: 50%; transition: all 0.3s ease; cursor: pointer; } .circle:hover, .circle.active { background: #3b3b3f; transform: scale(1.5); } .tooltip { margin-right: 35px; /* espaçamento ajustado */ padding: 5px 10px; background: #333; color: #fff; border-radius: 4px; opacity: 0; white-space: nowrap; font-size: 14px; font-family: Arial, sans-serif; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; transform: translateX(-10px); } .menu-item:hover .tooltip, .menu-item.active .tooltip { opacity: 1; pointer-events: auto; transform: translateX(0); } /* Continuação da linha para cima do primeiro círculo */ .menu-item:first-child::before { content: ''; position: absolute; top: -40px; right: 11.5px; width: 1px; height: 40px; background: #ccc; z-index: -1; } /* Para evitar que as âncoras fiquem coladas ao topo */ section { scroll-margin-top: 100px; } const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { const circle = item.querySelector('.circle'); const targetSelector = item.getAttribute('data-target'); circle.addEventListener('click', () => { // Remove active state from all menuItems.forEach(i => { i.classList.remove('active'); i.querySelector('.circle').classList.remove('active'); }); // Activate clicked one item.classList.add('active'); circle.classList.add('active'); // Scroll to anchor const target = document.querySelector(targetSelector); if (target) { target.scrollIntoView({ behavior: 'smooth' }); } }); });