Создание слайдера для горизонтальной навигационной панели, которая «скользит» между опциями ⇐ CSS

[Anonymous]

Я строю HTML -страницу с навигационной панелью вверху, в центре и горизонтально выровненной. /> < /p>
Идея состоит в том, чтобы иметь подборку «скольжения», а не границу, которая отображается только на выбранном или парящем элементе в навигационной панели. У меня есть эта работа на странице разработки, например, если я прокручиваю свою мышь до «Кабаре», границы вокруг элемента «разработки» правильно «скользит» справа от страницы, в конечном итоге оборачиваясь вокруг «кабаре».

Выше вы можете увидеть меня на экране Я зависал своей мышью над «Кабаре». Как страница разработки. Вот пример:
Как видите, когда я Выберите перейти на эту страницу, слайдер не инициализируется правильно, вместо этого загружаясь как вертикальную линию в середине панели навигации, и не отображает дальнейшее поведение, если я попытаюсь зависать над другим элементом в навигационной панели. /p>
Но почему! Я использовал console.log в моем JS, чтобы убедиться, что правильная активная ссылка передается при выборе опции, и я вижу, что при проверке консоли во время выполнения. < /P>
Вот есть Я считаю, что соответствующий HTML, CSS и JS: < /p>


// Add event listeners for option clicks
const options = document.querySelectorAll('.option');
let selectedOption = null;

options.forEach((option) => {
option.addEventListener('click', () => {
// Deselect previous option
if (selectedOption) {
selectedOption.classList.remove('selected');
}

// Select the clicked option
option.classList.add('selected');
selectedOption = option;

// Get page ID from data attribute in HTML
const pageId = option.getAttribute('data-page');
const activeLinkId = option.getAttribute('data-active-link');
const activeLink = document.getElementById(activeLinkId);
navigateToPage(pageId, activeLink);
});
});

// PAGE NAVIGATION
function navigateToPage(pageId, activeLink) {
const portfolioPageContent = document.getElementById('portfolio-page').children; // children so not background, goal to swipe text elements up
const selectedPage = document.getElementById(pageId);

if (!selectedPage) {
console.error(`Page with ID "${pageId}" not found.`);
return;
}

// Update navbar links for active state
const links = document.querySelectorAll('.navbar a');
links.forEach(link => link.classList.remove('active')); // Remove 'active' from all links
if (activeLink) {
activeLink.classList.add('active'); // Add 'active' to the selected link
moveSlider(activeLink); // Move slider to active link
}

// Swipe the portfolio page content up, not the background
gsap.to(portfolioPageContent, {
y: '-200%',
opacity: 0,
duration: 0.8,
ease: 'power2.inOut',
onComplete: () => {

if (selectedPage) {
selectedPage.style.display = 'block';
gsap.to(selectedPage, { opacity: 1, duration: 0});

} else {
console.error(`Page with ID "${pageId}" not found.`);
}

// Fade in new page first, then hide old page
gsap.to(selectedPage, { opacity: 1, duration: 1 }, "fade-in")
.then(() => {
document.getElementById('portfolio-page').style.visibility = 'hidden';
});

console.log(activeLink);
if (activeLink) {
setTimeout(() => {
moveSlider(activeLink);
}, 100);
}

// Add hover-over effect to move the slider
links.forEach(link => {
link.addEventListener('mouseenter', () => moveSlider(link));
});

// Keep slider on the active link when not hovering
navbar.addEventListener('mouseleave', () => {
if (activeLink) moveSlider(activeLink);
});

},
});
}

const navbar = document.querySelector('.navbar');
const slider = document.querySelector('.slider');
const links = document.querySelectorAll('.navbar a');
console.log(links);

