LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  



  
CSS
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

body {
  background: #444444 url("http://nickbrombal.com/images/bg_pixel-grey.jpg") repeat fixed;
}

#wrapper {
  margin-top: 100px;
}

.menu-container {
  margin: 10px auto;
  width: 64px;
  height: 64px;
  white-space: nowrap;
  box-shadow: 3px 3px #2E2E2E;
}
.menu-container .label {
  display: none;
  position: absolute;
  font: 26px/64px electrolize;
  width: 64px;
  text-align: center;
  color: white;
}
.menu-container .tile {
  float: left;
  height: 64px;
  width: 64px;
}
.menu-container .bar {
  display: inline-block;
  height: 64px;
  vertical-align: top;
  width: 0px;
  overflow: hidden;
  background: #777;
}
.menu-container .bar .buttons {
  width: 300px;
  height: 64px;
  text-align: center;
}
.menu-container .bar .buttons img {
  height: 48px;
  padding: 8px 0;
}
.menu-container .bar .buttons p {
  font: 12px/64px roboto;
  color: #fff;
  letter-spacing: 3px;
}

/* Tile colouring */
#life .label, #life .tile {
  background: #52CC5C;
}

#work .label, #work .tile {
  background: #CC5252;
}

#play .label, #play .tile {
  background: #52A3CC;
}

#talk .label, #talk .tile {
  background: #CCCC52;
}

#link .label, #link .tile {
  background: #7C22D6;
}

/* Styling for font text icons */
[class^="icon-"] {
  display: inline-block;
  width: 100%;
  line-height: 64px;
  text-align: center;
  height: 64px;
  font-size: 37px;
  background: -webkit-linear-gradient(#fff, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
[class^="icon-"]:before {
  display: initial;
}

/* Vertical adjustments to font text icons */
.icon-briefcase {
  line-height: 68px;
}

.icon-gamepad {
  line-height: 60px;
}

.icon-comments {
  line-height: 62px;
}

.icon-link {
  line-height: 66px;
}

/* Hide the secret (shh!) menu */
#link {
  display: none;
}
JS
$(document).ready(function() { 
  // Perform animations on menu containers and items
  $('.menu-container').hover(function() { // Tile animations on hover, for desktop browsers
    category = '#' + this.id; 
    $(category + ' .label').stop().animate({width:'100px'}, {queue: false, duration: 300}).fadeIn();
    $(category + ' .tile').stop().animate({width:'100px'}, {queue: false, duration: 300});
    $(category + ' .bar').stop().animate({width:'300px'}, {queue: false, duration: 300});
    $(this).stop().animate({width:'400px'}, {queue: false, duration: 300}); 
  }, function() { // Tile reset on unhover, for desktop browsers
    $(category + ' .label').stop().animate({width:'64px'}).fadeOut({queue: false});
    $(category + ' .tile').stop().animate({width:'64px'});
    $(category + ' .bar').stop().animate({width:'0px'});
    $(this).stop().animate({width:'64px'});
  }).focus(function() { // Tile animation on focus (click), for mobile browsers
    category = '#' + this.id;
    $(category + ' .label').stop().animate({width:'100px'}, {queue: false, duration: 300}).fadeIn();
    $(category + ' .tile').stop().animate({width:'100px'}, {queue: false, duration: 300});
    $(category + ' .bar').stop().animate({width:'300px'}, {queue: false, duration: 300});
    $(this).stop().animate({width:'400px'}, {queue: false, duration: 300});
  }).blur(function() { // Tile reset on blur (unclick), for mobile browsers
    $('.label').stop().animate({width:'64px'}, {queue: false, duration: 300}).fadeOut({queue: false});
    $('.tile, .menu-container').stop().animate({width:'64px'}, {queue: false, duration: 300});
    $('.bar').stop().animate({width:'0px'}, {queue: false, duration: 300}); 
  });
        
  // If possible, use event listener for secret menu access
  if (window.addEventListener) {
    // Define holder for pressed keys, marker for secret status, and code sequence.
    var pressed = [];
    var status = 'hidden';
    var konamiCode = '38,38,40,40,37,39,37,39,66,65';
    // Listen for key presses and record their codes in "pressed" array
    window.addEventListener('keydown', function(k) {
      pressed.push(k.keyCode);
      // The first time the user enters the correct sequence...
      if (pressed.toString().indexOf(konamiCode) >= 0 && status == 'hidden') {
        // Reveal secret, then clear array and change status
        surprise();
        pressed = [];
        status = 'found';
      }
    }, true);
  }
  
  // Reveal secret menu and play sound
  var surprise = function() {
    $('#link').fadeIn();
    $('#secret-found')[0].play();
  };
});
Host Instantly Drag and Drop Website Builder

 

Description

Quick and dirty centered sliding menu tiles. Allows for mouseover effects on large screens and focus effects on small ones.
Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID