Создание скрытого блока всегда на сайте актуально иметь, только в том случай, если на страницы очень много информации, и вам нужно еще как можно больше разместить, так как вся она считается актуальной темой. И здесь как раз создание скрытого поля будет актуально для пользователей, ведь изначально будем видеть одну кнопку, на которой написано само действие, а точнее открыть.
Также считается эффективным действием, ведь не требуют JavaScript инфраструктуры для управления. Есть один эффект, где выстроен на чистом CSS, где как раз содержится функция, которая отвечает за поднятие страницы вверх и вниз, где изначально содержимое скрыто.
По умолчанию закрытый элемент:
После клика открытый элемент с информацией:
Приступаем к установке:
HTML
Код
<input type="checkbox" name="ganumeduko-pasxogted" id="ganumeduko-pasxogted" />
<label for="ganumeduko-pasxogted"></label>
<div class="gaxaserunikmed">
<h1>ZorNet - портал для вебмастера</h1>
<h2> Интересные решения для вебмастера в создание и продвижение сайтов</h2>
</div>
<div class="message"><h1>Как проверить мобильность вашего сайта</h1>
<h2>описание</h2>
</div>
CSS
Код
h1 {
font-size:40px;
font-weight:bold;
color:#191919;
-webkit-font-smoothing: antialiased;
}
h2 {
font-weight:normal;
font-size:20px;
color:#888;
padding:5px 0;
}
.message {
background:#181818;
color:#FFF;
position: absolute;
top: -250px;
left: 0;
width: 100%;
height: 250px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
}
.message h1 {
color:#FFF;
}
#ganumeduko-pasxogted {
position:absolute;
appearance:none;
cursor:pointer;
left:-100%;
top:-100%;
}
#ganumeduko-pasxogted + label {
position: absolute;
cursor: pointer;
padding: 10px;
background: #155d4d;
width: 100px;
border-radius: 85px;
padding: 8px 10px;
color: #e0d4d4;
line-height: 20px;
font-size: 12px;
text-align: center;
-webkit-font-smoothing: antialiased;
cursor: pointer;
margin: 20px 50px;
transition: all 500ms ease;
}
#ganumeduko-pasxogted + label:after {
content:"Открыть"
}
.gaxaserunikmed {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
padding:5em 3em;
}
#ganumeduko-pasxogted:checked ~ .message {
top: 0;
}
#ganumeduko-pasxogted:checked ~ .gaxaserunikmed {
margin-top: 250px;
}
#ganumeduko-pasxogted:checked + label {
background:#dd6149;
}
#ganumeduko-pasxogted:checked + label:after {
content:"Открыть"
}
В этом случае мы немного растеряны, потому что элемент не имеет фиксированной высоты, но здесь смотря что будет скрыто, где самостоятельно можно поставить раскрытие окна.
Демонстрация
