<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Меню аккордеон на JS

Меню аккордеон на JS

Сегодня мы создадим на чистом JS коде – меню аккордеон с тремя секциями, при клике на которые, будет открываться панель с текстом, а при втором клике обратно закрываться.

Меню аккордеон обычно используют для блока часто задаваемых вопросов.

Демонстрация меню аккордеон.

HTML структура

Создадим 3 кнопки с классом accordion, ниже которых поместим дивы с классом panel. Внутри блоков, будут параграфы с текстом.

<button class="accordion">Вопрос 1</button>
<div class="panel">
  <p>Ответ на Вопрос 1...</p>
</div>
<button class="accordion">Вопрос 2</button>
<div class="panel">
  <p>Ответ на Вопрос 2...</p>
</div>
<button class="accordion">Вопрос 3</button>
<div class="panel">
  <p>Ответ на Вопрос 3 ...</p>
</div>

Картинка пока невзрачная, добавим стилей и спрячем секции с текстом.

Меню аккордеон на JS.

CSS код

Стилизация кнопок, которые используются для открытия и закрытия панели аккордеона.

.accordion {
  background-color: #cfd8dc;
  color: #fff;
   … }

При наведении курсора на кнопку и при клике по ней, будет меняться цвет фона. Для смены цвета при клике, мы повесим на функцию в JS класс active.

.active, .accordion:hover {
  background-color: #607d8b;
}

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

.panel {
  ..
  max-height: 0;
  overflow: hidden;
  .. }

JS код

Объявим две переменные, первая переменная будет получать элемент по названию класса accordion. Вторая переменная с названием i.

var acc = document.getElementsByClassName("accordion");
var i;

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

for (i = 0; i < acc.length; i++) {

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

acc[i].addEventListener("click", function() {

Метод toggle добавляет и удаляет класс active для замены цвета кнопки, управляющей панелью.

this.classList.toggle("active");

Назначаем переменной с названием panel – свойство nextElementSibling, это переключатель между скрытием и показом активной панели.

var panel = this.nextElementSibling;

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

if (panel.style.maxHeight){
    panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
  });
}

Добавление иконок

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

Это подходящий случай для применения псевдокласса after. Код для content, можно найти в таблице символов Юникода.

.accordion:after {
  content: '\002B'; /* Код Юникода для символа "плюс" (+) */
  color: #fff;
  font-size: 18px;
  float: right;
  margin-left: 4px;
}


.active:after {
  content: "\2212"; /* Код Юникода для символа "минус" (-) */
}

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

На CodePen вы можете увидеть весь код меню аккордеон на чистом JS, который можно скачать и использовать в своих проектах.

See the Pen Menu accordion pure JS by porsake (@porsake) on CodePen.

Хотите научиться создавать на чистом JS больше интерактивных компонентов? Вам поможет замечательный видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

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

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.