reyjaysolares
6/20/2014 - 8:06 PM

A Pen by Reyjay Solares.

A Pen by Reyjay Solares.

CSS-Transitoin-Mobile-Menu-Button.markdown
content_copyfile_download
  • Rendered
  • Source

CSS Transitoin Mobile Menu Button

This is a nifty way to animate you mobile menu button into an x when it is open.

A Pen by Reyjay Solares on CodePen.

License.

index.html
content_copyfile_download
<div class="mobile-nav-toggle">
  <div class="toggle-line first"></div>
  <div class="toggle-line middle"></div>
  <div class="toggle-line last"></div>
</div>
script.js
content_copyfile_download
$('.mobile-nav-toggle').click(function(){
  $(this).toggleClass('close');
});
style.css
content_copyfile_download
.close {
  background-color: red !important;
}
.mobile-nav-toggle {
  cursor: pointer;
  width: 20px;
  height: 18px;
  padding: 10px ;
  background:#000;
}
.mobile-nav-toggle:hover {
  background-color:#3c3b3b;
}
.mobile-nav-toggle .toggle-line {
  background-color: #FFF;
  height: 3px;
  margin-bottom: 4px;
  width: 100%;
}
.mobile-nav-toggle .toggle-line:last-child {
  margin-bottom:0px;
}
.mobile-nav-toggle .toggle-line.first, .mobile-nav-toggle .toggle-line.last {
  -webkit-transition: -webkit-transform 250ms ease;
  -webkit-transition-delay: 0ms;
  -moz-transition: -moz-transform 250ms ease 0ms;
  -o-transition: -o-transform 250ms ease 0ms;
  transition: transform 250ms ease 0ms;
}
.mobile-nav-toggle.close .toggle-line.first {
  -webkit-transform: rotate(45deg) translateY(5px) translateX(5px);
  -moz-transform: rotate(45deg) translateY(5px) translateX(5px);
  -ms-transform: rotate(45deg) translateY(5px) translateX(5px);
  -o-transform: rotate(45deg) translateY(5px) translateX(5px);
  transform: rotate(45deg) translateY(5px) translateX(5px);
}
.mobile-nav-toggle .toggle-line.middle {
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: width 200ms ease;
  -webkit-transition-delay: 200ms;
  -moz-transition: width 200ms ease 200ms;
  -o-transition: width 200ms ease 200ms;
  transition: width 200ms ease 200ms;
}
.mobile-nav-toggle.close .toggle-line.middle {
  width: 0;
  -webkit-transition: width 200ms linear;
  -webkit-transition-delay: 0ms;
  -moz-transition: width 200ms linear 0ms;
  -o-transition: width 200ms linear 0ms;
  transition: width 200ms linear 0ms;
}
.mobile-nav-toggle.close .toggle-line.last {
  -webkit-transform: rotate(-45deg) translateY(-5px) translateX(5px);
  -moz-transform: rotate(-45deg) translateY(-5px) translateX(5px);
  -ms-transform: rotate(-45deg) translateY(-5px) translateX(5px);
  -o-transform: rotate(-45deg) translateY(-5px) translateX(5px);
  transform: rotate(-45deg) translateY(-5px) translateX(5px);
}