body{
  background: url(https://24.media.tumblr.com/20a9c501846f50c1271210639987000f/tumblr_n4vje69pJm1st5lhmo1_1280.jpg) no-repeat center center fixed #f55;
  background-size:cover;
  -moz-background-size:cover;
  overflow-x:hidden;
}
.toggle-menu{
  display:block;
  width:150px;
  height:50px;
  line-height:50px;
  text-align:center;
  text-decoration:none;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  color:white;
  text-shadow: 0 1px 1px #f00;
  background:#f55;
  box-shadow: 0 6px 6px -6px black;
  transition: all 0.5s ease;
}
.toggle-menu:hover{
  color:white;
  text-shadow: 0 1px 1px #f00;
  background:#f22;
  box-shadow: 0 6px 6px -6px black;
  transition: all 0.5s ease;  
}
.hiddenBlock{
  position:absolute;
  top:0;
  left:0;
  margin:auto;
  color:white;
  display:none;
  width:100%;
  margin:0;
  padding:0;
  text-align:center;
  color:white;
  text-shadow: 0 1px 1px #f00;
  background:#f55;
  box-shadow: 0 6px 6px -6px black;
  transition: all 0.5s ease;
}
.toggled{
  display:block;
}

var web = (function() {

  'use strict';

  // JSLint global
  /*global DocumentTouch,document,window,alert,Notification,setInterval,setTimeout,clearTimeout*/

  // click or touch
  var clickEvent = (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? 'touchstart' : 'click';

  return {
    // Call events here
    run: function() {
      this.menu(); // toggle menu fn
    },  
    // this.qS('single class');
    qS: function(el) {
      return document.querySelector(el);
    },
    // toggle menu
    menu: function() {
      var self = this;
      this.qS('.toggle-menu').addEventListener(clickEvent, function(e) {
        e.preventDefault();
        self.qS('.hiddenBlock').classList.toggle('toggled');
        // Notification fn example chrome,safari and mozilla
        if (self.qS('.hiddenBlock').classList.contains('toggled')) {
          self.notifyMe('Show menu', 'The menu has been opened', 'https://tinyurl.com/pnfdwtp');
        } else {
          self.notifyMe('Hide menu', 'The menu has been hidden', 'https://tinyurl.com/pnfdwtp');
        }
      }, false);
    },
    // this.notifyMe('title','description',icon');
    notifyMe: function(a, b, c) {
      var Notification = window.Notification || window.mozNotification || window.webkitNotification;
      Notification.requestPermission(function(permission) {
        // console.log(permission);
      });
      this.show(a, b, c);
    },
    show: function(d, e, f) {
      var self = this,
          instance = new Notification(
            d, {
              body: e,
              icon: f
            }
          );
      instance.onshow = function() {
        // wait 3 seconds and hide
        var t = setTimeout(function() {
          instance.close();
          clearTimeout(t);
        }, 3000);
      };
      instance.onclose = function(){
          self.qS('.hiddenBlock').classList.remove('toggled'); 
      };
      return false;
    }
    // Other fn here
  };
})();
web.run(); // run web