Здравствуйте уважаемые начинающие веб мастера.
Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.
Делать это открытым текстом не всегда удобно, так как возможно будет теряться основная нить статьи, поэтому в таком случае лучше будет применить скрытый текст открывающийся по клику мыши.
Объектом для клика может быть выделенная часть текста или кнопка "Справка" размещёная в удобном месте.
Дополнительная информация будет открываться под выделенной частью текста отдельным абзацем, при этом весь остальной контент будет сдвигаться в низ, освобождая место для вкладки.
При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.
Примеры:
1. Выделенная часть текста.
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Код:
Html
<div class="spravca">Бла-бла-бла-бла-бла-бла <input type="checkbox" id="hd-1" class="reference"/>
<label for="hd-1" >Справка</label> бла-бла-бла-бла-бла-бла
<span class="story">
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
</span>
<div>Css
.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 тот-же что и в первом примере.
Css
.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. <details></details> — контейнер, который можно развернуть и свернуть.
2. <summary></summary> — заголовок, по которому можно щёлкнуть, чтоб развернуть контейнер. Повторный щелчёк сворачивает контейнер.
Смотрится и работает эта опция так:
Заголовок
текст текст текст текст
Код:
<details>
<summary>Заголовок</summary>
текст текст текст текст
</details>
Теги details и summary по умолчанию блочные элементы, поэтому, если нужно вставить контейнер в строку, ему нужно будет задать свойство display: inline-block;
Можно так же задать и другое стилевое оформление.
Желаю творческих успехов.
В раздел >>>
А ну-ка, что там ещё интересного
Модальное окно CSS
Дополнительная панель для сайта
Атрибут data
В раздел
Чтоб точно понять, мне нужно видеть весь ваш код. Например, у меня нет класса .spoiler. Если у вас это замена моего .reference, то чтоб его открыть, нужно обязательно в селектор добавить + label, где плюс через пробелы.
Напишите мне весь ваш код, и html и css, тогда я найду ошибку.
Только, когда будете писать код в комментарии, замените угловые скобки в html на спецсимволы. Вместо открывающих скобок поставьте спецсимвол < а вместо закрывающих скобок спецсимвол >. Иначе браузер не отобразит, так как будет воспринимать угловые скобки как тег.
Добрый день! Помогите, пожалуйста, не понимаю, где ошибка, уже кучу вариантов перепробовала, но не встает в строку раскрывающийся текст:
Мы ценим каждого покупателя!
Добро пожаловать в MrShop24!
.spoiler {
display: inline-block !important;
}
Какую-то мелочь упустили (скобка, точ. с запятой и т.п.).
Не получилось сделать выпадающий в строку контейнер. Не понимаю, но почему-то inline-block не сработал
А что она должна открыть? HTML то одинаковый.
Поменяйте названия всех классов и в HTML и в CSS, и тогда будет открываться то, что вы напишите.
создаю 2 кнопку, она открывает 1 блок. что изменить в коде?