LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

MENU

CSS
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #333;
  color: #fff;
}

.wrapper {
  margin: 100px auto 0;
  overflow: hidden;
  width: 120px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

h2 {
  float: left;
  margin-top: 10px;
  letter-spacing: 3px;
}

.hamburger {
  list-style: none;
  float: left;
  margin: 0;
  padding: 10px 0;
  position: relative;
  top: 2px;
  left: 10px;
  -moz-transition: all 233ms cubic-bezier(0.5, 0, 0, 1);
  -o-transition: all 233ms cubic-bezier(0.5, 0, 0, 1);
  -webkit-transition: all 233ms cubic-bezier(0.5, 0, 0, 1);
  transition: all 233ms cubic-bezier(0.5, 0, 0, 1);
}
.hamburger li {
  width: 24px;
  height: 4px;
  background: #fff;
  margin: 2px 0 0;
  padding: 0;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: all 333ms cubic-bezier(0.5, 0, 0, 1);
  -o-transition: all 333ms cubic-bezier(0.5, 0, 0, 1);
  -webkit-transition: all 333ms cubic-bezier(0.5, 0, 0, 1);
  transition: all 333ms cubic-bezier(0.5, 0, 0, 1);
}

.checked .hamburger li.first {
  -moz-transform: rotate(-135deg) translateY(-8.5px);
  -ms-transform: rotate(-135deg) translateY(-8.5px);
  -webkit-transform: rotate(-135deg) translateY(-8.5px);
  transform: rotate(-135deg) translateY(-8.5px);
}
.checked .hamburger li.second {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.checked .hamburger li.third {
  -moz-transform: rotate(135deg) translateY(8.5px);
  -ms-transform: rotate(135deg) translateY(8.5px);
  -webkit-transform: rotate(135deg) translateY(8.5px);
  transform: rotate(135deg) translateY(8.5px);
}
JS
$('.wrapper').on('click', function(){
  
  $(this).toggleClass('checked');

})
Host Instantly Drag and Drop Website Builder

 

Description

Playing with a quick menu concept for a small project. It's not perfect, but it works for now.
Term
Mon, 11/27/2017 - 22:04

Related Codes

Pen ID
Pen ID
Pen ID