Css разворачивающийся блок: Как сделать сворачивающийся и разворачивающийся блок?

Содержание

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

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

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

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

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

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

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

Примеры:

1. Выделенная часть текста.

Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла

Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла

Код:

Html

<div>Бла-бла-бла-бла-бла-бла <input type="checkbox"/> <label for="hd-1" >Справка</label> бла-бла-бла-бла-бла-бла <span> Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла </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

Физиология человеческого восприятия работает таким образом, что «быстрые» объекты просто не успевают восприниматься сознанием. Мозгу требуется определенное время, чтобы идентифицировать объект, понять его предназначение и усвоить информацию, которую он несет. С учетом этой особенности работают операционные системы, они отображают окна не мгновенно, а с некоторой задержкой, которая приходится на анимацию. Такого рода анимация называется «разворачивание окна» и состоит обычно в том, что окно словно прячется за невидимыми шторками, которые раздвигаются в стороны, постепенно показывая содержимое окна. Разворачивание может происходить по горизонтали, вертикали или сразу в двух направлениях. Аналогично совершается и сворачивание окна, но в этом случае информация скрывается.

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

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

<style type="text/css">

#window {
background: #fc0; /* Цвет фона */
width: 300px; /* Ширина слоя в пикселах */
height: 200px; /* Высота слоя в пикселах */
position: absolute; /* Абсолютное позиционирование */
left: 50%; /* Положение слоя по горизонтали */
top: 50%; /* Положение слоя по вертикали */
margin-left: -150px; /* Смещаем слой влево */
margin-top: -100px; /* Смещаем слой вверх */
clip: rect(auto 150 auto 150) /* Скрываем содержимое слоя */
}

#window P {
margin: 0px; /* Убираем отступы вокруг параграфа */
padding: 10px /* Поля вокруг текста */
}

#title {
background: #666; /* Цвет фона заголовка */
padding: 5px; /* Поля вокруг текста заголовка */
font-weight: bold; /* Жирное начертание текста */
text-align: right /* Выравнивание по правому краю */
}

#title A {
color: white; /* Белый цвет ссылок в заголовке */
text-decoration: none /* Убираем подчеркивание у ссылок */
}

</style>

<div id=window>
<div id=title><a href="javascript: curtainOff()">Закрыть окно [X]</a></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.</p>
</div>

Вид слоя управляется с помощью стилей, как показано в данном примере. Содержимое самого слоя первоначально скрыто с помощью параметра clip, который работает только для абсолютно позиционированных элементов. По этой причине для слоя обязательно требуется задать свойство position со значением absolute.

Сам эффект разворачивания основан на динамическом изменении значений параметра clip, поэтому вначале разберем, что он из себя представляет.

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

Синтаксис применения clip следующий:

clip: rect(y1 x1 y2 x2) | auto

Значение auto оставляет край без изменения, а положение остальных значений показано на рис. 1.

Рис. 1. Значения параметра clip
Если мы хотим разворачивать слой только по горизонтали, то нас интересуют только значения x1 и x2. Причем, значение x1 постепенно должно уменьшаться до нуля, а x2, наоборот, увеличиваться, пока не достигнет значения, равное ширине слоя. В примере 2 показано создание функции curtainOn(), которая изменяет требуемые значения координат.

step = 10 // Шаг приращения координат
width = 300 // Ширина слоя в пикселах
x1 = x2 = width/2

// Начальное значение координат x1 и x2 
function curtainOn() {

// Выполняем до тех пор, пока переменная x1 не станет равной нулю 
 if (x1 > 0) { 

  x1 -= step // Уменьшаем x1 на величину step
  x2 += step // Увеличиваем x2 на величину step
  clip = "auto " + x2 + " auto " + x1 // Формируем значение для атрибута clip

// Изменяем значение clip для слоя window
  document.getElementById("window").style.clip = "rect(" + clip + ")"

// Рекурсивно вызываем функцию curtainOn каждые 30 миллисекунд
  setTimeout("curtainOn()", 30)
 }

}

Пошаговое изменение координат атрибута clip происходит за счет использования встроенной функции setTimeout, в качестве ее аргумента указывается функция curtainOn, которую следует вызывать через определенный промежуток времени. Изменяя значение времени в большую или меньшую сторону, можно регулировать скорость раскрытия слоя. Также на скорость влияет величина шага приращения step, которая к тому же, управляет и плавностью движения.

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

Сворачивание слоя происходит аналогично, но теперь уже требуется увеличивать значение координаты x1 (которая после разворачивания равна нулю), а значение координаты x2 (равную ширине слоя) уменьшать.

function curtainOff() {

 if (x2 > (width/2)) {

  x1 += step
  x2 -= step
  clip = "auto " + x2 + " auto " + x1

  document.getElementById("window").style.clip = "rect(" + clip + ")"
  setTimeout("curtainOff()", 30)
 }

}

Браузер Opera хотя корректно сворачивает и разворачивает содержимое слоя, но сам фон при этом не скрывается. Получается, что цветной прямоугольник будет висеть постоянно, закрывая основное содержание веб-страницы. Специально для этого браузера следует добавить свойство display со значением none, а затем для отображения слоя установить значение block. Окончательный код показан в примере 4.

<html>
<head>
<style type="text/css">

#window {
background: #fc0;
width: 300px; height: 200px;
position: absolute;
left: 50%; top: 50%;
margin-left: -150px; margin-top: -100px;
clip: rect(auto 150 auto 150)
}

#window P {
margin: 0px; padding: 10px
}

#title {
background: #666; padding: 5px; font-weight: bold; text-align: right
}

#title A {
color: white; text-decoration: none
}

</style>

<script language="JavaScript">

step = 10
width = 300
x1 = x2 = width/2

function curtainOn() {

// Отображаем слой window в браузере Opera
if (Opera) document.getElementById("window").style.display = "block"

if (x1 > 0) {

x1 -= step
x2 += step
clip = "auto " + x2 + " auto " + x1

document.getElementById("window").style.clip = "rect(" + clip + ")"
setTimeout("curtainOn()", 30)
}

}

function curtainOff() {

if (x2 > (width/2)) {

x1 += step
x2 -= step
clip = "auto " + x2 + " auto " + x1

document.getElementById("window").style.clip = "rect(" + clip + ")"
setTimeout("curtainOff()", 30)
}

// Прячем слой window в браузере Opera
else if (Opera) document.getElementById("window").style.display = "none"

}

</script>
</head>
<body>

<div id=window>
<div id=title><a href="javascript: curtainOff()">Закрыть окно [X]</a></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis te feugifacilisi.</p>
</div>

<br><br>
<a href="javascript: curtainOn()">Развернуть окно</a>


<script language="JavaScript">

// Проверяем, какой браузер перед нами
Opera = document.getElementById && window.opera

// Если Opera. то прячем слой window
if (Opera) document.getElementById("window").style.display = "none" 

