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

Навигация в fullPage.js строится вокруг концепции секций (sections) и слайдов (slides). Библиотека автоматически создает систему перемещения между этими блоками с помощью:

  • вертикальной прокрутки между секциями
  • горизонтальной прокрутки между слайдами
  • встроенных элементов навигации (dots, меню, якоря)

Кастомизация навигации позволяет изменить как внешний вид, так и поведение этих элементов.

Встроенная навигация: точки (dots)

По умолчанию fullPage.js предоставляет вертикальную панель навигации в виде точек справа.

Включение и базовые настройки

new fullpage('#fullpage', {
    navigation: true,
    navigationPosition: 'right',
    navigationTooltips: ['Первая', 'Вторая', 'Третья'],
    showActiveTooltip: true
});

Параметры

  • navigation — включает отображение точек
  • navigationPosition — положение (left или right)
  • navigationTooltips — массив подсказок
  • showActiveTooltip — отображение подсказки активной секции

Кастомизация внешнего вида точек

Изменение стилей через CSS

fullPage.js добавляет DOM-структуру:

<div id="fp-nav">
  <ul>
    <li><a href="#"><span></span></a></li>
  </ul>
</div>

Пример кастомизации

#fp-nav ul li a span {
    background: #999;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

#fp-nav ul li a.active span {
    background: #ff5722;
    transform: scale(1.5);
}

Расширенные эффекты

#fp-nav ul li a span {
    border: 2px solid transparent;
}

#fp-nav ul li a:hover span {
    border-color: #fff;
}

Полная замена точек навигации

Встроенные точки можно отключить и реализовать собственную систему.

Отключение

new fullpage('#fullpage', {
    navigation: false
});

Пример кастомного меню

<nav class="custom-nav">
  <a href="#section1">1</a>
  <a href="#section2">2</a>
  <a href="#section3">3</a>
</nav>
new fullpage('#fullpage', {
    anchors: ['section1', 'section2', 'section3']
});

Стилизация

.custom-nav {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.custom-nav a {
    display: block;
    margin: 10px 0;
    color: white;
    text-decoration: none;
}

Навигация через anchors

Якоря позволяют синхронизировать URL и навигацию.

Настройка

new fullpage('#fullpage', {
    anchors: ['home', 'about', 'contacts'],
    lockAnchors: false
});

Преимущества

  • прямые ссылки на секции
  • поддержка истории браузера
  • возможность интеграции с меню

Интеграция с меню

fullPage.js поддерживает связывание с пользовательским меню.

HTML

<ul id="menu">
  <li data-menuanchor="home"><a href="#home">Главная</a></li>
  <li data-menuanchor="about"><a href="#about">О нас</a></li>
  <li data-menuanchor="contact"><a href="#contact">Контакты</a></li>
</ul>

JS

new fullpage('#fullpage', {
    menu: '#menu',
    anchors: ['home', 'about', 'contact']
});

Активное состояние

fullPage.js автоматически добавляет класс active:

#menu li.active a {
    color: red;
}

Кастомизация поведения навигации

Управление прокруткой

new fullpage('#fullpage', {
    scrollingSpeed: 1000,
    easing: 'easeInOutCubic',
    autoScrolling: true,
    fitToSection: true
});

Ограничение навигации

new fullpage('#fullpage', {
    loopTop: false,
    loopBottom: false,
    keyboardScrolling: false
});

Управление через API

Навигацию можно полностью контролировать программно.

Переход к секции

fullpage_api.moveTo(2);
fullpage_api.moveTo('about');

Следующая / предыдущая

fullpage_api.moveSectionDown();
fullpage_api.moveSectionUp();

Управление слайдами

fullpage_api.moveSlideRight();
fullpage_api.moveSlideLeft();

События навигации

fullPage.js предоставляет хуки для отслеживания переходов.

afterLoad

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log('Текущая секция:', destination.index);
    }
});

onLeave

new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        if(destination.index === 2){
            console.log('Переход к третьей секции');
        }
    }
});

Кастомные индикаторы прогресса

Вместо точек можно реализовать прогресс-бар.

HTML

<div class="progress-bar"></div>

CSS

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: red;
    width: 0%;
    transition: width 0.3s;
}

JS

new fullpage('#fullpage', {
    afterLoad: function(origin, destination){
        const total = document.querySelectorAll('.section').length;
        const percent = ((destination.index + 1) / total) * 100;
        document.querySelector('.progress-bar').style.width = percent + '%';
    }
});

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

Включение слайдов

<div class="section">
  <div class="slide">Слайд 1</div>
  <div class="slide">Слайд 2</div>
</div>

Настройки

new fullpage('#fullpage', {
    controlArrows: true,
    slidesNavigation: true,
    slidesNavPosition: 'bottom'
});

Кастомизация стрелок

.fp-controlArrow {
    border-color: transparent transparent transparent #fff;
}

Создание собственной системы навигации

Кнопки управления

<button id="next">Вперед</button>
<button id="prev">Назад</button>
document.getElementById('next').oncl ick = () => {
    fullpage_api.moveSectionDown();
};

document.getElementById('prev').oncl ick = () => {
    fullpage_api.moveSectionUp();
};

Анимация навигационных элементов

Навигация может реагировать на текущую секцию.

new fullpage('#fullpage', {
    afterLoad: function(origin, destination){
        document.body.setAttribute('data-section', destination.index);
    }
});
body[data-section="1"] .custom-nav {
    opacity: 0.5;
}

Адаптивная навигация

Отключение fullPage на мобильных

new fullpage('#fullpage', {
    responsiveWidth: 768
});

Альтернативная навигация

@media (max-width: 768px) {
    #fp-nav {
        display: none;
    }
}

Динамическое изменение навигации

Навигацию можно менять во время выполнения.

Добавление секции

fullpage_api.addSection('<div class="section">Новая</div>');

Перестроение

fullpage_api.reBuild();

Кастомизация через классы и темы

new fullpage('#fullpage', {
    navigation: true,
    navigationTooltips: ['A', 'B', 'C'],
    css3: true
});
body.dark-theme #fp-nav ul li a span {
    background: #fff;
}

Управление доступностью (Accessibility)

Добавление aria-атрибутов

document.querySelectorAll('#fp-nav a').forEach((el, index) => {
    el.setAttribute('aria-label', 'Перейти к секции ' + (index + 1));
});

Управление фокусом

afterLoad: function(origin, destination){
    document.querySelector('.section.active').focus();
}

Синхронизация с внешними компонентами

Навигация может управлять другими элементами интерфейса.

afterLoad: function(origin, destination){
    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
    document.querySelector(`.tab[data-index="${destination.index}"]`).classList.add('active');
}

Комбинирование нескольких типов навигации

Оптимальный подход — объединение:

  • точек
  • меню
  • кнопок
  • API
new fullpage('#fullpage', {
    navigation: true,
    menu: '#menu',
    anchors: ['home', 'about', 'contact'],
    slidesNavigation: true
});

Это позволяет создать гибкую и масштабируемую систему управления страницей, полностью адаптированную под дизайн и пользовательский сценарий.

Оглавление