ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выпадающий блок при нажатии на HTML + CSS

Выпадающий блок при нажатии на HTML + CSS

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

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

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

Так выглядит при проверке, где изменена палитра, также добавлены некоторые элементы для редактирование.

Чистый CSS-аккордеон с помощью CSS3

Приступаем к установке:

HTML

Код
<div class="navigaonusing">
  <div class="gaonutosal">
  <p><strong>Чистый CSS-аккордеон</strong></p>
  <div class="pesontedan">
  <input id="pesontedan-one" type="checkbox" name="pesontedans">
  <label for="pesontedan-one">Выпадающая навигация</label>
  <div class="pesontedan-content">
  <p>Первое описание</p>
  </div>
  </div>
  <div class="pesontedan">
  <input id="pesontedan-two" type="checkbox" name="pesontedans">
  <label for="pesontedan-two">Чистый CSS-аккордеон</label>
  <div class="pesontedan-content">
  <p>Второй мануал</p>
  </div>
  </div>
  <div class="pesontedan">
  <input id="pesontedan-three" type="checkbox" name="pesontedans">
  <label for="pesontedan-three">Раскрывающуюся навигацию</label>
  <div class="pesontedan-content">
  <p>Третье описание по материалу</p>
  </div>
  </div>
  </div>

CSS

Код
.gaonutosal {
  float: left;
  width: 37%;
  padding: 0 1em;
}

.pesontedan {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #f3f1f1;
  overflow: hidden;
}

.pesontedan input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

.pesontedan label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #1c3e5d;
  line-height: 3;
  cursor: pointer;
  text-shadow: 0 1px 0 #333131;
  font-size: 17px;
}

.pesontedan-content {
  max-height: 0;
  overflow: hidden;
  background: #0d7b8e;
  transition: max-height .40s;
  font-size: 14px;
  color: #fffdfd;
  text-shadow: 0 1px 0 #292727;
}

.pesontedan-content {
  background: #0f6f80;
}
.pesontedan-content p {
  margin: 1em;
}
/* :checked */
.pesontedan input:checked ~ .pesontedan-content {
  max-height: 100vh;
}

/* Icon */
.pesontedan label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .40s;
  -o-transition: all .40s;
  transition: all .40s;
}
.pesontedan input[type=checkbox] + label::after {
  content: "+";
}
.pesontedan input[type=radio] + label::after {
  content: "\25BC";
}
.pesontedan input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.pesontedan input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

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

Демонстрация
2018-10-09 Просмотров: 8300 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 9
ivandva55
ivandva55 2019-06-07 11:161
0
А как сделать чтобы снизу надпись и выежали верхние блоки?
Сопрано
Сопрано 2019-06-07 17:172
0
Не знаю, как, но здесь работает по стандарту, также можно все закрыть, что на многих такой функций нет, и всегда одна открыта идет.
servisbytteh
servisbytteh 2020-10-29 20:523
0
Сейчас попробую применить данный код на своем сайте. Я так понимаю, что такие блоки повышают ПФ. Верно?
Kosten
Kosten 2020-10-29 20:554
+1
Такие вкладки основном ставят под материал, так, чтоб место много не занимать. Все зависит от заголовков, это может быть видео обзор или написанный мануал, а также подробное описание по тематике. Все для удобства пользователю, чтоб он не искал ту или иную информацию,а все можно было разместить на одной страницы.
servisbytteh
servisbytteh 2020-10-29 21:015
0
Я понял. У меня слишком длинная страница получается, слишком много текста. Я хочу основной блок текста оставить а остальное, частично скрыть в таких блоках. Я посмотрел у конкурентов, они в топ 1, применяю такиеблоки.
servisbytteh
servisbytteh 2020-10-29 21:086
0
А вот у меня вопрос. Есть возможность тег label заменить заголовком h? Или его сделат вложенным?
Kosten
Kosten 2020-10-29 21:397
0
Не приходилось сталкивался, думаю возможно, но нужно стили переписывать.
servisbytteh
servisbytteh 2020-10-29 21:598
0
Я тогда как применю код, попробую заменить label на h. И ещё хотел уточнить. В первом стиле gaonytosal, указана ширина 37%. Эта ширина задаёт размер блока? Я просто хочу его сделать во весь экран. Указывать 100%?
Сопрано
Сопрано 2020-10-29 22:189
+1
Можете на всю страницу, но лучше поставить 98%? для того, чтоб какие то по сторонам отступы были, но вам при установки виднее.
avatar