Раскрывающиеся блоки для подсказок или дополнительной информации

Здравствуйте уважаемые начинающие веб мастера.

Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.

Делать это открытым текстом не всегда удобно, так как возможно будет теряться основная нить статьи, поэтому в таком случае лучше будет применить скрытый текст открывающийся по клику мыши.

Объектом для клика может быть выделенная часть текста или кнопка "Справка" размещёная в удобном месте.

Дополнительная информация будет открываться под выделенной частью текста отдельным абзацем, при этом весь остальной контент будет сдвигаться в низ, освобождая место для вкладки.

При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.

Примеры:

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 под стиль вашего сайта.

Желаю творческих успехов.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *