Настройка внешнего вида навигации

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

Включение и базовые опции навигации

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

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

Ключевые моменты:

  • navigation – логическое значение (true или false). Включает или выключает стандартные точки навигации.
  • navigationPosition – задаёт сторону экрана, где отображаются точки ('right' или 'left').
  • navigationTooltips – массив подписей к каждой секции, которые отображаются при наведении.
  • showActiveTooltip – позволяет показывать подпись активной секции постоянно.

Стилизация стандартных точек навигации

FullPage.js создаёт список точек навигации с классом .fp-nav. Каждая точка имеет класс .fp-dot, а активная точка получает класс .active. Это позволяет настраивать их внешний вид через CSS.

/* Стили для контейнера навигации */
.fp-nav {
    top: 50%;
    transform: translateY(-50%);
}

/* Стили для точек */
.fp-nav ul li a span {
    background: #3498db;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Стили для активной точки */
.fp-nav ul li a.active span {
    background: #e74c3c;
    transform: scale(1.4);
}

/* Подписи при наведении */
.fp-tooltip {
    color: #2c3e50;
    font-size: 14px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.7);
    border-radius: 4px;
}

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

  • Использование transform: scale() позволяет создавать эффект увеличения активной точки.
  • Для плавного изменения цвета или размеров точек рекомендуется использовать transition.
  • Подписи (.fp-tooltip) можно стилизовать отдельно, чтобы они гармонировали с дизайном сайта.

Пользовательские навигационные элементы

FullPage.js позволяет создавать собственные элементы навигации и привязывать их к секциям через API. Пример:

<div id="custom-nav">
    <button data-menuanchor="section1">Главная</button>
    <button data-menuanchor="section2">О нас</button>
    <button data-menuanchor="section3">Услуги</button>
</div>
new fullpage('#fullpage', {
    anchors: ['section1', 'section2', 'section3'],
    menu: '#custom-nav',
    navigation: false
});
  • Атрибут data-menuanchor кнопки связывает её с секцией.
  • Параметр menu указывает на контейнер пользовательской навигации.
  • Стандартные точки при этом отключаются (navigation: false).

Стилизация кнопок может быть любой:

#custom-nav button {
    display: block;
    margin: 10px 0;
    padding: 8px 15px;
    background: #2980b9;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#custom-nav button.active {
    background: #c0392b;
}

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

Если внутри секций используются горизонтальные слайды (slides), навигацию для них можно настроить через параметр slidesNavigation:

new fullpage('#fullpage', {
    slidesNavigation: true,
    controlArrows: true
});
  • slidesNavigation – отображает точки для каждого слайда внутри секции.
  • controlArrows – добавляет стрелки для навигации между слайдами.

Стилизация аналогична вертикальной навигации:

.fp-slidesNav ul li a span {
    background: #16a085;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.fp-slidesNav ul li a.active span {
    background: #f39c12;
}

Анимация и динамическая кастомизация

FullPage.js предоставляет события, позволяющие изменять стиль навигации динамически:

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        const navDots = document.querySelectorAll('.fp-nav ul li a span');
        navDots.forEach(dot => dot.style.opacity = '0.5');
        navDots[destination.index].style.opacity = '1';
    }
});
  • afterLoad срабатывает после полной загрузки секции.
  • Можно изменять цвет, размер, прозрачность или добавлять эффекты анимации в зависимости от текущей секции.

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

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

new fullpage('#fullpage', {
    responsiveWidth: 768,
    navigation: true
});
  • responsiveWidth – при ширине окна меньше указанного значения навигация отключается автоматически.
  • Можно комбинировать с медиа-запросами в CSS для более точной настройки внешнего вида.
@media (max-width: 768px) {
    .fp-nav {
        display: none;
    }
}

Итоговые рекомендации по кастомизации

  1. Сохранять контраст навигационных точек с фоном секций.
  2. Использовать плавные переходы (transition) для изменения цвета, размера или прозрачности.
  3. Включать подписи для улучшения ориентации пользователя, но не перегружать интерфейс.
  4. Для уникального дизайна создавать пользовательские элементы навигации через menu и data-menuanchor.
  5. Поддерживать адаптивность, особенно на мобильных устройствах, чтобы навигация не мешала контенту.

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

Оглавление