CSS
@import url('https://fonts.googleapis.com/css?family=Coming+Soon');
body {
margin: 0;
padding: 0;
background: #167097;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#menu-icon {
position: relative;
height: 5vh;
width: 15vw;
margin: auto;
margin-top: 18%;
max-width: 80px;
min-width: 50px;
max-height: 60px;
min-height: 40px;
cursor: pointer;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
.bar-1 {
position: relative;
height: 13%;
background: #333;
}
.bar-2 {
margin-top: 10%;
margin-bottom: 1%;
position: relative;
height: 13%;
background: #333;
}
.bar-3 {
margin-top: 10%;
position: relative;
height: 13%;
background: #333;
bottom: 0%;
}
.menu-icon-bar {
background: #fff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
JAVASCRIPT
var menuBars = (function(){
// Use strict mode
"use strict";
// Declare page Variables:
var fullMenu = document.getElementById('menu-icon'),
menuBar1 = document.getElementById('menu-bar-1'),
menuBar2 = document.getElementById('menu-bar-2'),
menuBar3 = document.getElementById('menu-bar-3'),
body = document.getElementsByTagName("body")[0];
// Open Menu function
function openMenu() {
menuBar2.style.opacity = "0";
menuBar2.style.marginTop = "0%";
menuBar2.style.marginBottom = "0%";
menuBar2.style.height = "0%";
menuBar1.style.transform = "rotate(-53deg)";
menuBar3.style.transform = "rotate(53deg)";
menuBar3.style.marginTop = "0%";
menuBar3.style.bottom = "10%";
fullMenu.style.marginTop = "18%";
fullMenu.style.transform = "scale(1)";
body.style.backgroundColor = "#012534";
}
// Open Menu function
function menuHover() {
fullMenu.style.transform = "scale(0.9)";
body.style.backgroundColor = "#063d55";
}
function closeMenu() {
menuBar2.style.opacity = "1";
menuBar2.style.marginTop = "10%";
menuBar2.style.marginBottom = "1%";
menuBar2.style.height = "13%";
menuBar1.style.transform = "rotate(0deg)";
menuBar1.style.top = "0%";
menuBar3.style.transform = "rotate(0deg)";
menuBar3.style.marginTop = "10%";
menuBar3.style.bottom = "0%";
fullMenu.style.maxHeight = "60px";
fullMenu.style.minHeight = "40px";
fullMenu.style.marginTop = "18%";
fullMenu.style.transform = "scale(1)";
body.style.backgroundColor = "#167097";
}
return {
menuOpening: function(){
fullMenu.addEventListener("click", openMenu);
},
menuHover: function(){
fullMenu.addEventListener("mouseover", menuHover);
},
menuClosing: function(){
fullMenu.addEventListener("mouseleave", closeMenu);
}
};
})();
menuBars.menuOpening();
menuBars.menuClosing();
menuBars.menuHover();
