Висувний верхня панель на чистому CSS

44

Напевно вам частенько зустрічалися на сторінках сайтів, що висуваються панелі різного виду і розташування, висловлюють зверху, знизу, праворуч або ліворуч на повному автоматі, із заданим інтервалом часу, або ж активуються по кліку. Як правило, в таких панелях розміщують приховану від очей користувача до пори до часу, яку-небудь додаткову інформацію, важливу і не дуже. Наприклад форми підписки, віджети соц.мереж, посилання, теги, контактні дані і т. д і т. п., коротше, все що завгодно.
Існує величезна кількість готових рішень реалізації висувних панелей на javascript, модулі і плагіни для різних CMS, окремі плагіни jQuery, але зовсім трохи, потрапляло мені на очі, повністю робочих способів на чистому CSS.

Давно хотів замутити що-небудь отаке, механізм використання прихованих чекбоксов добре знайомий і зрозумілий, та все якось руки не доходили. І ось, наткнувшись в запорошених коморах CodePen на одну цікаву розробку, вирішив поекспериментувати і видати на гора, цілком робочий, трохи видозмінений і адаптований для нашого брата, свій варіант висувний верхній панелі на чистому CSS, вийшло те, що вийшло)).

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

Дивитися Демо

Приклад подивилися, порівняли з оригіналом, і тепер, кому воно треба, давайте разом розберемо, як все це працює. Ще раз нагадую, ніяких js, тільки невинно-чистий html і «магія» css, зроблять всю роботу.

Розкладка Html

Панель складається з трьох основних елементів: базовий контейнер, блок з утриманням і кнопка відкриття/закриття панелі.

<input class="open" id="top-box" type="checkbox" hidden>
<label class="btn" for="top-box"></label>
<div class="top panel">
<div class="message">
Тут розміщуєте будь зміст.....
</div>
</div>
Тут розміщуєте будь зміст…..

Як бачите в конструкції панелі присутній прапорець type=”checkbox”, за замовчуванням прихований і недоступний. З допомогою тега , який оформлений у вигляді кнопки у css, встановлюємо зв’язок між чекбоксів, тобто, якщо натиснути на label, то спрацює input(стане активним). Ну, а з допомогою псевдокласу :checked в css встановлюємо зв’язок між прихованим чекбоксів і елементами панелі.
Відразу хочу відзначити, що кнопка відкриття/закриття не прив’язана до тіла панелі, а позиціонується щодо основного вмісту контейнера сторінки

і при активації висувній панелі, блок з контентом і кнопка, зсуваються вниз на відстань відповідне висоті панелі.

CSS3

Тепер, давайте сформуємо стилі нашої висувається панелі, для початку, встановимо розміри базового контейнера, визначимо колір фону і його початкове розташування. В CSS створимо клас .top panel, в якому і пропишемо всі необхідні нам властивості.
Панель у нас висувна, а значить нам треба її сховати, робиться це дуже просто. Встановлюємо фіксоване позиціонування position: fixed;, розтягуємо на всю ширину сторінки width: 100%; висоту (height:) панелі не вказуємо, в цьому випадку, панель автоматом буде підлаштовуватися під розмір вмісту, а з допомогою transform: translateY(-100%);, відсуває нашу панель за верхній край сторінки.

.top-panel {
background: #39464e;
 position: fixed;
top: 0;
width: 100%;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}

.top panel {
background: #39464e;
position: fixed;
top: 0;
width: 100%;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}

Блок повідомлення панелі розташований всередині базового контейнера і йому присвоєно визначені клас class=”message”, саме у неї ми вказуємо властивості для всіх елементів розташованих усередині цього боки, колір і сімейство шрифтів, розміри зображень і т. д…
Звичайно, можна спокійно обійтися і без цього додаткового блоку, розташувавши повідомлення безпосередньо в базовому контейнері, але при цьому втрачається гнучкість можливих налаштувань панелі.
Повідомлення виводиться строго по центру і розтягується на задану ширину max-width: 980px;, значення довільне, ви можете вибрати абсолютно інші розміри.

/* Блок повідомлення */
.message {
color: #fff;
 font-weight: 300;
position: relative;
padding: 2em;
margin: 0 auto;
max-width: 980px
}
/* Заголовок 1 рівня */
.message h1 {
color: #fff
}
/* Заголовок 2-го рівня */
.message h2 {
color: #888
}

/* Блок повідомлення */
.message {
color: #fff;
font-weight: 300;
position: relative;
padding: 2em;
margin: 0 auto;
max-width: 980px
}
/* Заголовок 1 рівня */
.message h1 {
color: #fff
}
/* Заголовок 2-го рівня */
.message h2 {
color: #888
}