</script>

</body>
</html>

Не обязательно делать разворачивание слоя по горизонтали, указанным способом можно разворачивать и по вертикали (пример 5) или одновременно в двух направлениях.

<html>
<head>
<style type="text/css"> 
#window {
background: #fc0; 
width: 300px; height: 200px; 
position: absolute;
left: 50%; top: 50%;
margin-left: -150px; margin-top: -100px;
clip: rect(100 auto 100 auto)
}

#window P {
margin: 0px; padding: 10px
}

#title {
background: #666; padding: 5px; font-weight: bold; text-align: right
}

#title A {
color: white; text-decoration: none
}

</style>

<script language="JavaScript">

step = 10
height = 200
y1 = y2 = height/2

function curtainOn() {

if (Opera) document.getElementById("window").style.display = "block"

if (y1 > 0) {

y1 -= step
y2 += step
clip = y1 + " auto " + y2 + " auto"

document.getElementById("window").style.clip = "rect(" + clip + ")"
setTimeout("curtainOn()", 30)
}

}

function curtainOff() {

if (y2 > (height/2)) {

y1 += step
y2 -= step
clip = y1 + " auto " + y2 + " auto"

document.getElementById("window").style.clip = "rect(" + clip + ")"
setTimeout("curtainOff()", 30)
}
else if (Opera) document.getElementById("window").style.display = "none"

}

</script>
</head>
<body>

<div id=window>
<div id=title><a href="javascript: curtainOff()">Закрыть окно [X]</a></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat 
volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
Duis te feugifacilisi.</p>
</div>

<br><br>
<a href="javascript: curtainOn()">Развернуть окно</a>


<script language="JavaScript">

Opera = document.getElementById && window.opera
if (Opera) document.getElementById("window").style.display = "none" 

</script>

</body>
</html>

что это и как работает

От автора: элементы являются строительными блоками веб-страниц — при создании веб-сайтов вы фактически «складываете кирпичи» из элементов. Когда эти элементы уложены, вы используете CSS, чтобы настроить их внешний вид и расположение.

Чтобы правильно разместить элемент на веб-странице относительно других элементов, мы используем такие вещи, как отступы и поля. Это:

padding: пространство между границей элемента и областью содержимого.

margin: пространство между границей элемента и границей соседних элементов.

Вот как визуализируются отступы и поля элемента с помощью веб-инспектора Google Chrome:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Это должно быть достаточно ясно, но существуют ситуации, когда поля одного элемента и его соседа будут сливаться (или сворачиваться) в единое пространство; таким образом, что нет возможности сказать, чье это поле:

Это могло произойти в вашем коде, если вы некоторое время писали HTML и CSS. И это может быть занозой, если вы не знаете, что происходит под капотом! Чтобы правильно понять это, нам нужно начать с того, что означает сворачивание полей.

Что такое сворачивание полей?

Хороший вопрос, рад, что вы спросили. Согласно W3C: «В CSS смежные поля двух или более блоков (которые могут быть или не быть смежными) могут объединяться в одно поле. Говорят, что поле, которое объединяется таким образом, сворачивается, а итоговое комбинированное поле называется свернутым полем». — W3C

Давайте разберем это подробно. Таким образом, «смежные поля» — это поля, расположенные рядом друг с другом, и они могут объединяться в единое поле. Но значит ли это, что все смежные поля являются сворачиваемыми? Ответ — нет!

В CSS смежные поля — это вертикальные поля, которые соответствуют некоторым правилам. Да, вы прочитали правильно! Это означает, что горизонтальные поля (margin-left и margin-right) не считаются смежными. Кроме того, в некоторых ситуациях вертикальные поля также не считаются смежными.

Давайте начнем с определенных сценариев, в которых сворачивание полей происходит.

1. Родительский элемент и первый потомок

В приведенном ниже примере кода:

<div>Outside the parent</div>
<div>
<p>
Here is a paragraph housed in the parent element
</p>
</div>

<div>Outside the parent</div>

<div>

<p>

Here is a paragraph housed in the parent element

</p>

</div>

Второй div — это родитель, и он содержит потомка p. Если мы применяем к родителю и первому ребенку свойство margin-top, в результате оба поля будут соприкасаться, поля будут свернуты.

div {
background: #3d8bb1 /* blue */;
}
.parent {
margin-top: 30px;
background: #49b293 /* green */;
height: 150px;
}
.child {
margin-top: 10px;
background: #b03532 /* red */;
}

div {

background: #3d8bb1 /* blue */;

}

.parent {

margin-top: 30px;

background: #49b293 /* green */;

height: 150px;

}

.child {

margin-top: 10px;

background: #b03532 /* red */;

}

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

Однако родитель и его дочерний элемент выровнены по верхнему краю, в этом случае для отображения выбирается поле с большим значением (30px), а меньшее сворачивается в 0. Если бы потомок имел большее поле (скажем, 50px), тогда было бы выбрано оно.

Если вы измерите, вы увидите, что пространство между границей потомка и внешней стороной div составляет 30px.

Отрицательные значения полей

Если бы оба поля имели отрицательные значения, например:

.parent {
margin-top: -30px;
background: #49b293 /* green */;
height: 150px;
}
.child {
margin-top: -10px;
background: #b03532 /* red */;
}

.parent {

margin-top: -30px;

background: #49b293 /* green */;

height: 150px;

}

.child {

margin-top: -10px;

background: #b03532 /* red */;

}

Выбирается снова самое большое поле, в данном случае это -10px.

Однако, если одно поле является отрицательным значением, а другое положительным, мы объединяем оба значения:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.parent {
margin-top: 10px;
background: #49b293 /* green */;
height: 150px;
}
.child {
margin-top: -30px;
background: #b03532 /* red */;
}

.parent {

margin-top: 10px;

background: #49b293 /* green */;

height: 150px;

}

.child {

margin-top: -30px;

background: #b03532 /* red */;

}

В этом случае поля слагаются, что даст нам результат -20px.

Важно: значения определяются точно таким же образом во всех сценариях сворачивания полей.

2. Родительский элемент и последний потомок

Как вы можете себе представить, поля также могут сворачиваться между margin-bottom родительского элемента и margin-bottom дочернего. Предположим, у нас есть HTML, который выглядит так:

<div>
<p>
Here is a paragraph housed in the parent element
</p>
</div>
<div>Outside the parent</div>

<div>

<p>

Here is a paragraph housed in the parent element

</p>

</div>

<div>Outside the parent</div>

И стили, которые выглядят так:

.parent {
margin-bottom: 30px;
background: #49b293 /* green */;
height: auto;
}
.child {
margin-bottom: 10px;
background: #b03532 /* red */;
height: 100px;
}

.parent {

margin-bottom: 30px;

background: #49b293 /* green */;

height: auto;

}

