Выдвижная панель на CSS3 и JavaScript

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

ДЕМО

ИСХОДНИКИ

Бывают случаи, когда вам нужно отобразить побочный контент (уведомление, информацию профиля пользователя ...), и этот контент не помещается во всплывающую подсказку. Вы можете создать новую страницу и создать ссылку на нее, но, по возможности, рекомендуется избегать обновления страницы. В этих случаях панель, которая вставляется сбоку, может быть хорошим UX-решением. Это быстро, его можно легко анимировать с помощью переходов CSS3, и это то, что пользователи привыкли видеть (подумайте, сколько раз этот эффект используется в нативных мобильных приложениях).

Многие веб-сайты используют это решение, обратите внимание на feedly.com и веб-плеер open.spotify.com, чтобы упомянуть пару.

Теперь посмотрим на код!

Создание структуры

Структура HTML очень проста. Мы создали <header>, который должен фиксироваться при прокрутке содержимого, отдельный <div> для содержимого панели и обернули все внутри div .cd-panel. Элемент <main> будет содержать наше основное содержимое.

<main class="cd-main-content">
   <!-- your main content here -->
</main>

<div class="cd-panel cd-panel--from-right js-cd-panel-main">
   <header class="cd-panel__header">
      <h1>Title Goes Here</h1>
      <a href="#0" class="cd-panel__close js-cd-close">Close</a>
   </header>

   <div class="cd-panel__container">
      <div class="cd-panel__content">
         <!-- your side panel content here -->
      </div> <!-- cd-panel__content -->
   </div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->

Добавление стиля

Несколько советов по CSS. Мы применили преобразование CSS3 - именно мы использовали свойство translateX - к .cd-panel__container, чтобы сделать его скользящим. Использование преобразования вместо анимации значений положения влево / вправо лучше с точки зрения производительности.

Заголовок анимируется отдельно от содержимого панели (для <header> вместо этого мы анимируем значение translateY).

.cd-panel {
  /*...*/
  visibility: hidden;
  transition: visibility 0s 0.6s;
}

.cd-panel.cd-panel--is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}

.cd-panel__header {
  /*...*/
  position: fixed;
  top: 0;
  width: 90%;
  height: 50px;
  transition: transform 0.3s 0s;
  transform: translateY(-50px);
}

.cd-panel--from-right .cd-panel__header {
  right: 0;
}

.cd-panel--from-left .cd-panel__header {
  left: 0;
}

.cd-panel--is-visible .cd-panel__header {
  transition: transform 0.3s 0.3s;
  transform: translateY(0px);
}

.cd-panel__container {
  /*...*/
  position: fixed;
  width: 90%;
  height: 100%;
  top: 0;
  transition: transform 0.3s 0.3s;
}

.cd-panel--from-right .cd-panel__container {
  right: 0;
  transform: translate3d(100%, 0, 0);
}

.cd-panel--from-left .cd-panel__container {
  left: 0;
  transform: translate3d(-100%, 0, 0);
}

.cd-panel--is-visible .cd-panel__container {
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

Еще один момент, который может заинтересовать некоторых из вас, - это свойство transition-delay. Когда вы анимируете элементы на веб-странице, если вы создаете некоторые задержки или используете другую длительность перехода / анимации, все становится интереснее. Вот тогда и пригодится задержка перехода. В этом ресурсе, например, заголовок вставляется после содержимого панели и появляется перед ним. Если вы хотите изучить некоторые концепции анимации и переходов, взгляните на документацию Google Material.

Обработка событий

В JavaScript мы добавили / удалили класс .cd-panel - is-visible, чтобы показать / скрыть боковую панель.

Ссылка на твиттер автора - twitter.com/guerriero_se.

---

Себастьяно Герриеро