As a Facebook user do you want to create Facebook UI features. In this post, I will provide you an idea and source code for making or how to create a Facebook style notification popup using CSS, Jquery and HTML codes.
In this post appear you will understand how CSS codes help you to improve your better web design skill. This is the most essential part of social media project like Facebook to minimize or do better UX elements.
Yoy just following this post and can create your next project easier for Facebook style notification popup. You need to use some lines of codes is CSS, HTML, and Jquery. So, let’s see and try to make your next project.
Read More:
1. How To Submit Jquery Duplicate Fields Form with PHP
2. How To Make Live Character Count Meter with Jquery
3. Create Youtube like Rating with Jquery and Ajax
Codes For Facebook Style Notification
HTML Code:
Create an HTML list for your projects menu design.
<ul id=”nav”>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a></li>
<li><a href=”#”>Link3</a></li>
<li id=”notification_li”>
<a href=”#” id=”notificationLink”>Notifications</a>
// Notification Popup Code…
</li>
<li><a href=”#”>Link4</a></li>
</ul>
CSS Code:
Add float:left in project codes for the horizontal view.
#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 Code
Notifications popup is divided into three parts. First is Title, second is Body and third is Footer.
<li id=”notification_li”>
<span id=”notification_count”>3</span>
<a href=”#” id=”notificationLink”>Notifications</a>
<div id=”notificationContainer”>
<div id=”notificationTitle”>Notifications</div>
<div id=”notificationsBody” class=”notifications”></div>
<div id=”notificationFooter”><a href=”#”>See All</a></div>
</div>
</li>
CSS Code
Take a look at the following CSS codes.
#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; // Enable this after jquery implementation
}
// Popup Arrow
#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;
}
Notification Count Bubble
Bubble For Notification Count.
#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
<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 hiding the popup
$(document).click(function()
{
$(“#notificationContainer”).hide();
});
//Popup on click
$(“#notificationContainer”).click(function()
{
return false;
});
});
</script>
These are the codes for making Facebook style notification popup using CSS and Jquery Codes. Hopefully, you can able to create this project nicely with using these codes. If face any problem then let me know via the comment section.