.child {

margin-bottom: 10px;

background: #b03532 /* red */;

height: 100px;

}

Будет использовано большее значение margin-bottom, а другое будет свернуто в 0. Разница здесь в том, что высота родителя должна быть установлена на auto.

3. Смежные элементы

Внутри родительского элемента поля будут сворачиваться, когда первому дочернему элементу применено margin-bottom, а к следующему — margin-top:

<div>
<p>
Here is a paragraph housed in the parent element
</p>
<p>
This is the second child
</p>
</div>

<div>

<p>

Here is a paragraph housed in the parent element

</p>

<p>

This is the second child

</p>

</div>

Если мы применяем margin-top и margin-bottom так:

.first-child {
margin-bottom: 30px;
background: #b03532 /* red */;
height: 150px;
}
.second-child {
margin-top: 20px;
background: #da6f2b /* orange */;
height: 100px;
}

.first-child {

margin-bottom: 30px;

background: #b03532 /* red */;

height: 150px;

}

.second-child {

margin-top: 20px;

background: #da6f2b /* orange */;

height: 100px;

}

Таким же образом, как мы рассчитывали ранее, мы получим пространство между границами дочерних элементов в 30px, а не 20px.

3 случая, которые нужно помнить о сворачивании полей

Это подводит нас к концу данной темы! В дополнение к тому, что мы рассмотрели выше, я должен повторить несколько важных моментов, касающихся сворачивания полей.

1. Элементы уровня блока

Сворачивание полей возможны только при использовании элементов уровня блока.

2. Поля сворачиваются только по вертикали

Только вертикально прилегающие поля будут сворачиваться, и то не всегда.

3. Отступы, границы и зазор

Если мы добавили отступ, границу или зазор к элементам в приведенных выше примерах, сворачивание применено не будет. Другими словами, один из способов избавиться от поведения сворачиваемых полей — это добавить какое-то разделение (границы, отступы или зазоры) между полями.

Заключение

Хотя сворачивание полей иногда может быть болезненным, понимание того, как и где это работает, очень полезно, особенно если вы столкнулись с ними случайно!

Автор: Kingsley Silas Chijioke

Источник: //webdesign.tutsplus.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Фиксированный блок в css

Фиксированные блоки используется на сайте для того контента, который должен быть всегда виден на экране.

Основные примеры использования:

Кнопка «Наверха»

Верхнее меню при прокрутке страницы

Сайдбары

Различные рекламные баннеры

Создание фиксированного блока

Для создания таких блоков, мы будем использовать свойство «position fixed».

Создадим простую разметку блока:

Фиксированый блок

Текст фиксированного блока на CSS

И добавим следующие стили:


#fixblock{
	width: 300px;
	height: 100px;
	border: 1px solid #000;
	position: fixed;
	bottom: 0px;
	right: 0px;
}

Для работы фиксированного блока важно указать:

position: fixed — Фиксированное позиционирование

bottom — Положение по вертикали (или top)

right — Положение по горизонтали (или left)

Примеры использования

Рассмотрим стили для конкретных примеров:

Верхнее меню


#topmenu{
	width: 100%;
	position: fixed;
    top: 0px;
}

Так как мы указали ширину в 100%, положение по горизонтали не обязательно.

Кнопка «Наверх»


#ToUp{
	width: 50px;
	height: 50px;
	position: fixed;
    right: 10px;
    bottom: 10px;
}

Правый сайдбар во всю высоту


#rightsidebar{
	width: 300px;
	height: 100%;
	position: fixed;
	right: 0px;
	top: 0px;
}

Collapse. Компоненты · Bootstrap. Версия v4.0.0

Переключайте видимость контента в вашем проекте несколькими классами, нашим плагином переключения видимости и JavaScript.

Примеры

Кликните по кнопке внизу, чтобы показать и скрыть элемент с помощью изменения его класса:

.collapse скрывает содержимое

.collapsing применяется во время переходов

.collapse.show показывает содержимое

Вы можете использовать ссылку с атрибутом href или кнопку с атрибутом data-target. В обоих случаях требуется атрибут data-toggle="collapse".

Ссылка с href

Кнопка с data-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Ссылка с href
  </a>
  <button type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Кнопка с data-target
  </button>
</p>
<div>
  <div>
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Взаимодействие со множественными объектами

Кнопки и ссылки <button> и <a> могут показывать и прятать сразу несколько элементов, обращаясь к их атрибутам href или data-target через селектор jQuery. Несколько <button> или <a> могут показывать или прятать один элемент, если каждый из них обращается к элементу через свои атрибуты href или data-target.

Переключить 1-ый элемент
Переключить 2-ой элемент
Переключить оба элемента

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<p>
  <a data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Переключить 1-ый элемент</a>
  <button type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Переключить 2-ой элемент</button>
  <button type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Переключить оба элемента</button>
</p>
<div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Разворачиваемые панели

Используя компонент «карточка», можно расширить стандартное поведение сворачивания для создания «аккордеона», т.е. столбца сворачиваемых панелей (для экономии места).

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

<div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Разворачиваемая панель #1
        </button>
      </h5>
    </div>

    <div aria-labelledby="headingOne" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Разворачиваемая панель #2
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingTwo" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div>
    <div>
      <h5>
        <button data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Разворачиваемая панель #3
        </button>
      </h5>
    </div>
    <div aria-labelledby="headingThree" data-parent="#accordion">
      <div>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Доступность

Добавьте aria-expanded к «контролирующему» элементу. Этот атрибут явно передает текущее состояние скрываемого элемента, привязанного к «контролирующему» элементу, «экранным читалкам» и прочим вспомогательным технологиям. Если скрываемый элемент скрыт по умолчанию, его aria-expanded должен быть «false» aria-expanded="false". Если раньше вы определяли скрываемый элемент показываемым по умолчанию через класс show, теперь используйте вместо этого класса aria-expanded="true" в «контролирующем» элементе. Основываясь на том, показан или скрыт элемент, плагин будет автоматически переключать этот атрибут (через JavaScript либо через отслеживание клика по другому «контролирующему» элементу, связанному с данным скрываемым элементом).

Дополнение: если ваш «контролирующий» элемент взаимодействует с одним скрываемым элементом – т.е. атрибут data-target указывает на #id – вы можете добавить дополнительный атрибут aria-controls к «контролирующему» элементу, содержащему #id этого скрываемого элемента.

Использование

Плагин «скрытия\показа» использует несколько классов для работы c даже «тяжелыми» элементами:

.collapse прячет содержимое

.collapse.show показывает содержимое

.collapsing добавляется, когда переход начинается и удаляется с его завершением

Эти классы можно найти в _transitions.scss.

Через атрибуты

Добавьте в элемент атрибуты data-toggle="collapse" и data-target для автоматического контроля одного или более скрываемых элементов. Атрибут data-target принимает CSS-селектор для применения к нему поведения toggle’a. Удостоверьтесь, что добавили в скрываемый элемент класс collapse. Если он должен быть показан по умолчанию, добавьте в него класс show.

