ZorNet.Ru — сайт для вебмастера » HTML и CSS » Боковая выдвижная панель справа на CSS

Боковая выдвижная панель справа на CSS

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

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

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

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

HTML

Код

<input type="checkbox" id="asruk-tkilasun" aria-hidden="true">
<nav class="mudsarulopas">
  <label for="asruk-tkilasun" class="asruk-tkilasun" onclick></label>
  <section>
  <p>Здесь отлично смотрится заголовок</p>
  <p>Это уже делаем под описание, смотря какой характер работы задействован.</p>
  </section>
</nav>

CSS

Код

.mudsarulopas {
  width: 349px;
  position: fixed;
  padding: 0;
  top: 49.7%;
  margin-top: -99.7px;
  right: 0;
  background: #2b99bb;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 0.34s;
  -moz-transition: 0.34s;
  transition: 0.34s;
  z-index: 9998;
}
.mudsarulopas:hover {background: #3c8eaf;}
.mudsarulopas > section {
  padding: 15px;
  color: #f5f5f5
}
.asruk-tkilasun {
  position: absolute;
  right: 99.8%;
  top: 41%;
  margin-top: -24px;
  left: -24px;
  padding: 1em 0;
  background: inherit;
  border-bottom-left-radius: 7px;
  border-top-left-radius: 7px;
  color: #f7f3f1;
  font-size: 1.4em;
  line-height: 1;
  text-align: center;
}
.asruk-tkilasun:after {
  content: '\f003';
  font: normal 18px/1 'FontAwesome';
  text-decoration: inherit;
}
.asruk-tkilasun:hover{
  cursor: pointer;
  color:#fff;
}

[id='asruk-tkilasun'] {
  position: absolute;
  right:0;
  display:none;
}

[id='asruk-tkilasun']:checked ~ .mudsarulopas {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
}

[id='asruk-tkilasun']:checked ~ .mudsarulopas > .asruk-tkilasun:after {
  content:'\f2b7';
  font: normal 18px/1 'FontAwesome';
}
body {
  -webkit-animation: bugfix infinite 1s;
  animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
  to { padding: 0; }
}

@media (max-width: 350px) {
  .mudsarulopas {
  width: 100%;
  }
}

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

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

02 Мая 2018 Просмотров: 2532 Комментариев: (0)

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

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

Kosten

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