axxe16
5/5/2017 - 10:34 AM

Crea un burger menù animato

Crea un burger menù animato

BurgerMenuHTML.css
content_copyfile_download
body {background-color:#000}
#hamburger_menu {
    position: fixed;
    top: 23px;
    display: block;
    opacity: 1;
    right: 20px;
    z-index: 1200;
    width: 30px;
    height: 25px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}
#hamburger_menu span:nth-child(1) {
    top: 0px;
}
#hamburger_menu span:nth-child(2) {
    top: 10px;
}
#hamburger_menu span:nth-child(3) {
    top: 20px;
}
#hamburger_menu span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #414141;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#hamburger_menu.open span:nth-child(1) {
    top: 12px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
#hamburger_menu.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}
#hamburger_menu.open span:nth-child(3) {
    top: 12px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
BurgerMenuHTML.js
content_copyfile_download
$('#hamburger_menu').click(function(){
	$(this).toggleClass('open');
  return false;
});
BurgerMenuHTML.html
content_copyfile_download
<body>
<a id="hamburger_menu" href="#" class="">
   <span></span>
   <span></span>
   <span></span>
</a>
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>
</body>