Позиционирование элементов навигации

Библиотека fullPage.js предоставляет мощные средства для создания полноэкранных скроллируемых сайтов с вертикальной и горизонтальной навигацией. Одним из ключевых аспектов является управление позиционированием элементов навигации, чтобы обеспечить удобство пользовательского взаимодействия и корректное отображение на разных устройствах.

Настройка навигации через опции fullPage.js

FullPage.js позволяет конфигурировать навигацию при инициализации через объект параметров:

new fullpage('#fullpage', {
    navigation: true,
    navigationPosition: 'right',
    navigationTooltips: ['Главная', 'О нас', 'Услуги', 'Контакты'],
    showActiveTooltip: true,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
});

Ключевые параметры:

  • navigation — включение или отключение вертикальной навигации (булевый тип).
  • navigationPosition — позиция вертикальной навигации ('right' или 'left').
  • navigationTooltips — массив с текстовыми подсказками для каждого секционного блока.
  • showActiveTooltip — отображение подсказки для активного блока.
  • slidesNavigation — включение горизонтальной навигации для слайдов.
  • slidesNavPosition — позиция горизонтальной навигации ('top' или 'bottom').

Эти параметры формируют базовую структуру и позиционирование навигационных элементов без вмешательства CSS. Однако для более сложного дизайна требуется точная настройка через кастомные стили.

Вертикальная навигация: расположение и стили

Вертикальная навигация представлена списком <ul> с классом .fp-nav, который автоматически добавляется в DOM. Расположение можно менять через CSS:

.fp-nav {
    top: 50%;
    transform: translateY(-50%);
}

.fp-nav.right {
    right: 20px;
}

.fp-nav.left {
    left: 20px;
}

.fp-nav ul li a span {
    background: #3498db;
    width: 12px;
    height: 12px;
}

Особенности:

  • Использование top: 50% с transform: translateY(-50%) позволяет центрировать вертикальный список по высоте экрана независимо от разрешения.
  • Классы .right и .left управляют горизонтальным смещением.
  • Стилизация кругов навигации через span внутри ссылок позволяет адаптировать размер, цвет и форму индикаторов.

Горизонтальная навигация слайдов

Для секций с горизонтальными слайдами используется элемент .fp-slidesNav. Позиционирование осуществляется с помощью класса .bottom или .top:

.fp-slidesNav {
    position: absolute;
    z-index: 100;
}

.fp-slidesNav.bottom {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.fp-slidesNav.top {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.fp-slidesNav ul li a span {
    background: #e74c3c;
    width: 10px;
    height: 10px;
}

Рекомендации:

  • Центрирование с помощью left: 50% и transform: translateX(-50%) позволяет навигации адаптироваться к ширине экрана.
  • Горизонтальные индикаторы можно растягивать или менять размер для мобильных устройств с использованием медиа-запросов.

Адаптивное позиционирование

FullPage.js не ограничивает возможность адаптации навигации под разные устройства. Для этого можно использовать медиа-запросы:

@media (max-width: 768px) {
    .fp-nav {
        right: 10px;
    }

    .fp-slidesNav.bottom {
        bottom: 10px;
    }
}

Особенности адаптивного позиционирования:

  • На мобильных устройствах важно уменьшать отступы, чтобы навигация не перекрывала контент.
  • Можно изменять размеры индикаторов, чтобы сохранить удобство взаимодействия на сенсорных экранах.

Кастомная навигация

Для создания уникального дизайна часто используется кастомная навигация. С помощью событий fullPage.js можно синхронизировать собственные элементы с прокруткой:

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        document.querySelectorAll('.custom-nav a').forEach((el, index) => {
            el.classList.remove('active');
            if(index === destination.index){
                el.classList.add('active');
            }
        });
    }
});

Принципы работы кастомной навигации:

  • Используется событие onLeave для определения активной секции.
  • Классы active позволяют управлять визуальным состоянием индикаторов.
  • Можно использовать абсолютно любые HTML-элементы для создания уникального вида навигации, включая анимацию и иконки.

Поддержка динамического контента

Если страницы динамически добавляются или удаляются, необходимо вызывать метод fullpage_api.reBuild() для пересчета навигации и корректного позиционирования:

fullpage_api.reBuild();

Это особенно важно при работе с ленивой загрузкой контента или при добавлении секций через AJAX.

Советы по оптимизации

  • Разделять вертикальные и горизонтальные элементы навигации для упрощения стилизации.
  • Использовать CSS-переменные для глобальных настроек размеров и цветов индикаторов.
  • Центрировать навигацию по осям с помощью комбинации top/bottom/left/right и transform, избегая жестких значений px для универсальности.
  • В мобильной версии можно скрывать часть навигационных элементов или менять их вид, чтобы не загромождать экран.

Такой подход обеспечивает гибкое и точное управление положением навигационных элементов в fullPage.js, позволяя создавать как стандартные, так и полностью кастомные решения для веб-интерфейсов.

Оглавление