.hi Fancy Nav notification bar with a delete button
.nav
   input(type="checkbox" id="navtoggle")
   input(type="checkbox" id="deletetoggle")
   .title An Experiment
   .toggleNotifications
      .count
         .num 1
         .num 2
         .num 3
         .num 4
      label.show(for="navtoggle") #[i.material-icons notifications]
      .notifications
         .btnbar
            .text.full You've got mail
            .text.empty Would you like to restore?
            label.delete(for="deletetoggle")
               i.material-icons.full delete
               i.material-icons.empty restore
         .groupofnotes
            .note #[i.material-icons mail] This is a notification
            .note #[i.material-icons mail] You've got mail
            .note.read #[i.material-icons drafts] The Newsletter
            .note.read #[i.material-icons drafts] Interview at 2am
View Compiled
html,
body {
   padding: 0px;
   margin: 0px;
   background: #333;
   font-family: 'Ubuntu', sans-serif;
   color: #FFF;
}

body {
   .hi {
      text-align: center;
      margin: 20px;
   }
   * {
      box-sizing: border-box;
      margin: 0px;
      padding: 0px;
      border: none;
      background: none;
   }
}

.nav {
   position: relative;
   max-width: 400px;
   min-height: 60px;
   margin: 20px auto;
   border-radius: 2px;
   border: 1px solid rgba(0, 0, 0, 0.5);
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
   background: linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.28));
}

.title {
   float: left;
   height: 60px;
   line-height: 58px;
   padding: 0px 20px;
}

.toggleNotifications {
   position: relative;
   display: inline-flex;
   float: right;
   height: 58px;
   width: 70px;
   user-select: none;
   .show {
      flex: 1;
      margin: auto;
      height: 40px;
      max-width: 40px;
      text-align: center;
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 1);
      background: rgba(0, 0, 0, 0.5);
      font-size: 24px;
      transition: all 0.2s;
      &:hover {
         background: rgba(0, 0, 0, 1);
         cursor: pointer;
      }
      i {
         line-height: 38px;
      }
   }
}
.count{
   position:absolute;
   top:5px;
   right:26px;
   .num{
      position:absolute;
      top:0px;
      left:0px;
      background:#f22;
      border-radius:50%;
      width:18px;
      height:18px;
      text-align:center;
      line-height:17px;
      font-size:11px;
      box-shadow:0px 1px 3px rgba(0, 0, 0, 0.25);
      border:1px solid rgba(0, 0, 0, 0.20);
      transition:all 0.3s;
   }
}
.notifications {
   position: absolute;
   top: 52px;
   right: 24px;
   width: 300px;
   background: #465;
   border: 1px solid #455;
   border-radius: 2px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5);
   transition: all 0.2s;
   &:after {
      content: ' ';
      position: absolute;
      top: -20px;
      right: 0px;
      width: 0px;
      height: 10px;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 10px solid #465;
      pointer-events: none;
   }
   &:before {
      content: ' ';
      position: absolute;
      top: -21px;
      right: 0px;
      width: 0px;
      height: 10px;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 10px solid #455;
      pointer-events: none;
   }
   .btnbar {
      position: relative;
      height: 60px;
      background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.5));
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
      .text {
         line-height: 60px;
         padding: 0px 20px;
         position: absolute;
         top: 0px;
         transition: all 1s;
         &.empty { opacity: 0; }
      }
      .delete {
         position: absolute;
         right: 15px;
         top: 10px;
         width: 40px;
         height: 40px;
         background: rgba(255, 75, 50, 0.75);
         border-radius: 50%;
         text-align: center;
         border: 2px solid rgba(0, 0, 0, 0.5);
         transition: all 0.2s;
         i {
            line-height: 38px;
            font-size: 18px;
            transition:all 1s;
            position:absolute;
            top:-1px;left:9px;
            &.empty { opacity: 0; }
         }
         &:hover {
            background: rgba(255, 75, 50, 0.95);
            cursor: pointer;
         }
      }
   }
   .groupofnotes {}
   .note {
      padding: 0px 20px;
      height: 40px;
      line-height: 40px;
      border-radius: 2px;
      &:first-of-type {
         margin-top: 0px;
      }
      transition:all 0.2s;
      overflow:hidden;
      max-height:40px;
      &.read {
         color: #CDCDCD;
      }
      &:hover {
         background: rgba(0, 0, 0, 0.25);
         cursor: pointer;
      }
      i {
         position: relative;
         top: -1px;
         margin-right: 5px;
         vertical-align: middle;
         color: white;
      }
   }
}

#navtoggle {
   display: none;
   &:checked {
      ~ .toggleNotifications .notifications {
         opacity: 0;
         
      }
   }
}

#deletetoggle{
   display: none;
   &:checked ~ .toggleNotifications{
      .notifications{
         .groupofnotes .note {
            max-height: 0px;
            @for $i from 1 through 4 {
               &:nth-of-type(#{$i}) {
                  transition-delay: ($i/5)+s;
               }
            }
         }
         .btnbar {
            .delete{ transition-delay: 1s; background:#465;}
            .full {
               opacity: 0;
            }
            .empty {
               opacity: 1;
               transition-delay: 1s;
            }
         }
      }
      .count .num{
         opacity:0;
         transform:translateY(-20px);
         @for $i from 4 through 1 {
            &:nth-of-type(#{$i}) {
               transition-delay: (1/$i)+s;
            }
         }
      }
   }
}
View Compiled
//Just for show
var navtoggle = document.querySelectorAll('#navtoggle')[0]
var deltoggle = document.querySelectorAll('#deletetoggle')[0]

setTimeout(function(){
   deltoggle.checked = true;
}, 300);

setTimeout(function(){
   deltoggle.checked = false;
}, 2000)

External CSS

  1. https://fonts.googleapis.com/css?family=Ubuntu
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

This Pen doesn't use any external JavaScript resources.