Для добавления компактно расположенной (см. Разворачиваемые панели для экономии места) группы «контролирующих» элементов добавьте атрибут data-parent="#selector". Обратитесь к демо для просмотра в действии.

Через JavaScript

Активируйте вручную:

$('.collapse').collapse()

Параметры

Параметры можно передавать через атрибуты или JavaScript. Чтобы сделать это через атрибуты, добавьте имя параметра к data-, например data-parent="".

Имя	Тип	По умолч.	Описание
parent	selector \| jQuery object \| DOM element	false	Если есть родительский элемент, все скрываемые элементы под определенным «родителем» закроются, когда он открыт (как в «аккордеоне» — это зависит от класса `card`). Атрибут нужно устанавливать в скрываемой зоне.
toggle	boolean	true	Взаимодействует с скрываемым элементом по обращению

Методы

Асинхронные методы и переходы

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

Смотрите документацию по JavaScript.

`.collapse(options)`

Задействует ваше содержимое как скрываемый элемент. Принимает object дополнительных опций.

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

Задействует на скрываемом элементе функциональность toggle’а (hide\show). Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки событий shown.bs.collapse или hidden.bs.collapse event occurs).

`.collapse('show')`

Показывает скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события shown.bs.collapse).

`.collapse('hide')`

Прячет скрываемый элемент. Возвращается к функции-вызову до того, как элемент показан или скрыт (т.е. до отработки события hidden.bs.collapse).

`.collapse('dispose')`

Уничтожает «коллпас» элемента.

События

Класс «коллапса» в Bootstrap содержит несколько событий для вовлечения, взаимодействия и связи иных событий JS с функциональностью «коллапса».

Тип события	Описание
show.bs.collapse	Это событие наступает немедленно по вызову экземпляра метода `show`.
shown.bs.collapse	Это событие наступает, когда элемент «коллапса» сделан видимым юзеру (будет ждать выполнения CSS-переходов).
hide.bs.collapse	Это событие наступает немедленно по вызову метода `hide`.
hidden.bs.collapse	Это событие наступает как только элемент «коллапса» скрыт от юзера (будет ждать выполнения CSS-переходов).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Основы CSS и HTML. Блочная верстка — Web-Lesson

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

Шаблон вебсайта мы будем делать с помощью блочной верстки, использую тег – «DIV».

Шаг 1 – Разметка веб страницы с помощью тегов HTML

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

HTML — это язык разметки гипертекста. С его помощью создается структура веб страницы. Для этих целей используются теги HTML. Они заключаются в скобки «<» и «>».

Теги, как правило следуют в паре — открывающий и закрывающий. Последний отличается тем, что имеет после первой скобки знак «/». (Например: <div></div>). С помощью тегов вы определяете, что будет располагаться на вашей веб странице.

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

Простейшие теги веб страницы это:

<html>

<head>

<title></title>

</head>

<body>

</body>
</html>

Впоследствии, именно между тегами <body> вы будете размещать другие теги для разметки элементов веб страницы. Важным тегом для структурирования страницы является тег <div>. Используя его, вы можете делить свою страницу на блоки.

Внутри данного тега вы сможете разместить другие HTML теги, которые вам потребуются для создания содержимого вашего сайта (ссылки, текст, изображения и тд.). Все эти элементы впоследствии обретут свой стиль с помощью каскадных таблиц стиля CSS.

Теперь, используя графический редактор (Photoshop например) нарисуем блоки нашей веб страницы:

Код HTML этой страницы будет выглядеть, как показано ниже. Это пример использования тега div:

<html>

<head>

<title></title>

</head>

<body>

<div id=»container»>

<div id=»header»>

</div>

<div id=»navigation»>

</div>

<div id=»menu»>

</div>

<div id=»content»>

</div>

<div id=»footer»>

</div>

</body>

</html>

Как видите, каждому тегу div мы дали определенный селектор ID. То есть каждому отдельному блоку нашей страницы мы дали свое название. Это необходимо для того, чтобы позже, задавая стиль блокам в файле CSS, мы могли отличать один блок от другого.

Существует два вида селекторов. ID — используется для уникальных блоков, таких, которые больше нигде на странице не повторяются. В то время как селектор CLASS — применятся для обозначения повторяющихся блоков.

Также, мы заключили все блоки внутрь блока «container«. Это сделано для того, чтобы впоследствии можно было поместить нашу страницу целиком так, как мы хотим.

Шаг 2 — прикрепление таблицы стилей CSS

Как уже было сказано, CSS таблица стилей определяет дизайн элементов веб страницы. Вы можете разместить ее как внутри своего html документа, так и прикрепить внешний файл. В этом уроке мы будем использовать последний вариант.

Если вы уже открыли свою веб страницу в браузере, то ничего там не обнаружили. Это потому, что вы не наполнили свои блоки ни каким-либо содержимым, ни придали им какой-либо формы и цвета. Контент для блоков вы можете добавить между соответствующими тегами. А вот форму, расположение цвет и другие внешние проявления блоков мы зададим с помощью файла CSS.

Но для начала вы должны создать его. Назовем его style.css и разместим в той же папке, что и документ html. После этого в html файле, между тегами необходимо добавить следующую строчку:

<link rel=»stylesheet» type=»text/css» href=»style.css» />

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

Шаг 3 — задаем стиль

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

Для записи селекторов, кроме тега body, используются знаки «#» либо «.«. они следуют перед именем селектора. Первый применяется, чтобы указать на селектор ID, второй, соответственно на селктор CLASS. Селектор может иметь любое количество свойств. Которые заключаются в фигурные скобки «{}«.

#selector {

property:value;

}

либо

.selector {

property:value;

}

У нас имеются следующие селекторы:

body
container
header
navigation
menu
content
footer

Свойства и возможные значения CSS:

Фон (background) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).

Свойство color используется для определения цвета текста.

font-family
— это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

font-size — размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.

margin — определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх — право- низ — лево. Поскольку верх — низ, право — лево у нас совпадают, то дублировать их нет потребности.

width — ширина блока.

height — высота.

float — свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.

Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?):

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

Примечание

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

Вот его код HTML:

</div>

И CSS:

#clear {
clear:both;
}

А между тегами head записать, какую кодировку необходимо использовать браузеру, если вы вдруг попробуете добавить русский текст в свои блоки:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

Финальный код HTML:

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

<title>Основы HTML и CSS</title>

<link rel=»stylesheet» type=»text/css» href=»style.css» />

</head>

<body>

<div id=»container»>

<div id=»header»>Шапка сайта

</div>

<div id=»navigation»>Блок навигации

</div>

<div id=»menu»>Меню

</div>

<div id=»content»>Контент

</div>

<div id=»clear»>

