details - Дополнительная информация
5.0 ☒
details - Новый семантический элемент для скрытия дополнительной информации, вместо гамбургеров и баянов теперь все можно сделать на чистом HTML и CSS
Пример использования для выпадающего меню - смотреть
<details>
<summary>Some details</summary>
<p>More info about the details.</p>
</details>
/*--- Стилизация треугольника ---*/
<style>
summary {
display: block; /*--- !!! Нужно добавлять блочный тип чтобы можно было скрывать маркер ---*/
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: '\25B6';
padding-right: 0.5em;
}
details[open] > summary::before {
content: '\25BC';
}
</style>
Собственые атрибуты:
Когда блок активный к details добавляется - open.
<details open>
open:
Данный логический атрибут указывает, будет ли дополнительная информация отображаться пользователю при загрузке страницы. По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.
Как убрать маркер summary?
Нужно задать для summary тип block! А потом уже добавлять
summary::-webkit-details-marker {
display: none;
}
Можно влаживать друг в друга:
<details id="navrull">
<summary>Вопрос 1</summary>
<p>Население превышает широкий кристаллический фундамент.</p>
<details>
<summary>Приложенные документы</summary>
<ul>
<li><a href="#">Болгары очень дружелюбны;</a></li>
<li>Скумбрия неумеренно перевозит вулканизм;</li>
<li>Дождливая погода, куда входят Пик-Дистрикт;</li>
<li>Белый саксаул дегустирует живописный утконос;</li>
</ul>
</details>
</details>
Чтобы добавлять атрибут open в зависимости от размера экрана через JS:
/* ☢ Робить головне меню відкритим в десктопній версії ☢*/
if (window.matchMedia("(min-width:1100px)").matches) { //якщо співпадає розмір екрану
document.getElementById("navrull").open = true;
} else {
document.getElementById("navrull").open = false;
}
Chrome | Edge | Firefox | Internet | Opera | Safari |
12 | 79 | 49 | NO | 15 | 6 |
Android | Chrome | Edge | Firefox | Opera | Safari | Samsung |
Yes | 12 | 79 | 49 | 15 | 6 | Yes |
Провірити на сайті developer.mozilla.org