Выезжающая панель при клике на кнопку

 

Доброго времени суток, уважаемые читатели и гости блога. Хочу показать вам, как  на странице блога сделать оригинальную выезжающую панель в которой можно разместить любую информацию-текстовую, изображение, код, форму связи. Всё что угодно. Стили панели настраиваются под любой дизайн. и самое главное она без подключения всяких скриптов и библиотек. На чистом CSS. При клике на кнопку Открыть панель появляется с правой стороны. Аналогично кнопкой Закрыть панель возвращается на исходную позицию К тому же красивая   тень закрытой панели,заданная  свойством  box-shadow придаст оригинальность.

Это только фото 

Для просмотра скопируйте код и расположите его в этом редакторе 

<input type="checkbox" id="side-checkbox" />

<div class="side-panel">

    <label class="side-button-2" for="side-checkbox">+</label>    

    <div class="side-title">Выдвижная панель:</div>

    <p>Информация в панеле -здесь можно разместить всё, что угодно - текст, изображение, форму связи, код

</p><img src="https://i.pinimg.com/originals/19/6e/c7/196ec72878f83afeac3ffb84306d9ac4.png" width="250" height="200" alt="ёж">

</div>

<div class="side-button-1-wr">

    <label class="side-button-1" for="side-checkbox">

        <div class="side-b side-open">Открыть</div>

        <div class="side-b side-close">Закрыть</div>

    </label>

</div>

<style>

/* стили панели */

#side-checkbox {

    display: none;

}

.side-panel {

    position: fixed;

    z-index: 999999;

    top: 0;

    left: -360px;

    background: #306754; /*общий фон панели */

    transition: all 0.5s;   

    width: 320px;

    height: 100vh;

    box-shadow: 10px 0 20px rgba(0,0,0,0.4);

    color: #FFF;

    padding: 40px 20px;

}

.side-title {

    font-size: 20px;

    padding-bottom: 10px;

    margin-bottom: 20px;

    border-bottom: 2px solid #BFE2FF;

}

/* Оформление кнопки  */

.side-button-1-wr {

    text-align: center; /* Контейнер для кнопки,  */

}

.side-button-1 {

    display: inline-block;

}

.side-button-1 .side-b {

    margin: 10px;

    text-decoration: none;

    position: relative;

    font-size: 20px;

    line-height: 20px;

    padding: 12px 30px;

    color: #FFF;

    font-weight: bold;

    text-transform: uppercase; 

    font-family: 'Roboto Condensed', Тahoma, sans-serif;

    background: #1d4569; /* цвет кнопки открыть,закрыть */

    cursor: pointer; 

    border: 1px solid #f5faff;

}

.side-button-1 .side-b:hover,

.side-button-1 .side-b:active,

.side-button-1 .side-b:focus {

    color: #FFF;

}

.side-button-1 .side-b:after,

.side-button-1 .side-b:before {

    position: absolute;

    height: 4px;

    left: 50%;

    bottom: -6px;

    content: "";

    transition: all 280ms ease-in-out;

    width: 0;

}

.side-button-1 .side-open:after,

.side-button-1 .side-open:before {

    background: green;

}

.side-button-1 .side-close:after,

.side-button-1 .side-close:before {

    background: green;

}

.side-button-1 .side-b:before {

    top: -6px;

}

.side-button-1 .side-b:hover:after,

.side-button-1 .side-b:hover:before {

    width: 100%;

    left: 0;

}

/* Переключатели кнопки 1 */

.side-button-1 .side-close {

    display: none;

}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {

    display: none;

}

#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {

    display: block;

}

#side-checkbox:checked + .side-panel {

    left: 0;

}

/* Оформление кнопки на панеле */

.side-button-2 {

    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;    

}

.side-button-2:hover {

    transform: rotate(45deg) scale(1.1);    

    color: #FFF;

}

</style>

Все основные настройки я пометила комментариями в самом коде. Нужную информацию размещайте в тегах <p>текст </p>. пример привела с текстом и картинкой, адрес которой выделен цветом. Меняйте на свой.  Сам код выдвижной панели, как всегда устанавливаем в редакторе сообщений, перейдя в режим HTML. 

Спасибо за внимание и до встречи. Всем добра.