Создание сайта с использованием скрытых разделов, открывающихся при клике, может быть полезным во многих случаях. Это позволяет сделать веб-страницу более компактной и удобной для пользователей, так как они могут легко найти нужную информацию без необходимости прокручивать длинные страницы.
В этой статье мы рассмотрим, как создать такой сайт с использованием HTML, CSS и JavaScript.
HTML разметка
Для создания скрытых разделов нам потребуется использовать теги <div> для каждого раздела. Вот пример базовой структуры HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Скрытые разделы</title>
</head>
<body>
<div class="section">
<h2 class="section-title">Заголовок раздела 1</h2>
<div class="section-content">
Содержимое раздела 1
</div>
</div>
<div class="section">
<h2 class="section-title">Заголовок раздела 2</h2>
<div class="section-content">
Содержимое раздела 2
</div>
</div>
<!-- и так далее для остальных разделов -->
</body>
</html>
CSS стили
Теперь нам необходимо добавить стили для наших разделов, чтобы сделать их скрытыми по умолчанию и красиво анимировать их открытие:
.section-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.section.open .section-content {
max-height: 500px;
}
Здесь мы используем свойство max-height для скрытия содержимого раздела и анимации его открытия. Значение 500px должно быть достаточно большим, чтобы вместить содержимое раздела, но вы можете изменить его по своему усмотрению.
JavaScript
Наконец, добавим немного JavaScript кода, чтобы обрабатывать клики по заголовкам разделов и открывать соответствующие им содержимое:
document.addEventListener('DOMContentLoaded', function() {
var sectionTitles = document.querySelectorAll('.section-title');
for (var i = 0; i < sectionTitles.length; i++) {
sectionTitles[i].addEventListener('click', function() {
this.parentNode.classList.toggle('open');
});
}
});
Теперь, когда пользователь кликает на заголовок раздела, содержимое этого раздела открывается или закрывается благодаря добавлению/удалению класса open.
😉 Вот и все! Теперь у вас есть сайт с использованием скрытых разделов, открывающихся при клике. Вы можете дополнительно стилизовать элементы и добавить больше разделов по своему усмотрению. Удачи вам в веб-разработке!
Добавить комментарий