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

Анимированная боковая панель на CSS3

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

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

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

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

Так выглядит панель при открытие, но пока не заполнена контентом.

Делаем выдвижную боковую панель средствами CSS

Переключатели:

Код

<label class="kidsa-genlob-1" for="bokovina-knoponaya">Первая кнопка</label>
<label class="kidsa-genlob-2" for="bokovina-knoponaya">Вторая кнопка</label>

HTML

Код

<input type="checkbox" id="bokovina-knoponaya" />
<div class="pravaya-panelka">
  <label class="kobokova-dasenoka" for="bokovina-knoponaya">+</label>
  <div class="nelkabok-sagolovke">Выдвижная панель:</div>
  <p>ZorNet.Ru — сайт для вебмастера</p>
</div>
<div class="bokovaya-knopka-css-wr">
  <label class="bokovaya-knopka-css" for="bokovina-knoponaya">
  <div class="knopka side-open">Открыть</div>
  <div class="knopka side-close">Закрыть</div>
  </label>
</div>

CSS

Код

#bokovina-knoponaya {
  display: none;
}
.pravaya-panelka {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: -360px;
  background: #2168a5;
  transition: all 0.5s;
  width: 318px;
  height: 100vh;
  box-shadow: 10px 0 20px rgba(10, 10, 10, 0.3);
  color: #f3eeee;
  padding: 35px 18px;
}
.nelkabok-sagolovke {
  font-size: 20px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 2px solid #BFE2FF;
}
/* Оформление кнопки на странице */
.bokovaya-knopka-css-wr {
  text-align: center; /* Контейнер для кнопки, чтобы было удобнее ее разместить */
}
.bokovaya-knopka-css .knopka {
  margin: 10px;
  text-decoration: none;
  position: relative;
  font-size: 15px;
  line-height: 15px;
  padding: 10px 25px;
  color: #f3eeee;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Roboto Condensed', Тahoma, sans-serif;
  background: #2369a5;
  cursor: pointer;
  border: 2px solid #cde5f9;
}
.bokovaya-knopka-css .knopka:hover,
.bokovaya-knopka-css .knopka:active,
.bokovaya-knopka-css .knopka:focus {
  color: #FFF;
}
.bokovaya-knopka-css .knopka:after,
.bokovaya-knopka-css .knopka:before {
  position: absolute;
  height: 4px;
  left: 50%;
  bottom: -6px;
  content: "";
  transition: all 280ms ease-in-out;
  width: 0;
}
.bokovaya-knopka-css .side-open:after,
.bokovaya-knopka-css .side-open:before {
  background: green;
}
.bokovaya-knopka-css .side-close:after,
.bokovaya-knopka-css .side-close:before {
  background: red;
}
.bokovaya-knopka-css .knopka:before {
  top: -6px;
}
.bokovaya-knopka-css .knopka:hover:after,
.bokovaya-knopka-css .knopka:hover:before {
  width: 100%;
  left: 0;
}
/* Переключатели кнопки 1 */
.bokovaya-knopka-css .side-close {
  display: none;
}
#bokovina-knoponaya:checked + .pravaya-panelka + .bokovaya-knopka-css-wr .bokovaya-knopka-css .side-open {
  display: none;
}
#bokovina-knoponaya:checked + .pravaya-panelka + .bokovaya-knopka-css-wr .bokovaya-knopka-css .side-close {
  display: block;
}
#bokovina-knoponaya:checked + .pravaya-panelka {
  left: 0;
}
/* Оформление кнопки на панели */
.kobokova-dasenoka {
  font-size: 30px;
  border-radius: 20px;
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  cursor: pointer;
  transform: rotate(45deg);
  color: #BFE2FF;
  transition: all 280ms ease-in-out;
}
.kobokova-dasenoka:hover {
  transform: rotate(45deg) scale(1.1);
  color: #f0f0f5;
}

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

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

15 Декабря 2019 Загрузок: 1 Просмотров: 1144 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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