• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Простые вкладки (табы) для сайта на JS и CSS (Адаптивные вкладки на JavaScript и с помощью CSS)
Простые вкладки (табы) для сайта на JS и CSS
Kosten
Дата: Четверг, 2018-10-04, 00:22 | Сообщение 1
Администраторы
Сообщений:18863
Награды: 55


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

При просмотре на работоспособность всех функций проверены на demo странице:



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

HTML

Код
[code]<div class="knowing-nderlyin">ZorNet.Ru - портал для вебмастера</div>
<div class="createblocus">
  <p class='morecontrol'>Описание №1</p>
</div>
<div class="knowing-nderlyin">ZorNet.Ru - портал для вебмастера 2</div>
<div class="createblocus">
  <p class='morecontrol'>Описание №2</p>
</div>
[/code]

CSS

Код
.knowing-nderlyin {
    background-color: #383636;
    padding: 18px;
    border-bottom: 1px solid #656363;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    color: #f7f6f6;
}
.createblocus {
  overflow: hidden;
  max-height: 0;
  transition: max-height 1s linear;
}
.morecontrol {
    background-color: #462390;
    color: #ffffff;
}
.continuousel {
  max-height: 100%;
}


JS

Код
document.addEventListener('click', (e) => {
if (e.target.classList.contains('knowing-nderlyin')) { e.target.nextElementSibling.classList.toggle('continuousel');
}
})


Также вы можете создавать вкладки сколько вам угодно, а не то количество, что идут по умолчанию.

На демонстраций идет светлый оттенок, здесь в материале, тот что на изображение.

Демонстрация
Прикрепления: 3180498.jpg(44.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Простые вкладки (табы) для сайта на JS и CSS (Адаптивные вкладки на JavaScript и с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: