Лучший способ проинформировать посетителя вашего сайта об каких-то важных новостях или изменений это добавить блок с уведомлением, который можно будет при надобности спрятать. Сегодня мы рассмотрим один из примеров реализации данного функционала, не прибегая к JavaScript, а лишь воспользовавшись HTML и CSS3.
Добавляя всплывающее сообщение или блоки с уведомлением, стоит помнить, что их переизбыток ведёт к ухудшению юзабилити сайта, а в некоторых случаях - даже замедляет загрузку страниц.
<div class="notification-bar">
<input id="hide" type="radio" name="bar" value="hide" />
<input id="show" type="radio" name="bar" value="show" checked="checked" />
<label for="hide">hide</label>
<label for="show">show</label>
<div class="notification-text">
<!--
Контент
-->
</div>
</div>
Как видите, при добавлении HTML мы воспользовались маленькой хитростью. Так как мы делаем уведомления, используя лишь HTML и CSS, то мы не можем отследить фактически событие клика, но CSS позволяет нам определить состояние radio кнопки - именно используя эту возможность можно легко сэмитировать нужное нам состояние. Привязав наши кнопки к тегам label, мы можем указать нужную нам текстовку. Далее останется дело за стилями, которые мы будем использовать.
Для того чтобы сообщение наше увидели все пользователи, мы его отпозиционируем в самый верх страницы и растянем на всю ширину:
.notification-bar{
position: absolute;
width: 100%;
top: 0;
}
Теперь нам необходимо спрятать radio кнопки:
.notification-bar input{
display: none;
}
Контент, который будет информировать пользователя о новостях и событиях на сайте, мы поместим в блок с классом notification-text и зададим ему стили:
.notification-text{
background-color: #2980B9;
padding: 15px 0;
color: #fff;
font-size: 14px;
text-align: center;
position: absolute;
width: 100%;
-webkit-animation: initiate 350ms ease;
-moz-animation: initiate 350ms ease;
-o-animation: initiate 350ms ease;
animation: initiate 350ms ease;
}
Укажем CSS свойства для кнопок:
.notification-bar label{
cursor: pointer;
color: #fff;
position: absolute;
z-index: 5;
display: inline-block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.notification-bar label[for=hide]{
right: 15px;
top: 11px;
width: 24px;
height: 24px;
background: url(close.png) no-repeat center center;
-webkit-animation: initiate 350ms ease;
-moz-animation: initiate 350ms ease;
-o-animation: initiate 350ms ease;
animation: initiate 350ms ease;
}
.notification-bar label[for=show]{
width: 45px;
height: 50px;
border-radius: 0px 0px 3px 3px;
right: 10px;
background: url(show.png) no-repeat center center #2980B9;
}
У кнопок есть общие правила: как и для каждого из состояний, когда сообщение спрятано, так и в случае, когда показывается. Если замарочиться и добавить немного JavaScript, а именно куку для отслеживания состояния, то при обновлении страницы пользователю не потребуется заново его скрывать. Но здесь мы рассмотрели, что можно сделать воспользовавшиеся лишь HTML и CSS.