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);
}

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

Демонстрация
09 Октября 2018 Просмотров: 25174 Комментариев: (24)

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

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

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

Комментарии: 24
ivandva55
ivandva55 07 Июня 2019 11:161
0
А как сделать чтобы снизу надпись и выежали верхние блоки?
Сопрано
Сопрано 07 Июня 2019 17:172
0
Не знаю, как, но здесь работает по стандарту, также можно все закрыть, что на многих такой функций нет, и всегда одна открыта идет.
servisbytteh
servisbytteh 29 Октября 2020 20:523
0
Сейчас попробую применить данный код на своем сайте. Я так понимаю, что такие блоки повышают ПФ. Верно?
Kosten
Kosten 29 Октября 2020 20:554
+1
Такие вкладки основном ставят под материал, так, чтоб место много не занимать. Все зависит от заголовков, это может быть видео обзор или написанный мануал, а также подробное описание по тематике. Все для удобства пользователю, чтоб он не искал ту или иную информацию,а все можно было разместить на одной страницы.
servisbytteh
servisbytteh 29 Октября 2020 21:015
0
Я понял. У меня слишком длинная страница получается, слишком много текста. Я хочу основной блок текста оставить а остальное, частично скрыть в таких блоках. Я посмотрел у конкурентов, они в топ 1, применяю такиеблоки.
servisbytteh
servisbytteh 29 Октября 2020 21:086
0
А вот у меня вопрос. Есть возможность тег label заменить заголовком h? Или его сделат вложенным?
Kosten
Kosten 29 Октября 2020 21:397
0
Не приходилось сталкивался, думаю возможно, но нужно стили переписывать.
servisbytteh
servisbytteh 29 Октября 2020 21:598
0
Я тогда как применю код, попробую заменить label на h. И ещё хотел уточнить. В первом стиле gaonytosal, указана ширина 37%. Эта ширина задаёт размер блока? Я просто хочу его сделать во весь экран. Указывать 100%?
Сопрано
Сопрано 29 Октября 2020 22:189
+1
Можете на всю страницу, но лучше поставить 98%? для того, чтоб какие то по сторонам отступы были, но вам при установки виднее.
melifarosaint
melifarosaint 16 Декабря 2020 18:0010
0
Спасибо за простой пример. Для блока FAQ/Программы лишний раз подключать и нагружать лендинг JS-ом не хочется.
Kosten
Kosten 16 Декабря 2020 19:3311
+1
Но вероятно это не блок, который идет с вопросами и ответами для сайта. Но согласен, что по своим функциям может отлично вписаться под такой формат.
servisbytteh
servisbytteh 16 Декабря 2020 19:5712
0
Это просто метод подачи информации. Я не просто так искал такой код. У моих конкурентов есть такой прием на сайте. Мы с ними общаемся и они как-то проговорили с что у них ПФ хороший ща счёт выпадающих блоков. Они избавились от вертикальной прокрутки это раз. А второе посетитель выбирает интересующую его информацию, а не высматривает её.
Kosten
Kosten 16 Декабря 2020 20:1713
+1
Все верно, самую актуальную информацию разместить, которую основном ищет пользователь, что для этого и делается удобство, в плане информационной подачи.
servisbytteh
servisbytteh 30 Декабря 2020 17:5014
0
Ну наконец добрался до установки этого блока на своем сайте. Скопировал стили CSS и HTML код вставил на сайте и все идеально работает. Спасибо.
1 2 »
avatar