Клиентская навигация: использование тега <details> и <summary>

🔍 Что такое <details> и <summary>?

Эти два тега — скрытые сокровища HTML, которые позволяют создавать интерактивные раскрывающиеся блоки без JavaScript!

• <details> — контейнер для скрытого контента
• <summary> — кликабельный заголовок, который управляет видимостью содержимого

Работают как «аккордеон»: клик по <summary> показывает или скрывает контент внутри <details>.

🛠️ Базовый пример

Вот как выглядит минимальная реализация:

<details>
  <summary>Нажми меня!</summary>
  <p>Ты раскрыл секретный контент! 🎉</p>
</details>

Что произойдёт: 1. Пользователь увидит кликабельный заголовок "Нажми меня!" 2. При клике появится абзац с текстом 3. Повторный клик снова скроет контент

🌟 Расширенные возможности

Открытое состояние по умолчанию

Добавьте атрибут open, чтобы блок изначально был раскрыт:

<details open>
  <summary>Факт о Python</summary>
  <p>Название языка произошло от «Monty Python», а не от змеи! 🐍</p>
</details>

Вложенные аккордеоны

Создаём многоуровневые меню:

<details>
  <summary>Глава 1</summary>
  <details>
    <summary>Раздел 1.1</summary>
    <p>Контент вложенного раздела...</p>
  </details>
</details>

🎨 Стилизация через CSS

Элементы можно кастомизировать под дизайн сайта. Вот полезные CSS-селекторы:

/* Стиль заголовка */
summary {
  background: #f0f0f0;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px;
}

/* Стиль при наведении */
summary:hover {
  background: #e0e0e0;
}

/* Иконка справа (меняем стандартную) */
summary::marker {
  content: "➕ ";
}
details[open] summary::marker {
  content: "➖ ";
}

💡 Практическое применение

Частые вопросы (FAQ)

<details>
  <summary>Как установить Python?</summary>
  <ol>
    <li>Скачайте с python.org</li>
    <li>Запустите установщик</li>
    <li>Отметьте "Add to PATH"</li>
  </ol>
</details>

Скрытые подсказки

<details class="hint">
  <summary>Подсказка к задаче</summary>
  <p>Используйте list comprehension для оптимизации кода</p>
</details>

Мобильное меню

<details>
  <summary>☰ Навигация</summary>
  <nav>
    <a href="/">Главная</a>
    <a href="/about">О нас</a>
    <a href="/contact">Контакты</a>
  </nav>
</details>

⚠️ Важные нюансы

1. Доступность:
   • Всегда добавляйте <summary> — это обязательный элемент
   • Для улучшения a11y используйте ARIA-атрибуты:

<details aria-labelledby="faq1-header">
    <summary id="faq1-header">Вопрос</summary>
    <p>Ответ</p>
</details>

1. Браузерная поддержка:

   • Работает во всех современных браузерах
   • IE11 и ниже не поддерживают — нужен полифил

2. SEO:

   • Содержимое <details> индексируется поисковиками
   • Google видит контент даже в свёрнутом состоянии

🚀 Продвинутый пример: Тематический переключатель

Совмещаем с CSS-переменными для создания тёмной/светлой темы:

<details class="theme-switcher">
  <summary>Тема оформления</summary>
  <button onclick="document.documentElement.style.setProperty('--bg-color', '#fff')">Светлая</button>
  <button onclick="document.documentElement.style.setProperty('--bg-color', '#222')">Тёмная</button>
</details>

🔥 Вывод

Теги <details> и <summary> — это:

• Простота реализации 🤯
• Zero JavaScript 🚀
• Гибкость стилизации 🎨
• Улучшение UX на мобильных устройствах 📱

Попробуйте применить их в своём следующем проекте! Для глубокого погружения в HTML-магию смотрите уроки Данилы Бежина на YouTube.