</div>

<div id=»footer»>Подвал сайта

</div>

</body>

</html>

CSS:

body {

background: #f3f2f3;

color: #000000;

font-family: Trebuchet MS, Arial, Times New Roman;

font-size: 12px;

}

#container {

background: #FFFFFF;

margin: 30px auto;

width: 900px;

height: 1000px;

}

#header {

background: #838283;

height: 200px;

width: 900px;

}

#navigation {

background: #a2a2a2;

width: 900px;

height: 20px;

}

#menu {

background: #333333;

float: left;

width: 200px;

height: 600px;

}

#content {

background: #d2d0d2;

float: right;

width: 700px;

height: 600px;

}

#clear {

clear:both;

}

#footer {

background: #838283;

height: 180px;

width: 900px;

}

Надеемся, данный урок позволил вам понять основы работы с HTML и CSS.

Вот как это выглядит в браузере:

Show-Hide / Collapse-Expand — плагин для WordPress

Live Demo:
См. Живую демонстрацию нашего плагина на сайте showhide.bunte-giraffe.de. Пользователь: демо, пароль: демо.

Show-Hide / Collapse-Expand позволяет вам легко управлять объемом контента, отображаемого пользователю при входе на ваш сайт. Это освободит ваши страницы от беспорядка и придаст вашему сайту стильный минималистичный вид. Вы найдете его удобным для группирования контента, составления часто задаваемых вопросов, сворачивания длинных списков и их развертывания при нажатии, предоставления скрытых ответов на вопросы, более эффективной организации ваших виджетов и многого другого.Вставка шорткода выполняется с помощью удобной кнопки tinyMCE в редакторе WordPress. Вы настроите внешний вид вашей кнопки / гиперссылки на лету и сможете изменить его позже, используя предоставленные параметры шорткода. Почему бы тебе не попробовать?

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

Основные характеристики
Показать / скрыть ЛЮБОЙ контент *
Свернуть / развернуть с помощью эффектов jQuery (скрыть, сложить, выделить, сдвинуть)
Установить скорость анимации
Добавьте свои пользовательские функции JS в события onclick
Свернуть / развернуть списки
Легко добавлять ответы на вопросы
Добавить скрытые ответы в викторины (ответ открывается при нажатии кнопки)
Свернуть виджеты, чтобы очистить боковые панели
Экономьте место на страницах, группируя содержимое по расширяемым заголовкам
Используйте гиперссылки или стильные кнопки на чистом CSS
Индивидуальный стиль каждой ссылки / кнопки
Заставить кнопку придерживаться конца развернутого содержимого
Используйте значки для кнопок или перед ссылками
Вложение до 3 уровней сворачиваемого содержимого
Легко настройте параметры и вставьте шорткод с помощью кнопки TinyMCE
Используйте в боковых панелях, вставив шорткод с необходимыми параметрами
Регулярные обновления
Отличная поддержка

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

Кредиты

Мы использовали лучший генератор кнопок CSS http://www.bestcssbuttongenerator.com для наших гладких кнопок на чистом CSS.

Загрузите файлы плагина в каталог ‘/ wp-content / plugins / show-hidecollapse-expand’ или установите плагин напрямую через экран плагинов WordPress.
Активируйте плагин через экран «Плагины» в WordPress.
Перейдите в Инструменты-> Показать скрыть / Свернуть развернуть экран, чтобы настроить параметры плагина (эффект анимации и скорость анимации).
Перейдите к записи / странице, к которой нужно добавить шорткод, и нажмите кнопку «Свернуть-развернуть» в редакторе TinyMCE.
Настройте необходимые параметры: выберите тип элемента управления, с помощью которого вы хотите, чтобы пользователь разворачивал / свертывал содержимое, выберите цвет гиперссылки или текста кнопки, введите метки для развертывания / свертывания содержимого, выберите значок для вашей кнопки / ссылка и пр.
При необходимости перейдите в Инструменты-> ПоказатьСкрыть / СвернутьРазвернуть экран и переключитесь на вкладку «Справка», чтобы увидеть полный список параметров шорткода.

Могу я посмотреть демонстрацию вашего плагина перед его установкой?: Смотрите живую демонстрацию нашего плагина на showhide.bunte-giraffe.de. Пользователь: демо, пароль: демо.
Как мне вставить шорткод?: Перейдите к сообщению или странице, которые вы хотите отредактировать, и перейдите на вкладку «Визуализация». Вы увидите кнопку Свернуть-Развернуть в своем редакторе. Пожалуйста, щелкните по нему и настройте необходимые параметры. Когда вы нажмете ОК, будет вставлен шорткод.
Могу ли я вставить один и тот же шорткод в сообщение и виджет боковой панели?: Да, вы можете использовать один и тот же шорткод несколько раз на одной странице.
Как вложить короткие коды друг в друга?: Для вставки шорткода уровня 2 установите флажок «Этот шорткод должен быть вложен в другой шорткод» или используйте шорткод [bg_collapse_level2]. Для уровня 3 используйте шорткод [bg_collapse_level3].
Будут ли мои другие шорткоды работать внутри вашего шорткода?: Да, мы сделали все, чтобы они заработали. Некоторые шорткоды (например, шорткоды плагинов Google Maps) могут вести себя странно, мы рекомендуем использовать наш плагин Google Maps — Simple Pins, если вам нужно скрыть свои карты Google. Если у вас возникнут проблемы, сообщите нам об этом в ветке поддержки.
Я не хочу использовать анимацию, могу ли я ее отключить?: Конечно.Перейдите в Инструменты-> Показать экран Скрыть / Свернуть развернуть (вкладка Настройки), снимите флажок Включить эффекты пользовательского интерфейса jQuery и установите для параметра Скорость пользовательской анимации (мс) значение 0.

keine Möglichkeit einen Link für collape Funktion einzubinden zu sehen

Очень приятно работать — как только вы почувствуете, как это работает.

Исключительно хорошо написан и сделает все, что вам нужно.

Подходит для отображения / скрытия текста.имеет цветные кнопки.

Я установил и использовал этот плагин на сайте, администратором которого я являюсь. Они используют Elementor для редактирования своих страниц, и я считаю, что это достаточно способный редактор. Однако я не могу использовать компоненты графического интерфейса этого плагина Show-Hide в текстовом редакторе Elementor. Мне удалось вручную добавить шорткод с параметрами и получить желаемый эффект … включая скрытие фотографий и т. Д. Итак, 5 звезд за это и 6 звезд, если вы получите кнопку графического интерфейса, которая появится в редакторе Elementor!

Привет, извините, но я поставил свой обзор на одну звезду, потому что плагин на самом деле не выполняет то, что указано в описании, а именно сворачивает ЛЮБЫЕ виджеты, как здесь четко указано, он делает только с виджетом text / html .Я изменю свой обзор, как только он будет либо удален из описания, либо фактически предложен в качестве функциональности, поскольку я потерял время, устанавливая это и пробуя его, и все время просматривая, как заставить его работать, читая форум и т. …

