Notification Demo

In this example below you will see how to do a Notification Demo with some HTML / CSS and Javascript

simple css3 and jquery implementation of the demo notification popup

Thumbnail
This awesome code was written by -HAN-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -HAN- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Notification Demo</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="header">
  <div class="banner">
    /demo
  </div>
  <div class="notificationBar">
    <a href="#nogo" class="notifyLink">Notification</a>
    <div class="notifyDropdown">
      <ul>
        <li><a href="#nogo">Cane Sugar</a></li>
         <li><a href="#nogo">Fineak la</a></li>
         <li><a href="#nogo">popeye</a></li>
        <li><a href="#nogo">Myriad Proffo</a></li>
      </ul>
    </div>
  </div>
</section>
<div class="popup">
  <a href="#nogo" class="closePopup">X</a>
  <h1>Hi, this is the popup</h1>
</div>
<div class="shadow"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-HAN-/notification-demo-raWjNx */
*{
  outline:none;
  margin:0;
  padding:0;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
    background-color: #f2dfa9;
    font-family: arial;
    margin: 0;
  position:relative;
}
.shadow{
  position:fixed;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);
  left:0;
  right:0;
  transition:all 0.3s;
  opacity:0;
  z-index:100;
    visibility:hidden;
}
.shadow.in{
  opacity:1;
  visibility:visible;
}
.header{
  background-color:#35334C;
  height:60px;
  position:relative;
  z-index:100;
}
.banner{
  float:left;
  line-height:60px;
  padding-left:10px;
  color:#DFC484;
}

ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.notificationBar {
    float: right;
    padding-right: 10px;
  position:relative;
}
.notifyLink {
    display: block;
    line-height: 60px;
    text-decoration: none;
  color: #dadada;
  transition:all 0.3s;
  padding:0 10px;
}

.notifyDropdown {
    backface-visibility: hidden;
    background-color: #eb7159;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);

    position: absolute;
    right: 10px;
    top: 60px;
    transform: translate3d(0px, -50px, 0px);
  opacity:0;
  visibility:hidden;
    width: 150px;
    z-index: 10;
  perspective:1000px;
  transition:all 0.3s cubic-bezier(.17,.64,.92,1.01) ;
}




.notifyDropdown ul{
  padding:5px 0;
}
.notifyDropdown.sh {
  
  transform: translate3d(0px, 0px, 0px);
  opacity:1;
  visibility:visible;
}


.notifyDropdown a {
    color: #fff;
    display: block;
    padding: 5px 0 5px 8px;
    text-decoration: none;
  transition:background-color 0.2s;

  
}




.notifyDropdown a:hover {
  background-color:#f67c64;
}

.notifyLink:hover {
    background-color: #4a4861;
}
.popup {
    background-color: orange;
    height: 300px;
    left: 115%;
    position: fixed;
    top: -52px;
    transform: translate3d(-50%, -50%, 0px) scale(0.3);
    transition: all 0.6s ease 0s;
    width: 500px;
    z-index: 101;
   box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
.popup.sh{
  left:50%;
  top:50%;
  transform: translate3d(-50%, -50%, 0px) scale(1);
}

.closePopup {
    color: #fff;
    font-weight: bold;
    position: absolute;
    right: 10px;
    text-decoration: none;
    top: 10px;
  font-family: comic sans ms;
}

.popup h1 {
    color: #fff;
    margin-top: 130px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

/*Downloaded from https://www.codeseek.co/-HAN-/notification-demo-raWjNx */
$(function(){
  $('.notifyLink').click(function(){
    $(this).next('.notifyDropdown').toggleClass('sh');
  });
  
  $('.notifyDropdown a').click(function(){
    $('.popup').addClass('sh');  
    $('.shadow').addClass('in');
  });
  
  $('.closePopup').click(function(){
      $('.popup').removeClass('sh');  
    $('.shadow').removeClass('in');
  });
});

Comments