Раскрывающиеся блоки для подсказок или дополнительной информации
Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.
Делать это открытым текстом не всегда удобно, так как возможно будет теряться основная нить статьи, поэтому в таком случае лучше будет применить скрытый текст открывающийся по клику мыши.
Объектом для клика может быть выделенная часть текста или кнопка «Справка» размещёная в удобном месте.
Дополнительная информация будет открываться под выделенной частью текста отдельным абзацем, при этом весь остальной контент будет сдвигаться в низ, освобождая место для вкладки.
При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.
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;
Можно так же задать и другое стилевое оформление.
Желаю творческих успехов.
А ну-ка, что там ещё интересного
�� VoiceOver в Safari и JAWS в Chrome, Edge или Firefox не считают – заголовками, если они вложены в .
�� Может показаться, что и подходят для выпадающего меню. Они ведут себя похоже, но это не самое доступное решение. Вот несколько причин:
- Пользователи голосового управления не смогут открыть такой элемент с помощью привычных команд. К примеру, «Нажать на кнопку».
- Скринридеры не всегда понимают, раскрыт сейчас такой элемент или нет.
- Содержимое не попадает в список всех кнопок или других интерактивных элементов на странице, который есть у скринридеров.
- У пользователей скринридеров нет шортката для быстрого перехода к или .
Как сделать выпадающий список HTML
В системе управления UralCMS реализовано множество различных функций для работы с содержимым разделов — тексты, изображения, ссылки, таблицы, выпадающие списки и так далее. Среди прочего, также доступен функционал для создания раскрывающегося блока в тексте раздела.
Раскрывающийся блок может содержать в себе любую информацию: список, текст, картинки, таблицы и так далее. Таким образом, воспользовавшись данным инструментом у Вас получиться оформить разделы более функционально и интересно.
Создание раскрывающегося блока, списка
Чтобы разместить в разделе раскрывающийся блок или список — перейдите в редактирование содержимого раздела, далее, разместите ту информацию (блоки, списки, таблицы, ссылки и т.д.), которая будет раскрываться по специальной ссылке.
Как это работает
Например, Вы хотите разместить в карточке товара в интернет-магазине таблицу размеров доступную лишь по специальной кнопке, открывающей список или блок, чтобы это не влияло на восприятие подробной информации о позиции.
- подобрать текст, который будет являться ссылкой/заголовком раскрывающегося блока
- разместить информацию: текст и таблицу со значениями.
Таким образом, у Вас должно получиться, например:
Таблица размеров
Россий-
ский размер
Между-
народ-
ный размер
Раскрывающийся текст при клике
Я думаю, вы видели на некоторых сайтах, что некоторая часть текста изначальна невидима и только при клике на текстовую ссылку «Подробнее…», «Развернуть» или «Показать/скрыть» появляется скрытая часть текста. Это иногда удобно для навигации по тексту, если он очень большой и некоторую часть/части текста можно и даже нужно скрыть. В любом случае пользователь в любой момент может развернуть скрытый текст и прочесть его. Таким же образом можно скрыть не только текст, но и различные изображения, картинки.
Скажу по секрету, что некоторые SEO-шники таким образом скрывают текст для продвижения сайта под ссылкой простой точки, ведь этот текст предназначен для поисковиков, а не для людей, но не будем о грустном.
Раскрывающийся текст HTML
Тегов HTML, которые смогли бы развернуть при необходимости и показать скрытый текст, пока нет. На форумах в BB-коде в этих целях используется тег [spoiler][/spoiler], но он не работает в HTML.
Для раскрытия текста при клике на текстовую ссылку, нужен скрипт. Я в сети нашла очень простой скрипт.
Скрипт, раскрывающий текст
Ниже сам скрипт. Так как я знаю, как иной раз тяжело в 3 ночи что-то сообразить и понять элементарные казалось бы вещи или когда не понимаешь вообще о чём речь, но нужно кровь из носа выполнить задуманное, в скрипте подробно описано что где поменять/добавить.
Подробнее. (или любая другая надпись на ссылке, при клике на которую показывается весь скрытый изначально текст)
ЗДЕСЬ ПИШЕМ ИЛИ ВСТАВЛЯЕМ ТЕКСТ, КОТОРЫЙ ДОЛЖЕН БЫТЬ ПО УМОЛЧАНИЮ СКРЫТЫМ И ПОКАЗЫВАТЬСЯ (РАСКРЫВАТЬСЯ) ТОЛЬКО ПРИ КЛИКЕ НА ССЫЛКУ "ПОДРОБНЕЕ", СО ВСЕМИ НУЖНЫМИ ТЕГАМИ.
Но этот метод, точнее, скрипт, работает только если вам необходимо скрыть на одной страничке один блок текста. В случаях, когда на одной странице таких скрывающихся блоков текста будет несколько, этот скрипт не подходит. Для этих целей есть другой скрипт, который можно использовать, как для скрытия на одной странице одного, так и нескольких блоков текста или картинок. Скрипт ниже:
Скрипт, раскрывающий несколько блоков текста или картинок на одной странице
Показать/скрыть детальную информацию о о блоке текста №1
Показать/скрыть детальную информацию о о блоке текста №2
Показать/скрыть детальную информацию о о блоке текста №3
Показать/скрыть детальную информацию о о блоке текста №4
Чтобы по умолчанию скрытый текст был открытым в коде меняем display:none на display:block.
Вот и всё! В любом случае, если возникнут вопросы — пишите, буду рада помочь!
Удачи вам в этом порой нелегком деле веб-строительства, достижения всех поставленных целей, выполнения заданий в срок, постоянного совершенствования и крепкого здоровья!