Отличный плагин. легко настроить. И до сих пор ни разу не было проблем с этим плагином. Работает отлично.

Посмотреть все 19 отзывов

«Показать-Скрыть / Свернуть-Развернуть» — программное обеспечение с открытым исходным кодом.Следующие люди внесли свой вклад в этот плагин.

авторов

1.2.4

Добавлена совместимость с PHP 7.3+
Проверено на совместимость с WP 5.5

1.2.3

Исправлены апострофы, приводящие к ошибкам сворачивания и разворачивания текста

1.2.2

Добавлен атрибут шорткода custom_class

1,2

Добавлена опция «придерживаться конца» для ссылок / кнопок
Исправлено событие onclick для кнопок
Исправлена ошибка, препятствующая работе с плагинами вроде Content View

Исправлена ошибка, мешающая классам css в некоторых темах

1.1

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

1,0

Добавлен выбор скорости анимации.
Добавлена поддержка эффектов пользовательского интерфейса jQuery (слепой, сгиб, выделение, слайд).
Исправлены проблемы с расширяемыми списками.

0,1

Первоначальный выпуск.

блоков Material Design — 400+ потрясающих Bootstrap, 4 раздела

Поиск
- MDB Pro
- Продукты
- Начало работы Домашняя страница
  О MDB
  Скачать
  Быстрый старт
  Руководство по установке
  Настройка стилей
  Полный учебник
  Дорожная карта
  MDB CLI
  Глоток
  Webpack
  MDB Угловой
  MDB React
  MDB Vue
- Макет Обзор компоновки
  Использование сети
  Примеры сетки
  Медиа-объект
  Медиа-запросы
  Утилиты для макета
  Кладка
- Коммунальные услуги Границы
  Clearfix
  Значок закрытия
  Дисплей
  Встроить
  Поплавок
  Flexbox
  Выровнять по горизонтали
  Замена изображения
  Перелив
  Позиция
  Программы для чтения с экрана
  Калибр
  Шаг
  Растяжка
  Текст
  Выровнять по вертикали
  Видимость
- Содержание Код
  Фигурки
  Флаги
  Использование иконок
  Список иконок
  Изображения
  Типографика
  Размер адаптивного шрифта
- CSS Демо
  Анимации
  Фоновое изображение
  Цвета
  Сочетание цветов
  Цвет текста
  Градиенты
  Эффекты при наведении
  Маски
  Параллакс
  Тени
  Скины
  Переменные
- Компоненты Демо
  Предупреждения
  Пуговицы
  Группа кнопок
  Кнопки социальные
  Карты
  Карты продлены
  Выпадающее меню
  Джамботрон
  Группа списка
  Погрузчики / блесны
  Панели
  Пагинация
  Таблетки
  Прогресс бар
  Шаговый
  Вкладки
  Этикетки и значки
- JavaScript Аккордеон
  Карусель
  Свернуть
  Графики
  Карты Google
  Световой ящик
  Мобильный
  Уведомления
  Поповеры
  StickyContent
  Полоса прокрутки и плавная прокрутка
  Теги и микросхемы
  Подсказки
  Волновые эффекты
- Навигация Составы
  Панировочные сухари
  Нижний колонтитул
  Гамбургерное меню
  Мега Меню
  Навс
  Navbar
  ScrollSpy
  SideNav
- Формы Базовые примеры
  Автозаполнение
  Строитель
  Флажок
  Контактная форма

60 CSS Headers and Footers

Коллекция бесплатных HTML / CSS заголовков и нижних колонтитулов примеров кода: липких, фиксированных и т. Д.Обновление коллекции за июнь 2018 г. 6 новинок.

Заголовки статей
Полноэкранные заголовки
Фиксированные (закрепленные) заголовки
Видео заголовки
Нижний колонтитул

Заголовки начальной загрузки
Нижние колонтитулы начальной загрузки
CSS-эффекты героя

Заголовки статей

Автор

Паоло Дузиони
27 июня 2018

О коде

Заголовки непрямоугольные

Непрямоугольный заголовок со встроенным SVG.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Омар Дсоки
18 января 2018

О коде

Заголовок кривой

Заголовок кривой на чистом CSS.

Автор

Web Made Well
8 января 2018 г.

Сделано с

HTML
CSS
JavaScript (jQuery.js)

О коде

Эффект параллакс-прокрутки изображения заголовка с помощью CSS

Создайте эффект прокрутки параллакса, используя положение фонового изображения CSS. Этот скрипт работает, когда изображение заголовка располагается вверху страницы.

Автор

Парк Джорджа У.
6 января 2018 г.

О коде

Заготовка с фиксированным углом

Это перо показывает, как псевдоэлементы и преобразования CSS можно использовать для создания фиксированного углового заголовка с фоном изображения.

Автор

Артур Камара
20 сентября 2017 г.

О коде

Перекос заголовка

Перекошенный заголовок с HTML и CSS.

О коде

Кривая фоновая анимация SVG

Кривая фоновая анимация SVG для заголовка.

Демонстрационное изображение: CSS-анимированный заголовок

CSS-анимированный заголовок

Анимированное фоновое изображение заголовка блога, без JavaScript.
Сделано Nodws
30 мая 2017 г.

Демо-изображение: наклонный элемент Div, фиксированный заголовок

наклонный элемент Div, фиксированный заголовок

Перекошенные блоки div и эффект параллакса, создаваемый фиксированным заголовком. Простая верстка и инструкция по модификации в JS!
Сделано Эндрю Бейлзом
10 января 2017 г.

Демонстрационное изображение: CSS-заголовок

CSS-заголовок

HTML и CSS исправили пропадание прокручиваемого заголовка.
Сделано Дадли Стори
3 декабря 2016 г.

Демонстрационное изображение: иллюстрация многослойного параллакса

Иллюстрация многослойного параллакса

Многослойная иллюстрация параллакса в HTML, CSS и JavaScript.
Автор Патрик Забельски
27 апреля 2016 г.

Демонстрационное изображение: Идея героя

Идея героя

Идея героя в HTML, CSS и JavaScript.
Сделано Джейком Лундбергом
6 апреля 2016 г.

Демонстрационное изображение: Заголовки / Игровая площадка для типографики с изображением героя

Заголовки / Площадка для типографии с изображением героя

Пояснение вверху файла CSS. Просто несколько шрифтов, вспомогательные классы и несколько предустановок для легкой проверки типографики заголовков.
Сделано Мирко Зоричем
18 марта 2016 г.

Демонстрационное изображение: Герой Увеличить прокрутку

Герой Увеличить прокрутку

Простой эффект масштабирования с использованием прокрутки окна для настройки некоторого CSS.
Сделано Дереком Палладино
8 октября 2015 г.

