ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Спойлер на сайт при участие CSS3 + JS

Спойлер на сайт при участие CSS3 + JS

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

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

По умолчанию:

При клике с открытием информации:

Установка:

HTML

Код

<ul class="wrapper">
  <li>
  <div class="info-box-green">
  <h4 class="entypo-tools"> Заголовок блока</h4>
  <div class="info-content">
  <div class="text">
  <p>Здесь будет любой ваш контент. Количество этого контента ограничено только вашей фантазией.</p>
  </div>
  <span class="entypo-plus" id="expand-green">+</span>
  </div>
  </div>
  </li>
</ul>

CSS

Код

.wrapper {
  width: 820px;
  margin: 10px;
  padding: 0;
}

.wrapper > li {
  display: inline;
  margin: 0;
}

.info-box-green, .info-box-red, .info-box-sky {
  margin: 50px auto;
  padding: 0;
  width: 480px;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
}

.info-box-red h4 {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: -10px;
}

.info-box-red > .info-content > .text {
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

.info-box-green h4, .info-box-green > .info-content > .text {
  background-color: #00AB83;
}

.info-box-red h4, .info-box-red > .info-content > .text {
  background-color: #FF434C;
}

.info-box-sky h4, .info-box-sky > .info-content > .text {
  background-color: #00A5C3;
}

.info-box-green h4, .info-box-red h4, .info-box-sky h4 {
  padding: 25px;
  font-size: 1.125em;
  font-weight: 400;
  color: #FFF;
}

.info-box-green > .info-content > .text, .info-box-red > .info-content > .text, .info-box-sky > .info-content > .text {
  padding: 0px;
  font-size: 1em;
  line-height: 1.5em;
  height: 0;
  color: #FFF;
  overflow: hidden;
  -webkit-transition: height 200ms ease;
  -moz-transition: height 200ms ease;
  -o-transition: height 200ms ease;
  transition: height 200ms ease;
}

.info-box-green > .info-content > .text > p, .info-box-red > .info-content > .text > p, .info-box-sky > .info-content > .text > p {
  padding: 20px 20px 60px;
}

.info-box-sky > .info-content > .text {
  background-color: #FFF;
  color: #444;
  border-radius: 0;
}

.info-box-green > .info-content > .text.open-green, .info-box-red > .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {
  display: block;
  height: auto;
}

.info-box-green > .info-content > span.close-green, .info-box-red > .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {
  -webkit-transform:rotate(135deg);
  -moz-transform:rotate(135deg);
  -o-transform:rotate(135deg);
  -ms-transform:rotate(135deg);
}

.info-box-green span, .info-box-red span, .info-box-sky span {
  display: inline-block;
  float: right;
  position: relative;
  bottom: 60px;
  right: 10px;
  margin: 0;
  padding: 10px;
  color: #FFF;
  font-size: 2em;
  cursor: pointer;
  /* Rotate '+' to 'X' */
  -webkit-transition: all 600ms ease-in-out;
  -moz-transition: all 600ms ease-in-out;
  -o-transition: all 600ms ease-in-out;
  -ms-transition: all 600ms ease-in-out;
  transition: all 600ms ease-in-out;
}

.info-box-sky > .info-content > span.close-sky {
  color: #444;
}

.info-box-red span {
  position: relative;
  bottom: 50px;
  right: 10px;
}

Код

// Green Button Js
$('#expand-green').on('click', function() {
  $(this).toggleClass('close-green');
  $('.text').toggleClass('open-green')
  .end();
});

// Red Button JS
$('#expand-red').on('click', function() {
  $(this).toggleClass('close-red');
  $('.text').toggleClass('open-red')
});

// Blue Button JS
$('#expand-sky').on('click', function() {
  $(this).toggleClass('close-sky');
  $('.text').toggleClass('open-sky');
});

Как понимаете он создан больше для оформления, которое стильно подходит на разные по тематике сайты.

Демонстрация
Источник: imapo.ru

23 Апреля 2019 Загрузок: 2 Просмотров: 1104 Комментариев: (0)

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

СКАЧАТЬ

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

Vladimir7512

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