Розглянемо реалізацію односторінкового сайту (Landing Page) в якому веб-сторінка розділена на "панелі" (розділи) які відображаються у каскадному вигляді при активації меню веб-сторінки.
Основна реалізація полягає в тому що створюємо панелі (секції, розділи) веб-сторінки.
Панель представляє собою тег <div>. Таких панелей буде 4 з наступними id: home, js, html, about.
Для кожного id у таблиці стилів вказуємо фон.
Кожен з цих <div> має класс "panel". В якому вказується розміри, тінь і т.д.
Тепер потрібно щоб відображалася лише одна панель, а всі інші були скриті. Для цього у стилях класу panel вказуємо display: none;.
Створюємо новий клас active який буде додаватися до панелі яку необхідно буде показати. Основний стиль CSS даного класу: display: block;.
Також створюємо кнопку меню з елемента <div> з id="menu". А також пункти меню(розділи сайту). Пунк меню це елементи <a> в якому вказуємо у атрибуті href якір (хеш) - тег id панелі до якої відноситься. Це буде необхідно для подальшої обробки кліку у JavaScript.
Переходимо до Javascript коду.
Отримання елементів буде за допомогою методів document.getElementsByClassName(), document.getElementById().
Для роботи з класами елемента є Element.classList.
Для прикладу щоб показати/приховати панель меню використовуємо метод Element.classList.toggle() який переключає класс, тобто додає/видаляє в залежності його наявності.
panelMenu.classList.toggle('active');
При відображенні/приховуванні панелі меню до елементів (#home, #html, #js, #about) додається/видаляється клас: panel1, panel2, panel3, panel4.
Завдання даних класів полягає у трансормації панелей за допомогою CSS: transform
Функція setActive() активує вказану панель по переданому id.
Також дана функція викливається коли веб-сторінка відкривається з вказаним хеш тегом.
Це дозволяє поділитися посиланням і відкрити з активуванням потрібного розділу веб-сторінки