Демо-изображение: Эффект героя аккуратного параллакса

Эффект героя аккуратного параллакса

Немного магии JavaScript, чтобы сделать этого изящного маленького героя параллакса.
Сделано Домиником Магнифико
22 сентября 2015 г.

Демо-изображение: фиксированный заголовок сообщения

Исправленный заголовок сообщения

Фиксированный заголовок для каждого сообщения с HTML, CSS и JavaScript.
Сделано Мастером Белого Волка
5 августа 2015 г.

Демонстрационное изображение: Изображение заголовка CSS Parallax

Изображение заголовка CSS Parallax

Изображение заголовка параллакса HTML и CSS.
Сделано Беннеттом Фили
18 ноября 2014 г.

Автор

Оливия Нг
25 февраля 2019

О коде

Эффект наведения для заголовков

8 эффектов наведения для заголовка в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Хорхе Рейес
12 февраля 2019

О коде

Заголовок / О странице

Простой заголовок.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Херардо Валенсия
27 февраля 2018

О коде

Заголовок для посадочной страницы

Заголовок целевой страницы с использованием клип-пути .

Автор

Джеффри Беннетт
4 сентября 2017 г.

О коде

Сексуальный заголовок анимированных радужных волн

Просто небольшой эксперимент с пользовательским интерфейсом.

Демонстрационное изображение: Витрина изображений героев

Витрина изображений героев

Витрина изображений Hero с HTML, CSS и JS.
Сделано Art
27 мая 2017 г.

Автор

Алан Такер
2 февраля 2017 г.

О коде

Полноэкранный герой

CSS flexbox полный герой с кнопкой.

Демо-изображение: Эффект героя — журнал

Эффект героя — журнал

Главное изображение с высотой 100vh для покрытия всего экрана для создания эффекта обложки журнала.При прокрутке он имеет тонкую анимацию, похожую на открытие журнала.
Сделано Кэмерон Кэмпбелл
15 ноября 2016 г.

Демонстрационное изображение: Заголовок Flexbox Hero

Заголовок Flexbox Hero

Простой заголовок параллакс-героя с flexbox.
Сделано Ана Висенте
5 апреля 2016 г.

Демонстрационное изображение: Заголовок простого параллакса

Заголовок простого параллакса

HTML, CSS и JS простой заголовок параллакс с размытием.
Производитель tsimenis
5 апреля 2016 г.

Демонстрационное изображение: Hero OnScroll

Hero OnScroll

HTML, CSS и JS герой на скролле.
Сделал Вердзик
9 ноября 2015 г.

Демонстрационное изображение: полноэкранный заголовок с циклом цвета фона

Полноэкранный заголовок с циклом цвета фона

Полноэкранный заголовок с циклом цвета фона в чистом CSS.
Сделано Кенни Синг
17 ноября 2014 г.

Демонстрационное изображение: фон непрерывной прокрутки липкого заголовка

Фон непрерывной прокрутки липкого заголовка

Непрерывная прокрутка фона липкого заголовка в HTML, CSS и JavaScript.
Сделано Робертом Боргези
17 сентября 2014 г.

Автор

Джошуа Уорд
9 февраля 2019

Сделано с

HTML (мопс) / CSS (SCSS) / JavaScript

О коде

Липкие заголовки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Марко Бидерманн
1 июля 2017 г.

Сделано с

HTML
CSS / PostCSS
JavaScript / Babel

О коде

Закрепленный заголовок при прокрутке

Высокопроизводительный липкий заголовок с тенью на прокрутке.

Демонстрационное изображение: липкий заголовок с адаптивной прокруткой

Прикрепленный заголовок с адаптивной прокруткой

Использование запросов к элементам для создания макета с изображением обложки и навигацией, которая при прокрутке остается в верхней части страницы.
Сделано Томми Ходжинсом
9 апреля 2017 г.

Демонстрационное изображение: заголовок прокрутки

Заголовок прокрутки

Действительно гладко на мобильных устройствах и устройствах с сенсорным экраном.
Сделано Блейком Боуэном
11 февраля 2017 г.

Демонстрационное изображение: заголовок адаптивной прокрутки

Заголовок адаптивной прокрутки

Адаптивный заголовок прокрутки в HTML, CSS и JavaScript.
Сделано Диланом Макнабом
28 декабря 2015 г.

Демонстрационное изображение: анимация входа / выхода заголовка после прокрутки

Анимация входа / выхода заголовка после прокрутки

Используя jquery-waypoints, хорошо бы проверить, когда data-animate-header (этот раздел) находится над верхней частью экрана, а затем соответственно анимировать data-animate-header (фиксированный заголовок). Мы можем сделать это с помощью переходов css и комбинации из 3 классов ( .header-past , .header-show , .header-hide ) — без необходимости клонирования или каких-либо манипуляций с dom.
Сделано antwon
16 июня 2015 г.

Демо-изображение: Header Fade

Header Fade

Заголовки HTML, CSS и JavaScript исчезают.
Сделано Эммануэлем Пиланде
7 марта 2015 г.

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

Фиксированный эффект прокрутки заголовка и интеллектуальная навигация для одностраничных сайтов

Простая комбинация фиксированного заголовка jQuery при прокрутке и эффекта класса активного раздела навигации.
Сделано Summer
2 февраля 2015 г.

Демо-изображение: Автоматически скрывать липкий заголовок

Автоматически скрывать липкий заголовок

Установка классов в заголовке с помощью JavaScript.
Сделано jasper
21 января 2015 г.

Демонстрационное изображение: CSS-переход липкого заголовка

CSS-переход липкого заголовка

Интересный пример прикрепленного заголовка с использованием некоторых переходов CSS3!
Сделано Брэди Саммонсом
23 октября 2014 г.

Демонстрационное изображение: Верхняя выдвижная навигационная система

Верхняя выдвижная навигационная система

Скрытая навигация, которая выдвигается сверху при прокрутке страницы.
Сделано Крисом Грубером
20 октября 2014 г.

Демонстрационное изображение: адаптивная навигация по липкому заголовку

Адаптивная навигация по липкому заголовку

Классная навигация с HTML, CSS и JS.
Сделано MarcLibunao
8 июня 2014 г.

Демо-изображение: фиксированный заголовок (Quick Hack)

Fixed Header (Quick Hack)

Заголовок не имеет сплошного цвета фона, и есть фиксированный div вверху, который является маленьким. Затем есть div , который не закреплен в заголовке с заголовком.Просто хотел попробовать и прототипировать идею. Работает приличным хакерским способом.
Сделано Дарси Вотт
21 марта 2014 г.

Демонстрационное изображение: визуальный трюк с липким заголовком

Визуальный трюк с липким заголовком

Создает липкий хакерский заголовок стикера с помощью CSS без создания обработчика событий прокрутки.
Сделано Майклом
19 июля 2013 г.

