2014
8
Окт

Раскрывающиеся блоки



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

Прежде чаще всего применялись javascript, в настоящее время это можно сделать с помощью свойств CSS3. Применяя те или иные свойства можно просмотреть скрытые блоки с помощью переключателей в виде слова, предложения, словосочетания или кнопки.

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


HTML страница


<input class="toggle-box" id="identifier-1" type="checkbox" > <label for="identifier-1">Нажмите здесь, чтобы прочитать тему "HTML-блоки для сайта"</label> <div>Всегда хочется рационально располагать материал на сайте. Такое расположение иначе еще называется плиточный дизайн. Впервые такое расположение материала использовали при разработке Windows8. Именно с этой версии стали использовать плиточное расположение материала и краткое его содержание. </div> <input class="toggle-box" id="identifier-2" type="checkbox" > <label for="identifier-2">Нажмите здесь, чтобы прочитать тему "Изображения с ленточками"</label> <div>Иногда хочется выделить изображение красивой надписью или просто ленточкой. На ленточке можно размещать подписи над изображением, дополнительные ссылки на объект или просто вы хотите заострить внимание посетителя сайта. Получить такой эффект можно применив различные свойства CSS, ваш творческий потенциал и не используя изображения.</div>

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

Включение и выключение скрытого блока можно разделить на три составные части:

  1. Переключатель checkbox – тег <input type="text" /> - значение атрибута type - идентификатор id="identifier-1"
  2. Переключатель - тег <label></label> со значением идентификатора identifier-1 для атрибута for. Обратите внимание идентификатор тот же, что и для тега <input type="text" />
  3. Блок div , содержащий необходимую информацию.

При использовании нескольких блоков с содержимым необходимо использовать идентификатор для каждого блока свой.

CSS страница


Осталось применить свойства для нашего блока и прижать ему определенный вид. Минимальное количество свойств. Только для блока основного содержания используем фон. Можно применить различные свойства, чтобы блок был интересным.

CSS 1.

.toggle-box { display: none; } .toggle-box + label { display: block; } .toggle-box + label + div { display: none; } .toggle-box:checked + label + div { display: block; background: #efefef; padding:5px; }

Пример 1:

Всегда хочется рационально располагать материал на сайте. Такое расположение иначе еще называется плиточный дизайн. Впервые такое расположение материала использовали при разработке Windows8. Именно с этой версии стали использовать плиточное расположение материала и краткое его содержание.
Иногда хочется выделить изображение красивой надписью или просто ленточкой. На ленточке можно размещать подписи над изображением, дополнительные ссылки на объект или просто вы хотите заострить внимание посетителя сайта. Получить такой эффект можно применив различные свойства CSS, ваш творческий потенциал и не используя изображения.

CSS 2.

Во втором примере используем значок плюс. который при открытии меняется на минус. Для этого пропишем свойства CSS.

.toggle-box { display: none; } .toggle-box + label { cursor: pointer; display: block; font-weight: normal; line-height: 21px; margin-bottom: 5px; color: #556B2F; } .toggle-box + label + div { display: none; margin-bottom: 10px; } .toggle-box:checked + label + div { display: block; } .toggle-box + label:before { background-color: #1E90FF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: #FFFFFF; content: "+"; display: block; float: left; font-size: 12px; font-weight: bold; height: 16px; line-height: 16px; margin: 2px 5px 0px; text-align: center; width: 16px; } .toggle-box:checked + label:before { content: "\2212"; }

Пример 2:

Всегда хочется рационально располагать материал на сайте. Такое расположение иначе еще называется плиточный дизайн. Впервые такое расположение материала использовали при разработке Windows8. Именно с этой версии стали использовать плиточное расположение материала и краткое его содержание.
Иногда хочется выделить изображение красивой надписью или просто ленточкой. На ленточке можно размещать подписи над изображением, дополнительные ссылки на объект или просто вы хотите заострить внимание посетителя сайта. Получить такой эффект можно применив различные свойства CSS, ваш творческий потенциал и не используя изображения.