| Kosten | Понедельник, 09 Марта 2020 | Сообщение 1 |
| Одним из несложных способом добавить панель навигации или блок для информации на сайт является создание выдвижной панели, которая появляется по клику. Интересное решение для выдвигающей панели, что ранее на сайте размещал такой формат, но здесь по эффекту немного изменено, и сразу совершенно по другому смотрится.
Это при открытие страницы или сайта мы видим одну кнопку, то стоит только сделать клик, как кнопка резко вниз пропадает и появляется панель с информацией. А также может содержать различные функций, как информер или навигация по сайту, вообщем то, что так нужно для пользователя в плане навигаций или информаций.
По умолчанию видим кнопку:
В действии:
Установка:
В HEAD
Код <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,cyrillic' rel='stylesheet'>
HTML
Код <input class="open" id="top-box" type="checkbox" hidden> <label class="btn" for="top-box"></label> <div class="top-panel"> <div class="message"> <h1> Согласно последним исследованиям </h1> <h2> Например, большинство поисков в Google начинаются с неопределенного или не фирменного термина. </h2> </div> </div> <div class="container"> <h1> Здесь первое описание! </h1> <h2> Также в описание выставляем ключевое слово под ссылка для перехода. </h2>
CSS
Код h1 {
font-weight: 300;
font-size: 175%;
color: #191919;
-webkit-font-smoothing: antialiased
}
h2 {
font-weight: 300;
font-size: 130%;
color: #888;
padding: 5px 0
}
.fa {
color: #fd6969
}
@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%
}
}
.top-panel {
background: #39464e;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 0;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
/* Блок сообщения */
.message {
color: #fff;
font-weight: 300;
position: relative;
padding: 3em 2em;
margin: 0 auto;
max-width: 980px
}
/* Заголовок 1 уровня */
.message h1 {
color: #fff
}
/* Заголовок 2 уровня */
.message h2 {
color: #888
}
.message p {
margin: 1em 0
}
.message a {
text-decoration: none;
color: #748b74
}
.message a:hover {
color: #95984b
}
/* Переключатель панели */
label.btn {
display: block;
position: absolute;
right: 50px;
top: 0;
cursor: pointer;
background: #2bbbad;
width: 50px;
border-radius: 0 0 5px 5px;
padding: 8px 5px;
color: #FFF;
line-height: 20px;
font-size: 12px;
text-align: center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
transition: all 400ms cubic-bezier(0.17,0.04,0.03,0.94);
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 {
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
}
/* Активация панели */
.open:checked ~ .top-panel {
top: 0
}
.open:checked ~ label.btn {
top: 250px
}
/* Смещение контейнера контента страницы */
.open:checked ~ .container {
margin-top: 300px
}
/* Цвет переключателя при клике */
.open:checked + label.btn {
background: #dd6149
}
/* Стрелка переключателя вверх*/
.open:checked + label.btn:after {
content: '\f077';
font: normal 18px/1 FontAwesome
}
/* Контейнер контента */
.container {
max-width: 980px;
margin: 0 auto;
text-align: center;
transition: margin 400ms cubic-bezier(0.17,0.04,0.03,0.94);
padding: 5em 3em
}
В HEAD на страницу подключаем шрифт и шрифтовые кнопки для оформление, как стрелка в основание кнопки.
Демонстрация
| | Страна: (RU) |
| |