Демонстрационное изображение: Заголовок видео React

Заголовок видео React

Заголовок видео Simple React.js.
Сделано Марком Сарпонгом
2 июня 2017 г.

Демонстрационное изображение: заголовок видео

Заголовок видео

Заголовок видео с HTML, CSS и JavaScript.
Сделано Alex
6 февраля 2017 г.

Демо-изображение: Hero Video

Hero Video

Ручка, показывающая, как создать героя с фоновым видео.
Сделано Крисом Симеоне
20 октября 2016 г.

Демонстрационное изображение: полноэкранное фоновое видео с наложенным текстом в режиме смешанного наложения

Полноэкранное фоновое видео с наложенным текстом в режиме смешанного наложения

Показывает полноэкранное видео с эффективным, разборчивым наложением текста с использованием смешанного режима .
Сделано Дадли Стори
8 сентября 2016 г.

Демонстрационное изображение: Анимация заголовка видео

Анимация заголовка видео

Анимация была настроена с использованием Adobe After Effects и обработана для совместимости во всех браузерах с файлами .ogv и .webm. Не работает в мобильном (намеренно). Используется платформа Bootstrap для HTML, JavaScript не требуется.
Сделано Сильвией Магуйя
4 октября 2015 г.

Демонстрационное изображение: заголовок адаптивного видео

Заголовок адаптивного видео

Адаптивный заголовок видео с градиентом в HTML и CSS.
Сделано Джейкобом Дэвидсоном
29 мая 2015 г.

Автор

Шила Бреннан
8 февраля 2019

Сделано с

HTML (мопс) / CSS (SCSS) / JavaScript (Babel)

О коде

Переключатель анимированного нижнего колонтитула

Развернуть / свернуть нижний колонтитул с анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор

Жюль Форрест
3 января 2019 г.

О коде

Нижний колонтитул с сеткой CSS

Равномерное размещение ссылок с помощью CSS Grid. Никаких полей или отступов не требуется!

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Райан Маллиган
24 февраля 2018

О коде

Липкий нижний колонтитул Flexbox

Простой пример использования flexbox для создания макета страницы липкого нижнего колонтитула .

Демонстрационное изображение: нижний колонтитул параллакса

Нижний колонтитул параллакса

Фиксированный нижний колонтитул веб-сайта с использованием HTML, CSS и JavaScript.
Сделано Остином Пакеттом
7 января 2017 г.

Демонстрационное изображение: нижний колонтитул со шкалой содержания

Нижний колонтитул со шкалой содержания

Нижний колонтитул HTML, CSS и JavaScript с масштабом содержимого.
Сделано Mātthīas
3 декабря 2016 г.

Демонстрационное изображение: нижний колонтитул социальных сетей

Нижний колонтитул социальных сетей

Просто эффект наведения на ссылки социальных сетей в нижнем колонтитуле страницы.
Сделано Эндрю Кэнхэмом
22 сентября 2016 г.

Автор

Пит Ллойд
20 января 2016 г.

Сделано с

HTML
CSS / SCSS
JavaScript (jQuery.js)

О коде

Анимированное меню мобильного нижнего колонтитула

Анимированное меню нижнего колонтитула для отображения 2-3 основных действий, которые пользователь может выполнить на мобильном устройстве.Отображается на 767 пикселей (для пользователей начальной загрузки).

Демонстрационное изображение: простой фиксированный нижний колонтитул

Простой фиксированный нижний колонтитул

HTML и CSS простой фиксированный нижний колонтитул.
Сделано Mātthīas
25 августа 2015 г.

Демонстрационное изображение: простой выдвигающийся нижний колонтитул

Простой выдвижной нижний колонтитул

Простой выдвижной нижний колонтитул HTML и CSS.
Сделано Райли Шоу
24 августа 2014 г.

Демо-изображение: Фиксированный нижний колонтитул HTML и CSS

Фиксированный нижний колонтитул HTML и CSS

Быстрый пример фиксированного нижнего колонтитула.
Сделано Мадсом Хоканссоном
4 мая 2014 г.

Демонстрационное изображение: Чистый CSS Classy Footer

Чистый CSS Classy Footer

Нижний колонтитул с переходом на чистом CSS. Держится подальше от контента, проявляет себя тогда, когда его нужно увидеть.
Сделано Ником Бравером
21 января 2014 г.

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Css разворачивающийся блок: Как сделать сворачивающийся и разворачивающийся блок? — Хабр Q&A

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

Разворачивание и сворачивание слоя | CSS

что это и как работает

Что такое сворачивание полей?

1. Родительский элемент и первый потомок

Отрицательные значения полей

2. Родительский элемент и последний потомок

3. Смежные элементы

3 случая, которые нужно помнить о сворачивании полей

1. Элементы уровня блока

2. Поля сворачиваются только по вертикали

3. Отступы, границы и зазор

Заключение

PSD to HTML

Фиксированный блок в css

Создание фиксированного блока

Примеры использования

Collapse. Компоненты · Bootstrap. Версия v4.0.0

Примеры

Взаимодействие со множественными объектами

Разворачиваемые панели

Доступность

Использование

Через атрибуты

Через JavaScript

Параметры

Методы

Асинхронные методы и переходы

.collapse(options)

.collapse('toggle')

.collapse('show')

.collapse('hide')

.collapse('dispose')

События

Основы CSS и HTML. Блочная верстка — Web-Lesson

Шаг 1 – Разметка веб страницы с помощью тегов HTML

Простейшие теги веб страницы это:

Шаг 2 — прикрепление таблицы стилей CSS

Шаг 3 — задаем стиль

Примечание

Show-Hide / Collapse-Expand — плагин для WordPress

Основные характеристики

Кредиты

Могу я посмотреть демонстрацию вашего плагина перед его установкой?

Как мне вставить шорткод?

Могу ли я вставить один и тот же шорткод в сообщение и виджет боковой панели?

Как вложить короткие коды друг в друга?

Будут ли мои другие шорткоды работать внутри вашего шорткода?

Я не хочу использовать анимацию, могу ли я ее отключить?

1.2.4

1.2.3

1.2.2

1,2

1.1

1,0

0,1

блоков Material Design — 400+ потрясающих Bootstrap, 4 раздела

60 CSS Headers and Footers

Заголовки статей

Автор

О коде

Заголовки непрямоугольные

Автор

О коде

Заголовок кривой

Автор

Сделано с

О коде

Эффект параллакс-прокрутки изображения заголовка с помощью CSS

Автор

О коде

Заготовка с фиксированным углом

Автор

О коде

Перекос заголовка

О коде

Кривая фоновая анимация SVG

CSS-анимированный заголовок

наклонный элемент Div, фиксированный заголовок

`.collapse(options)`

`.collapse('toggle')`

`.collapse('show')`

`.collapse('hide')`

`.collapse('dispose')`