Далі, визначимо всі необхідні стилі для перемикача нашої панелі. Для початку приховаємо з очей користувачів прапорець type=”checkbox”, не надто мудруючи, в html тегу пропишемо атрибут hidden, який і визначає, відображати об’єкт у вікні браузера або немає.

<input class="open" id="top-box" type="checkbox" hidden>

В CSS зробимо чекбокс прихованим наступним чином:

.open {
position: absolute;
clip: rect(0 0 0 0);
opacity: 0;
}

.open {
position: absolute;
clip: rect(0 0 0 0);
opacity: 0;
}

Тегу присвоїмо class=”btn”, з яким і будемо працювати в css, щоб «намалювати», цілком собі симпатичний перемикач(кнопку):

/* Перемикач панелі */
label.btn {
display: block;
position: absolute;
right: 25px;
top: 100%;
/*bottom: -35px;*/
cursor: pointer;
background: #2bbbad;
 border-radius: 0 0 3px 3px;
padding: 8px 16px;
color: #fff;
 font-size: 100%;
line-height: 1em;
text-align: center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 9999
}
/* Перемикач при наведенні */
label.btn:hover {
-webkit-transition: 0.35s;
-moz-transition: 0.35s;
transition: 0.35s;
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}
/* Стрілка перемикача вниз */
label.btn:after {
content: '\f078';
font: normal 18px/1 FontAwesome;
text-decoration: inherit
}

/* Перемикач панелі */
label.btn {
display: block;
position: absolute;
right: 25px;
top: 100%;
/*bottom: -35px;*/
cursor: pointer;
background: #2bbbad;
border-radius: 0 0 3px 3px;
padding: 8px 16px;
color: #fff;
font-size: 100%;
line-height: 1em;
text-align: center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 9999
}/* Перемикач при наведенні */
label.btn:hover {
-webkit-transition: 0.35 s;
-moz-transition: 0.35 s;
transition: 0.35 s;
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}/* Стрілка перемикача вниз */
label.btn:after {
content: ‘\f078’;
font: normal 18px/1 FontAwesome;
text-decoration: inherit
}

Стрілки перемикача взяті з пакету шрифт-іконок FontAwesome, відповідно файл стилів цього набору, повинен бути попередньо підключений до сторінки:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

Ви можете використовувати і інший вид перемикача, наприклад, відповідний текст або html символ.
За замовчуванням для перемикача визначив три стани, коли панель закрита — стрілка вниз, при відкритій панелі — стрілка вгору, ну, і звичайно ж легкий hover-ефект при наведенні.

Активуємо нашу панель і змінюємо стан перемикача псевдокласу :checked.
За допомогою властивості box-shadow додав легку тінь нижньому краю активної панелі, а з допомогою transition встановив простенький ефект переходу між двома станами панелі(відкритої і закритої).

.open:checked ~ .top-panel {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 0.35s;
-moz-transition: 0.35s;
transition: 0.35s
}
.open:not(:checked) ~ .top-panel {
-webkit-transition: 0.35s;
-moz-transition: 0.35s;
transition: 0.35s
}
/* Колір перемикача при кліці */
.open:checked ~ .top-panel > label.btn {
background: #dd6149
}
/* Стрілка перемикача вгору*/
.open:checked ~ .top-panel > label.btn:after {
content: '\f077';
font: normal 18px/1 FontAwesome
}

.open:checked ~ .top panel {
box-shadow: 2px 0 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
-webkit-transition: 0.35 s;
-moz-transition: 0.35 s;
transition: 0.35 s
}.open:not(:checked) ~ .top panel {
-webkit-transition: 0.35 s;
-moz-transition: 0.35 s;
transition: 0.35 s
}
/* Колір перемикача при кліці */.open:checked ~ .top panel > label.btn {
background: #dd6149
}
/* Стрілка перемикача вгору*/.open:checked ~ .top panel > label.btn:after {
content: ‘\f077’;
font: normal 18px/1 FontAwesome
}

Для зміни розмірів шрифту при перегляді на різних екранах пристроїв, використовував медіа-запити @media. Враховуючи сучасні реалії, думаю зовсім не зайвий додаток:

@media only screen and (max-width: 400px) {
body {
font-size: 90%
}
}
@media only screen and (max-width: 800px) {
body {
font-size: 100%
}
}
@media only screen and (min-width: 1100px) {
body {
font-size: 120%
}
}

@media only screen and (max-width: 400px) {
body {
font-size: 90%
}
}@media only screen and (max-width: 800px) {
body {
font-size: 100%
}
}@media only screen and (min-width: 1100px) {
body {
font-size: 120%
}
}

На цьому мабуть і все! Висувний зверху панель готова до роботи, залишається тільки наповнити її змістом. Ще раз дивіться живий приклад, скачивайте архів з исходниками, сміливо експериментуйте з різними параметрами і творіть, творіть, творіть…

ДемоИсходники

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: