�� VoiceOver в Safari и JAWS в Chrome, Edge или Firefox не считают – заголовками, если они вложены в .
�� Может показаться, что и подходят для выпадающего меню. Они ведут себя похоже, но это не самое доступное решение. Вот несколько причин:
- Пользователи голосового управления не смогут открыть такой элемент с помощью привычных команд. К примеру, «Нажать на кнопку».
- Скринридеры не всегда понимают, раскрыт сейчас такой элемент или нет.
- Содержимое не попадает в список всех кнопок или других интерактивных элементов на странице, который есть у скринридеров.
- У пользователей скринридеров нет шортката для быстрого перехода к или .
Выпадающий блок при нажатии на HTML + CSS
Ранее также все решалось, то для этого обязательно подключали javascript, по при обновленном CSS3 все изменилось, и теперь все выстраивается на чистых стилях. Где нужно задать свойство под каждый элемент, которые будут выполнять свой заданный функционал. Плюс эта версия блока отличается от других, что при клике вы можете открыть любой раздел, как и на остальных, но также автоматически закрыть, для удобства все сделано отлично.
Такой блок можно увидеть на страницах, где идет очень много содержание по информации, и подключая развертывание блоков, вы сразу заметите, что место стало намного больше, что для удобства и восприятие нужно создавать все корректно и удобности для пользователя.
Так выглядит при проверке, где изменена палитра, также добавлены некоторые элементы для редактирование.
Приступаем к установке:
.gaonutosal <
float: left;
width: 37%;
padding: 0 1em;
>
.pesontedan <
position: relative;
margin-bottom: 1px;
width: 100%;
color: #f3f1f1;
overflow: hidden;
>
.pesontedan input <
position: absolute;
opacity: 0;
z-index: -1;
>
.pesontedan label <
position: relative;
display: block;
padding: 0 0 0 1em;
background: #1c3e5d;
line-height: 3;
cursor: pointer;
text-shadow: 0 1px 0 #333131;
font-size: 17px;
>
.pesontedan-content <
max-height: 0;
overflow: hidden;
background: #0d7b8e;
transition: max-height .40s;
font-size: 14px;
color: #fffdfd;
text-shadow: 0 1px 0 #292727;
>
.pesontedan-content <
background: #0f6f80;
>
.pesontedan-content p <
margin: 1em;
>
/* :checked */
.pesontedan input:checked ~ .pesontedan-content <
max-height: 100vh;
>
/* Icon */
.pesontedan label::after <
position: absolute;
right: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .40s;
-o-transition: all .40s;
transition: all .40s;
>
.pesontedan input[type=checkbox] + label::after <
content: «+»;
>
.pesontedan input[type=radio] + label::after <
content: «\25BC»;
>
.pesontedan input[type=checkbox]:checked + label::after <
transform: rotate(315deg);
>
.pesontedan input[type=radio]:checked + label::after <
transform: rotateX(180deg);
>
Сами заголовки идут по вверх, на цветовой гамме, которая задана в стилистике, где можно ее изменить под свой стиль дизайна. Также у вас появится возможность поставить скорость открывание, все отлично настраивается. Если установить больше трех разделов, то получится по виртуальности схоже как на навигацию.
Раскрывающиеся блоки для подсказок или дополнительной информации
Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.
Делать это открытым текстом не всегда удобно, так как возможно будет теряться основная нить статьи, поэтому в таком случае лучше будет применить скрытый текст открывающийся по клику мыши.
Объектом для клика может быть выделенная часть текста или кнопка «Справка» размещёная в удобном месте.
Дополнительная информация будет открываться под выделенной частью текста отдельным абзацем, при этом весь остальной контент будет сдвигаться в низ, освобождая место для вкладки.
При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.
1. Выделенная часть текста.
Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
< div class color: #008080;">spravca «>Бла-бла-бла-бла-бла-бла < input type color: #008080;">checkbox » id color: #008080;»>hd-1 » class color: #008080;»>reference «/>
< label for color: #008080;">hd-1 » >Справка < /label >бла-бла-бла-бла-бла-бла
< span class color: #008080;">story «>
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
< /span >
< div >
.reference <
display : none ;
>
.reference ~ .story <
display : none ;
>
.reference + label <
font-size : 16px ;
padding : 0 ;
color : green ;
cursor : pointer ;
display : inline-block ;
>
.reference:checked ~ .story <
display : block ;
background : Snow ;
padding : 10px ;
>
2. Кнопка, которую можно разместить в любой части контента.
Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Html тот-же что и в первом примере.
.reference <
display : none ;
>
.reference ~ .story <
display : none ;
>
.reference + label <
position : absolute ;
top : 0 ;
left : 200px ;
border : 1px solid #333 ;
border-radius : 4px ;
background : #F0FFF0 ;
padding : 3px ;
color : green ;
font-size : 16px ;
cursor : pointer ;
display : inline-block ;
>
.reference:checked ~ .story <
display : block ;
background : Snow ;
padding : 10px ;
>
.spravca <
position : relative ;
>
Можно дополнительно оформить раскрывающиеся блоки в css под стиль вашего сайта.
В HTML5 похожая опция заложена по умолчанию.
Реализуется она тегами
1. — контейнер, который можно развернуть и свернуть.
2. — заголовок, по которому можно щёлкнуть, чтоб развернуть контейнер. Повторный щелчёк сворачивает контейнер.
Смотрится и работает эта опция так:
текст текст текст текст
< detail s>
< summary >Заголовок< /summary >
текст текст текст текст
< /details >
Теги details и summary по умолчанию блочные элементы, поэтому, если нужно вставить контейнер в строку, ему нужно будет задать свойство display: inline-block;
Можно так же задать и другое стилевое оформление.
Желаю творческих успехов.
А ну-ка, что там ещё интересного
Раскрывающиеся блоки с скрытым содержанием
Нужно сверстать блок (см. картинку 1) который при клике разворачивался и показывал другой блок с другим текстом (см. картинку 2). Как это можно сверстать? 
Отслеживать
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
задан 19 апр 2020 в 9:23
13 1 1 серебряный знак 4 4 бронзовых знака
19 апр 2020 в 9:28
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Могу предположить, что Вам с JavaScript разобраться будет пока что слишком сложно. Поэтому вот решение на чистом CSS:
* < margin: 0; padding: 0; box-sizing: border-box; >body < margin: 10px; >.accordion < transform: translateZ(0); background: white; border-bottom: 1px solid lightgray; border-left: 1px solid lightgray; border-right: 1px solid lightgray; >.accordion>.accordion-toggle < display: none; position: absolute; opacity: 0; >.accordion>label < display: block; position: relative; height: 50px; line-height: 50px; padding: 0 20px; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; background: #ecebec; color: #555; font-size: 15px; font-weight: bold; cursor: pointer; >.accordion>label:after < content: ''; position: absolute; top: 12px; right: 20px; width: 12px; height: 12px; border-left: 2px solid #555; border-top: 2px solid #555; transform: rotate(-135deg); transition: 0.4s transform; >.accordion>section < overflow: hidden; height: 0; transition: all .4s; >.accordion>.accordion-toggle:checked~label:after < transform: rotate(45deg); top: 16px; >.accordion>.accordion-toggle:checked~section < height: 50px; >.accordion>section p
Текст 1
Текст 2
Текст 3
Текст 4