\n
![\"\"](\"https:\/\/lh3.ggpht.com\/_N9kpbq3FL74\/Sd31pMC1aHI\/AAAAAAAABg8\/UAWFBvpGO6Y\/down.png\")
Download Script<\/a>\u00a0\u00a0\u00a0\u00a0\u00a0![\"\"](\"https:\/\/lh6.ggpht.com\/_N9kpbq3FL74\/Sd31o5XF8hI\/AAAAAAAABg0\/104nWJR7wro\/live.png\")
Live Demo<\/a><\/p>\nHTML Code<\/b> \u00a0<\/span><\/p>\n <div id=”notificationContainer<\/b>“> <\/li><\/p><\/div>\n \u00a0<\/span><\/p>\n \/\/Document Click hiding the popup \/\/Popup on click }); Are you looking for Facebook UI features, this post will explain you how to create a Facebook style notifications popup using Jquery, HTML and CSS, you will understand how CSS elements will helps to improve better web design. This is the most needed feature for social networking web projects to minimize and enrich the UX […]<\/p>\n","protected":false},"author":1,"featured_media":4762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[6],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4760"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4760"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4762"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nCreate an unordered HTML list for menu design.
\n<\/span><\/p>\n
\n<li><a href=”#”>Link1<\/a><\/li>
\n<li><a href=”#”>Link2<\/a><\/li>
\n<li><a href=”#”>Link3<\/a><\/li>
\n<li id=”notification_li”>
\n<a href=”#” id=”notificationLink”>Notifications<\/a>
\n\/\/ Notification Popup Code…
\n<\/li>
\n<li><a href=”#”>Link4<\/a><\/li>
\n<\/ul><\/div>\n![\"](\"https:\/\/lh6.googleusercontent.com\/-IDNlemXf8x0\/VBENIwm96BI\/AAAAAAAALxI\/51Xaz_NI-y0\/s331\/links.png\")
<\/div>\n
\nCSS Code<\/b>
\nAdd\u00a0float:left<\/i>\u00a0for horizontal view.
\n<\/span><\/p>\n
\n#nav\u00a0li\u00a0{
\nfloat:\u00a0left;
\nmargin-right: 20px;
\nfont-size: 14px;
\nfont-weight:bold;
\n}
\n#nav\u00a0li\u00a0a{color:#333333;text-decoration:none}
\n#nav\u00a0li\u00a0a:hover{color:#006699;text-decoration:none}<\/div>\n
\nHTML Code<\/b>
\nNotifications popup is divided into three parts are Notification Title, Notification Body and Notification Footer
\n<\/span><\/p>\n
\n<span id=”notification_count<\/b>“>3<\/b><\/span>
\n<a href=”#” id=”notificationLink”>Notifications<\/a><\/p>\n
\n<div id=”notificationTitle<\/b>“>Notifications<\/div>
\n<div id=”notificationsBody<\/b>” class=”notifications”><\/div>
\n<div id=”notificationFooter<\/b>“><a href=”#”>See All<\/a><\/div>
\n<\/div><\/p>\n![\"Facebook](\"https:\/\/lh6.googleusercontent.com\/-U805AOiKgmk\/VBEtj4wVMiI\/AAAAAAAALxo\/CMxx_yXxI_I\/s512\/popup.png\")
<\/div>\n
\nCSS Code<\/b>
\nTake a look at the following highlighted CSS properties.
\n<\/span><\/p>\n
\n{
\nposition:relative
\n}
\n#notificationContainer\u00a0<\/b>
\n{
\nbackground-color: #fff;
\nborder: 1px solid rgba(100, 100, 100, .4);
\n-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
\noverflow: visible;
\nposition:\u00a0absolute;
\ntop: 30px;
\nmargin-left: -170px;
\nwidth: 400px;
\nz-index:\u00a0-1;
\ndisplay:\u00a0none;\u00a0\/\/ Enable this after jquery implementation
\n}
\n\/\/ Popup Arrow
\n#notificationContainer<\/b>:before\u00a0{
\ncontent: ”;
\ndisplay: block;
\nposition:\u00a0absolute;
\nwidth: 0;
\nheight: 0;
\ncolor: transparent;
\nborder: 10px solid black;
\nborder-color:\u00a0transparent transparent\u00a0white;
\nmargin-top: -20px;
\nmargin-left: 188px;
\n}
\n#notificationTitle<\/b>
\n{
\nfont-weight: bold;
\npadding: 8px;
\nfont-size: 13px;
\nbackground-color: #ffffff;
\nposition:\u00a0fixed;
\nz-index:\u00a01000;
\nwidth: 384px;
\nborder-bottom: 1px solid #dddddd;
\n}
\n#notificationsBody<\/b>
\n{
\npadding: 33px 0px 0px 0px !important;
\nmin-height:300px;
\n}
\n#notificationFooter<\/b>
\n{
\nbackground-color: #e9eaed;
\ntext-align: center;
\nfont-weight: bold;
\npadding: 8px;
\nfont-size: 12px;
\nborder-top: 1px solid #dddddd;
\n}<\/div>\n
\nNotification Count Bubble<\/b>
\nCircle bubble for Notification count.
\n<\/span><\/p>\n
\n{
\npadding: 3px 7px 3px 7px;
\nbackground: #cc0000;
\ncolor: #ffffff;
\nfont-weight: bold;
\nmargin-left: 77px;
\nborder-radius: 9px;
\n-moz-border-radius: 9px;
\n-webkit-border-radius: 9px;
\nposition:\u00a0absolute;
\nmargin-top: -11px;
\nfont-size: 11px;
\n}<\/div>\n
\nJquery<\/b>
\nContains javascipt code. $(“#notificationLink”).click(function(){}- notificationContainer is the ID name of the popup div. Using jquery fadeToggel() showing popup based on click actions.
\n<\/span><\/p>\n
\n<script type=”text\/javascript” >
\n$(document).ready(function<\/b>()
\n{
\n$(“#notificationLink”).click(function<\/b>()
\n{
\n$(“#notificationContainer<\/b>“).fadeToggle(300);
\n$(“#notification_count”).fadeOut(“slow”);
\nreturn\u00a0false;
\n});<\/p>\n
\n$(document).click(function<\/b>()
\n{
\n$(“#notificationContainer”<\/b>).hide();
\n});<\/p>\n
\n$(“#notificationContainer”<\/b>).click(function<\/b>()
\n{
\nreturn\u00a0false;
\n});<\/p>\n
\n<\/script><\/b><\/div>\n","protected":false},"excerpt":{"rendered":"