Навигация по разделам сайта

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

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

Подключение и инициализация

Для начала необходимо подключить библиотеку:

<link rel="stylesheet" href="introjs.css">
<script src="intro.js"></script>

Базовая инициализация:

introJs().start();

Для управления навигацией по разделам используется более детальная конфигурация.

Определение шагов навигации

Каждый шаг описывает конкретный раздел сайта. Это можно сделать через атрибуты в HTML:

<div data-intro="Главная страница" data-step="1">...</div>
<div data-intro="Каталог товаров" data-step="2">...</div>
<div data-intro="Корзина" data-step="3">...</div>

Либо программно:

introJs().setOptions({
  steps: [
    {
      element: document.querySelector('#home'),
      intro: 'Главная страница'
    },
    {
      element: document.querySelector('#catalog'),
      intro: 'Каталог товаров'
    },
    {
      element: document.querySelector('#cart'),
      intro: 'Корзина'
    }
  ]
}).start();

Программный способ предпочтителен при динамической структуре сайта.

Логика переходов между разделами

Intro.js автоматически управляет переходами между шагами, однако поведение можно настраивать:

introJs().onchange(function(targetElement) {
  console.log('Переход к элементу:', targetElement);
});

Это позволяет:

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

Управление URL и маршрутизацией

При использовании SPA (например, с роутерами) важно синхронизировать Intro.js с маршрутизацией:

introJs().onbeforechange(function(targetElement) {
  if (targetElement.id === 'catalog') {
    window.location.hash = '#catalog';
  }
});

В более сложных приложениях:

introJs().onbeforechange(function(targetElement) {
  switch (targetElement.id) {
    case 'home':
      router.navigate('/');
      break;
    case 'catalog':
      router.navigate('/catalog');
      break;
  }
});

Пропуск и возврат к разделам

Для удобной навигации важно предусмотреть:

  • пропуск шагов
  • возврат к предыдущим разделам

Настройки:

introJs().setOptions({
  showStepNumbers: true,
  showBullets: true,
  exitOnOverlayClick: false,
  keyboardNavigation: true
});

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

  • Next — переход к следующему разделу
  • Back — возврат
  • Skip — завершение тура

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

Каждый раздел может иметь уникальный стиль:

introJs().setOptions({
  steps: [
    {
      element: '#home',
      intro: 'Главная',
      tooltipClass: 'customTooltip'
    }
  ]
});

CSS:

.customTooltip {
  background-color: #222;
  color: #fff;
}

Работа с динамическими элементами

Если разделы загружаются асинхронно:

introJs().onbeforechange(function(targetElement) {
  if (!targetElement) return;

  if (targetElement.id === 'lazy-section') {
    loadSectionData();
  }
});

Важно убедиться, что элемент существует перед показом:

if (document.querySelector('#lazy-section')) {
  introJs().start();
}

Условная навигация

Иногда необходимо показывать разные шаги в зависимости от условий:

const steps = [];

if (user.isAdmin) {
  steps.push({
    element: '#admin-panel',
    intro: 'Панель администратора'
  });
}

steps.push({
  element: '#profile',
  intro: 'Профиль пользователя'
});

introJs().setOptions({ steps }).start();

Синхронизация с состоянием интерфейса

При переходе между разделами часто требуется:

  • открывать вкладки
  • прокручивать страницу
  • раскрывать меню

Пример:

introJs().onbeforechange(function(targetElement) {
  if (targetElement.id === 'menu-item') {
    document.querySelector('#menu').classList.add('open');
  }
});

Прокрутка:

introJs().onchange(function(targetElement) {
  targetElement.scrollIntoView({
    beh * avior: 'smooth',
    block: 'center'
  });
});

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

Иногда требуется запретить переход дальше:

introJs().onbeforechange(function(targetElement) {
  if (!formIsValid()) {
    return false;
  }
});

Это предотвращает переход к следующему разделу до выполнения условий.

Перезапуск и сохранение состояния

Для повторного запуска тура:

introJs().start();

Для сохранения прогресса:

introJs().oncomplete(function() {
  localStorage.setItem('introCompleted', true);
});

Проверка:

if (!localStorage.getItem('introCompleted')) {
  introJs().start();
}

Интеграция с пользовательскими действиями

Навигация может запускаться не только автоматически:

document.querySelector('#help-btn').addEventListener('click', function() {
  introJs().start();
});

Или переход к конкретному разделу:

introJs().goToStep(2).start();

Производительность и оптимизация

При большом количестве шагов:

  • избегать лишних DOM-запросов
  • использовать ленивую загрузку шагов
  • группировать разделы

Пример оптимизации:

const intro = introJs();

intro.setOptions({
  steps: generateStepsDynamically()
});

Частые ошибки

Элемент отсутствует в DOM

element: document.querySelector('#missing')

Решение — проверка перед добавлением шага.

Скрытые элементы Intro.js не может корректно позиционировать подсказки.

Решение — показывать элемент заранее.

Конфликт с CSS Некоторые стили (overflow, z-index) могут ломать отображение.

Расширенные сценарии

Многоуровневая навигация

Разделение тура на несколько этапов:

function startMainTour() {
  introJs().setOptions({ steps: mainSteps }).start();
}

function startAdvancedTour() {
  introJs().setOptions({ steps: advancedSteps }).start();
}

Навигация по ролям

function getStepsByRole(role) {
  switch(role) {
    case 'admin':
      return adminSteps;
    case 'user':
      return userSteps;
  }
}

Итоговая структура навигации

Грамотно реализованная навигация с Intro.js включает:

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

Такая реализация превращает интерактивный тур в полноценный инструмент ориентирования по разделам сайта и значительно упрощает освоение интерфейса.

Оглавление