Всплывающие уведомления в стиле Facebook с помощью CSS и Jquery
Вы хотите добавить на свой сайт элементы интерфейса Facebook? В этой статье мы расскажем, как создать всплывающие уведомления в стиле Facebook с помощью Jquery, HTML и CSS, и вы поймете, как элементы CSS помогут вам улучшить дизайн вашего сайта.
Это чрезвычайно важная функция для социально ориентированных веб-проектов, которая помогает оптимизировать элементы пользовательского интерфейса. Для реализации этих концепций в своем следующем проекте вам необходимо всего лишь добавить несколько строк кода. Как выглядит конечный результат, вы можете увидеть в демо-версии.
Скачать скрипт Демо-версия
HTML-код
Создайте маркированный HTML-список для дизайна меню:
<ul id="nav">
<li><a href="#">Ссылка1</a></li>
<li><a href="#"> Ссылка2</a></li>
<li><a href="#"> Ссылка3</a></li>
<li id="notification_li">
<a href="#" id="notificationLink">Уведомления</a>
// Код всплывающего уведомления...
</li>
<li><a href="#"> Ссылка4</a></li>
</ul>CSS-код
Добавьте float:left для горизонтального размещения:
#nav{list-style:none;margin: 0px;padding: 0px;}
#nav li {
float: left;
margin-right: 20px;
font-size: 14px;
font-weight:bold;
}
#nav li a{color:#333333;text-decoration:none}
#nav li a:hover{color:#006699;text-decoration:none}HTML-код
Всплывающее окно уведомления разделено на три части: заголовок уведомления, тело уведомления и нижняя часть уведомления:
<li id="notification_li">
<span id="notification_count">3</span>
<a href="#" id="notificationLink">Уведомления</a>
<div id="notificationContainer">
<div id="notificationTitle"> Уведомления </div>
<div id="notificationsBody" class="notifications"></div>
<div id="notificationFooter"><a href="#">Все</a></div>
</div>
</li>CSS-код
Взгляните на следующие свойства CSS:
#notification_li
{
position:relative
}
#notificationContainer
{
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: -1;
display: none; // Подключите это свойство после реализации jquery
}
// Стрелочка всплывающего окна
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle
{
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
position: fixed;
z-index: 1000;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody
{
padding: 33px 0px 0px 0px !important;
min-height:300px;
}
#notificationFooter
{
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}Bubble отсчета уведомлений
Круговой bubble для отсчета уведомлений:
#notification_count
{
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}Jquery
Содержит код JavaScript. $("#notificationLink").click(function(){}- notificationContainer - это идентификатор имени элемента div всплывающего окна. Используя jquery fadeToggel() мы выводим всплывающее окно в зависимости от действия клика:
<script type="text/javascript" src="js/jquery.min.1.9.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#notificationLink").click(function()
{
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
return false;
});
//Клик в области вокруг всплывающего окна скрывает его
$(document).click(function()
{
$("#notificationContainer").hide();
});
//Вывод всплывающего окна при клике мышью
$("#notificationContainer").click(function()
{
return false;
});
});
</script>