diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml index f487212..33e09d5 100644 --- a/.idea/jsLibraryMappings.xml +++ b/.idea/jsLibraryMappings.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/assets/css/hamburger.css b/assets/css/hamburger.css index 70d5f97..c07bbcb 100755 --- a/assets/css/hamburger.css +++ b/assets/css/hamburger.css @@ -41,30 +41,43 @@ bottom: 0; } -/* Rotate first bar */ +/* Mouse hovers the hamburger */ -.change #bar1 { +.change-hover #bar2-1 { + background-color: #ee293d; + transform: translate(-5px, -50%); +} + +.change-hover #bar2-2 { + background-color: #ee293d; + transform: translate(5px, -50%); +} + +.change-hover #bar1, .change-hover #bar3 { + background-color: #1a5dad; +} + + +/* Mouse clics the hamburger */ + +.change-clic #bar1 { -webkit-transform: rotate(-45deg) translate(-10px, 10px); transform: rotate(-45deg) translate(-8px, 8px); } -/* Fade out the second bar */ - -.change #bar2-1 { +.change-clic #bar2-1 { opacity: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } -.change #bar2-2 { +.change-clic #bar2-2 { opacity: 0; -webkit-transform: translateX(50%); transform: translateX(50%); } -/* Rotate last bar */ - -.change #bar3 { +.change-clic #bar3 { -webkit-transform: rotate(45deg) translate(-10px, -10px); transform: rotate(45deg) translate(-10px, -10px); } diff --git a/assets/scripts/sidenavScript.js b/assets/scripts/sidenavScript.js index 59e01ce..d7a57b6 100755 --- a/assets/scripts/sidenavScript.js +++ b/assets/scripts/sidenavScript.js @@ -42,11 +42,11 @@ function toggleNav() { } function disableHamburger() { - hamburger.removeClass("change"); + hamburger.removeClass("change-clic"); } function enableHamburger() { - hamburger.addClass("change"); + hamburger.addClass("change-clic"); } /* @@ -72,17 +72,7 @@ manager.on('swipe', function(e) { // Animate hamburger on hover hamburger.hover(function(){ - $("#bar1").css("background-color", "#1a5dad"); - $("#bar2-1").css("background-color", "#ee293d"); - $("#bar2-2").css("background-color", "#ee293d"); - $("#bar2-1").css("left", "-5px"); - $("#bar2-2").css("right", "-5px"); - $("#bar3").css("background-color", "#1a5dad"); + hamburger.addClass("change-hover"); }, function(){ - $("#bar1").css("background-color", "white"); - $("#bar2-1").css("background-color", "white"); - $("#bar2-2").css("background-color", "white"); - $("#bar2-1").css("left", "0"); - $("#bar2-2").css("right", "0"); - $("#bar3").css("background-color", "white"); + hamburger.removeClass("change-hover"); }); \ No newline at end of file