// Function to move the slider
function moveSlider(link) {
const rect = link.getBoundingClientRect(); // Get the link's position
const navbarRect = navbar.getBoundingClientRect(); // Get navbar's position

const sliderWidthAdjustment = 1.5; // Shrink the width slightly
const sliderLeftAdjustment = -1.5; // Offset to the left slightly

slider.style.width = `${rect.width - sliderWidthAdjustment}px`; // Adjust width
slider.style.left = `${rect.left - navbarRect.left + sliderLeftAdjustment}px`; // Adjust position

}< /code>
#page-development,
#page-messagetomountains,
#page-cabaret {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #202020;
text-align: center;
z-index: 10;
opacity: 0;
transition: opacity 1s ease-in-out;
/* text-shadow: 0.001rem 0 0.1rem #c8fcfc; */
text-shadow: none;
font-family: "Lucida Console", "Courier New", monospace;
}

#page-development {
background: radial-gradient(circle, #f4d4b4 0%, #e9ceb3 100%);
}

#page-messagetomountains {
/* background: radial-gradient(circle, #F5C7C7 0%, #e0bdbd 100%); */
background: radial-gradient(circle, #94d0e8 0%, #82c1db 100%);
color: white ;
}

#page-cabaret {
background: radial-gradient(circle, #8E98F9 0%, #868ed6 100%);
}

.navbar {
position: relative;
display: flex;
justify-content: center;
/* align-items: center;
flex-wrap: wrap; */
background-color: #82c1db;
padding: 10px 20px;
}

.navbar a {
position: relative;
color: white;
text-decoration: none;
padding: 8px 20px;
margin: 0 150px;
border: 2px solid transparent;
border-radius: 20px;
z-index: 1; /* links above slider */
transition: color 0.3s, transform 0.3s;
}

.navbar a:hover {
color: #eeffff;
}

.navbar a.active {
color: #ffffff;
}

/* moving border */
.slider {
position: absolute;
height: calc(100% - 23px); /* try match link padding */
border: 2px solid #ffffff;
border-radius: 20px;
background: none;
transition: all 0.4s ease;
z-index: 0; /* sits behind the links */
}< /code>



development
messagetomountains
the cabaret

dev page
this is the development page.




development
messagetomountains
the cabaret

messagetomountains page
this is the messagetomountains page.




development
messagetomountains
the cabaret

cabaret page
welcome to the cabaret.
< /code>
< /div>
< /div>
< /p>
Чтобы дать контекст, существует центральная страница портфеля, на которой размещаются 3 варианты. Когда вариант нажимается, он исчезает страницу портфолио, проводя текст на странице портфолио, а затем исчезает в контенте из одного из вариантов (разработка страницы, страница-кабарет и т. Д.). Только если отображается «разработка страницы», ведут ли ползунок правильно, а в двух других случаях это не так.
Что я попробовал?
Я попытался переписать функцию Moveslider и добился успеха в изменении способа работы слайдера, и все же он все еще будет работать только на странице разработки. Независимо от того, какое поведение я пытаюсь выполнить. Я попробовал переработать функцию NavigateTopage, так что я старался только инициализировать Navbar внутри там, и это тоже не сработало. Мой код во время этого процесса стал чем -то впалом, к которому неудачна, потому что я пытался включить этот параметр «ActiveLink», который не был частью кода ранее. < /P>
это имеет Я впервые использовал GSAP, а также на странице «Fade In» и «Fade Out» на других страницах, а не просто перемещаться по конкретной странице опции, когда нажимается опция, например. /разработка. Я думаю, пытаясь сделать это таким образом, я преувеличил вещи и сделал переход между страницами довольно неловко. Он ведет себя так же, как и предполагалось, и, как это происходит в настоящее время на странице разработки , на всех других страницах, где это присутствует. Чтобы повторить, это будет выбранная страница имеет границу, и перетаскивание мыши над другим вариантом «сдвинуло» эту границу до этого варианта. Если не щелкнуть, и мышь перетаскивается, граница автоматически отодвигается обратно в свою начальную позицию, опираясь вокруг опции выбранной в настоящее время. Что касается , почему это работает только на странице разработки. это так сильно меня беспокоит! Я полагаю, это как -то связано с тем, что это первая страница, указанная в моем HTML .. Но почему? Большое спасибо за помощь: D

Подробнее здесь: https://stackoverflow.com/questions/793 ... en-options