Здесь пойдёт речь об относительно новых структурных элементах, добавленных в HTML, облегчающих создание модальных окон и выпадающих меню.
Как указывается в документации на сайте mozilla.org, тег <details> используется для «раскрытия скрытой (дополнительной) информации», по сути это спойлер, при нажатии отображающий скрытую в себе информацию. Самая простая html-структура такого спойлера выглядит так:
<details>Постучала Машенька в дверь — не отвечают. Толкнула она дверь, дверь и открылась. Вошла Машенька в избушку, села у окна на лавочку.</details>Этот код можно поместить между тегами <body>. Добавлю стили:
body {
padding: 5rem 5rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: flex;
justify-content: center;
padding: 30px;
}
details {
width: 100%;
height: auto;
outline: 2px dotted #DD7B7C;
padding: 1rem 0 1rem 1rem;
}Результат:
See the Pen The combination of «details» and «summary» — 1 by Anry (@haracan) on CodePen.
Можно видеть, что при закрытом <details> отображается маркер «стрелка» и слово «подробнее», которого нет в моём коде. Дело в том, что таковы настройки <details> в браузере по умолчанию, это можно изменить. Попробую изменить маркер и слово. Добавлю в <details> элемент настраиваемого заголовка <summary>, напишу своё слово и оберну скрытый текст в тег абзаца <p>, который при желании можно стилизовать:
<details>
<summary>Села Маша и думает:</summary>
<p>Кто же здесь живёт? Почему никого не видно?</p>
</details>Поиграю со стилем и к предыдущему добавлю следующий код:
body {
padding: 5rem 5rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
display: flex;
justify-content: center;
padding: 30px;
}
details {
width: 100%;
height: auto;
outline: 2px dotted #DD7B7C;
padding: 1rem 0 1rem 1rem;
}
summary {
display: block;
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
summary::before {
content: "\23E9";
margin-right: 1em;
color: white;
line-height: 1;
font-weight: bold;
background: #3b88c3;
padding: 0.3em 0.5em 0.4em 0.5em;
border-radius: 10% 10%;
}
details[open]>summary::before {
content: "\23EC";
}Вот так это будет выглядеть на практике:
See the Pen The combination of «details» and «summary» — 2 by Anry (@haracan) on CodePen.
Возможности <details> гораздо шире, чем могут показаться на первый взгляд. Перед нами — всем так хорошо знакомое меню-аккордеон, необходимо лишь немного модифицировать код. Сделаю это…
<div class="menu">
<details class="inner_1">
<summary class="menu-header">
<span class="btn">медведь 1</span>
</summary>
<div class="menu-body">
<p>Будешь у меня жить</p>
</div>
</details>
<details class="inner_1">
<summary class="menu-header">
<span class="btn">медведь 2</span>
</summary>
<div class="menu-body">
<p>Будешь печку топить</p>
</div>
</details>
<details class="inner_1">
<summary class="menu-header">
<span class="btn">медведь 3</span>
</summary>
<div class="menu-body">
<p>Будешь кашу варить</p>
</div>
</details>
</div>Изменю стиль. Обратите внимание на код, которым я убираю маркер, для Firefox необходимо задать отдельное правило:
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 1rem;
padding: 5rem;
}
details {
width: 100%;
height: auto;
}
details+details {
margin-top: 1em;
}
summary {
display: block;
cursor: pointer;
padding: 1rem 0 1rem 1rem;
background: #989bda;
border: 1px solid #666AB7;
border-radius: 0.5em;
box-shadow: inset 0 0 2px #666AB7;
}
/* убрать стандартный маркер */
details summary::-webkit-details-marker {
display: none
}
/* убрать стандартный маркер Firefox */
details>summary {
list-style: none;
}
.menu span {
color: white;
text-shadow: 0 1px #000;
text-transform: uppercase;
font-size: 1.2rem;
font-weight: bold;
}
.menu-body {
padding: 1rem 0 1rem 1rem;
border: 1px solid #666AB7;
border-radius: 0.5em;
box-shadow: inset 0 0 2px #666AB7;
margin-top: 1em;
}В итоге получилось нечто знакомое:
See the Pen The combination of «details» and «summary» — 3 by Anry (@haracan) on CodePen.
Попробую сделать обычную подсказку. Не буду усложнять её структуру, для примера будет достаточно и этого:
<details>
<summary open>Медведь сказал</summary>
<div class="tip">А если уйдёшь, всё равно поймаю и тогда уж съем!</div>
</details>Без анимации и дополнения в виде стрелочки, которая бы указывала, откуда выходит блок с подсказкой (здесь в этом нет необходимости), стилизую следующим образом:
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-size: 1rem;
padding: 5rem 1rem;
}
details {
width: 100%;
height: auto;
position: relative;
width: fit-content;
width: -moz-fit-content;
height: fit-content;
}
.tip {
position: absolute;
z-index: 100;
display: block;
max-width: 17rem;
padding: 0.5rem;
word-wrap: break-word;
background-color: wheat;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.7);
border-radius: .3rem;
transform: translate(calc(100% + 1rem), -3rem);
top: 0;
box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.7);
}
summary {
padding: .5rem 1rem;
line-height: 1.5;
border-radius: .3rem;
color: #fff;
background-color: #5D5D5D;
border: 1px solid rgba(0, 0, 0, 0.7);
cursor: pointer;
white-space: nowrap;
}
/* убрать стандартный маркер */
details summary::-webkit-details-marker {
display: none
}
/* убрать стандартный маркер Firefox */
details > summary {
list-style: none;
}
summary:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3);
}Теперь при нажатии на импровизированную кнопку появляется замечательная подсказка:
See the Pen The combination of «details» and «summary» — 4 by Anry (@haracan) on CodePen.
Можно анимировать подсказку, сделать, например, чтобы она плавно появлялась и исчезала через некоторое время. Добавив скрипт, при помощи тега <details> можно также сделать модальное окно. И скорее всего это не предел. Используя один лишь CSS, можно сделать много чего интересного.