ZorNet.Ru — сайт для вебмастера » HTML и CSS » Функциональный аккордеон на чистом CSS

Функциональный аккордеон на чистом CSS

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

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

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

Сначала рассмотрим, как реально будет смотреться, все проверено на работоспособность:

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

HTML

Код

<div class="afunc-tionality">
  <div class="puedas-trabajarlo">
  <input type="radio" name="afunc-tionality" id="item1">
  <label for="item1" class="dejamos-eldigo">ZORNET.RU 1</label>
  <p class="ventajas-desventajas">Первое описание что по умолчанию</p>
  </div>
  <div class="puedas-trabajarlo">
  <input type="radio" name="afunc-tionality" id="item2">
  <label for="item2" class="dejamos-eldigo">ZORNET.RU 2</label>
  <p class="ventajas-desventajas">Очень хорошая статья</p>
  </div>
  <div class="puedas-trabajarlo">
  <input type="radio" name="afunc-tionality" id="item3">
  <label for="item3" class="dejamos-eldigo">ZORNET.RU 3</label>
  <p class="ventajas-desventajas">Также можете мануал написать</p>
  </div>
  <div class="puedas-trabajarlo">
  <input type="radio" name="afunc-tionality" id="item4">
  <label for="item4" class="dejamos-eldigo">ZORNET.RU 4</label>
  <p class="ventajas-desventajas">Здесь описание</p>
  </div>
  </div>

CSS

Код

* {
  box-sizing: border-box;
}

.afunc-tionality input {
  display: none;
}

.dejamos-eldigo {
  display: block;
  padding: 17px;
  background: #2f578a;
  color: #fbf6f6;
  font-size: 20px;
  cursor: pointer;
  border-bottom: 1px solid #c5c1c1;
}
.dejamos-eldigo:hover {
  background: rgba(17, 78, 123);
}

.ventajas-desventajas {
  height: 0;
  overflow: hidden;
  margin: 0;
  transition: all 0.5s;
}

.afunc-tionality input:checked ~ .ventajas-desventajas{
  height: auto;
  margin: 15px 0;
}

В этом пособии показано, как создать меню аккордеона с помощью CSS3. Все, что им нужно, это некоторые html и, конечно, css3, без изображений, без javascript. Дизайн невероятный, цвета соответствуют фону и выбранным шрифтам. Значки эффектов наведения, этот учебник, это отличный пример того, как сделать меню аккордов.

Демонстрация

16 Июля 2018 Просмотров: 1140 Комментариев: (0)

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

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

Kosten

Комментарии: 0