LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  • Slide on the top
  • Reveal
  • Push
CSS
@import url(https://fonts.googleapis.com/css?family=Lato:400);
*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  background: #ecf0f1;
  color: #7f8c8d;
  font-family: 'Lato';
  font-size: 14px;
  height: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
}
ul,
li {
  margin: 0;
  padding: 0;
}
.menu {
  -webkit-transform: translate(-200px, 0);
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  background: #2980b9;
  color: #fefefe;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.menu li {
  -webkit-transition: background 0.25s ease-out;
  border-bottom: 1px solid #95a5a6;
  cursor: pointer;
  display: block;
  padding: 10px 20px;
}
.menu li:hover {
  background: #3498db;
}
.effects {
  -webkit-transform: translate(0, 0);
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  background: #ecf0f1;
  height: 100%;
  padding: 20px;
  position: relative;
  width: 100%;
}
.effects:after {
  background: #666;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.effects li {
  -webkit-transition: background 0.25s ease-out;
  border: 1px solid #95a5a6;
  cursor: pointer;
  display: inline-block;
  min-height: 50px;
  margin: 0 5px;
  padding: 5px;
  vertical-align: top;
  width: 80px;
}
.effects li:hover {
  background: #1abc9c;
  color: #fefefe;
}
body[data-effect] .effects:after {
  -webkit-animation: reveal-veil 0.5s ease-in-out 0s forwards;
}
body[no-data-effect] .effects:after {
  -webkit-animation: reveal-veil 0.5s ease-in-out 0s backwards reverse;
}
body[data-effect="slide-on-top"] .menu {
  -webkit-transform: translate(0, 0);
}
body[data-effect="reveal"] .menu {
  -webkit-transition: none;
  -webkit-transform: translate(0, 0);
  z-index: 0;
}
body[data-effect="reveal"] .effects {
  -webkit-transform: translate(200px, 0);
  z-index: 1;
}
body[data-effect="push"] .menu {
  -webkit-transform: translate(0, 0);
}
body[data-effect="push"] .effects {
  -webkit-transform: translate(200px, 0);
}
@-webkit-keyframes reveal-veil {
  0% {
    opacity: 0;
  }
  100% {
    opacity: .5;
    z-index: 1;
  }
}
JS
$(function () {
  var body = $('body');
  
  $('.js-effects').click(function (event) {
    body.removeAttr('data-effect');
    body.offset(); // force re-paint
    body.attr('no-data-effect', 'true');
    return true;
  });
  
  $('.js-effects li').click(function (event) {
    event.stopPropagation();
    var el = $(event.currentTarget);
    body.removeAttr('no-data-effect');
    body.offset(); // force re-paint
    body.attr('data-effect', el.attr('data-effect'));
    return true;
	});
});

Description

Playing with sidebar transitions (Chrome prefixes only)
Term
Sat, 01/13/2018 - 07:27

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv