Как делается выдвигающаяся панель на jquery и css?

Здравствуйте, уважаемые друзья и гости блога! Сегодня рассказываю вам как делается выдвигающаяся панель для сайта на jquery и css. И Вы сможете также скачать исходники для того, чтобы самостоятельно все сделать.

И так, не буду долго расписывать, а приступлю к практике …

Выдвигающаяся панель на jquery и css – делаем сами!

Вот вам пример: Выдвигающаяся панель

Это демонстрационный материал, где Вы можете видеть как работает выдвигающаяся панель на jquery и css.

А вот сдесь Вы можете скачать исходные файлы этой выдвигающейся панели: Исходники

Теперь Вы можете использовать данные материалы по своему усмотрению и редактировать их под свои нужды.

Давайте посмотрим, что там находится внутри и что с этим делать?

Сегодня очень многие используют выдвигающиеся панели на на jquery и css. Потому, что это красиво и эффектно.

HTML структура выдвигающейся панели довольно проста. Создан элемент <header> и при прокрутке страницы он прикреплён к её верхней части. В элементе <div> помещается контент, а для панели создан свой блок .cd-panel. В элементе <main> помещен весь основной контент.

<main class="cd-main-content">
    <h1>Выдвигающаяся панель - пример</h1>
    <a href="#0" class="cd-btn">Нажми Кнопку</a>
    <!-- your content here -->
  </main>

  <div class="cd-panel from-right">
    <header class="cd-panel-header">
      <h1>Ваш заголовок</h1>
      <a href="#0" class="cd-panel-close">Закрыть</a>
    </header>

    <div class="cd-panel-container">
      <div class="cd-panel-content">

И стили, которые позволяют нам получить все необходимые и красивые эффекты:

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

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

.cd-panel-header {
  /*...*/
  position: fixed;
  top: -50px;
  width: 90%;
  height: 50px;
  transition: top 0.3s 0s;
}

.is-visible .cd-panel-header {
  top: 0;
  transition: top 0.3s 0.3s;
}

.cd-panel-container {
  /*...*/
  position: fixed;
  width: 90%;
  height: 100%;
  top: 0;
  right: 0;

  transition-property: transform;
  transition-duration: 0.3s;
  transition-delay: 0.3s;

  transform: translate3d(100%, 0, 0);
}

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

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

Если вам понравился материал пожалуйста сделайте следующее…