How To Make Facebook Like Notification Popup

Have you been trying to make a notification bar exactly like facebook? Today I want to show you how to make facebook like notification popup tutorial. We will use jquery, HTML and CSS to build this project.

This facebook UI feature is very important now-a-days for a social networking websites projects to enhance the user experience. Just a few lines of code, take a quick look at this live demo.

STEP 1:

Create an unordered HTML list for menu design.

[code] <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>[/code]

STEP 2:

Add float:left for horizontal view.

[code]#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}[/code]

STEP 3:

In HTML FILE : Notifications popup is divided into three parts are Notification Title, Notification Body and Notification Footer

[code] <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>[/code]

STEP 4:

In Css Code, Take a look at the following highlighted CSS properties.

[code]#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;
}[/code]

STEP 5:

Notification Count Bubble. We will used Circle bubble for Notification count.

[code]#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;
}[/code]

STEP 6:

Last Jquery, Contains javascipt code. $(“#notificationLink”).click(function(){}– notificationContainer is the ID name of the popup div. Using jquery fadeToggel() showing popup based on click actions.

[code] <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>[/code]

Finally our ‘how to create facebook like notification popup’ tutorial is complete. Run your code and enjoy. Thanks for reading this tutorial.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Web Designing Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.