vergnet/site-accueil-insa
2
1
Fork 1
Code Issues Pull requests Releases 2 Wiki Activity

Improve hamburger css

Browse source
This commit is contained in:
Keplyx 2019-05-16 18:26:49 +02:00
parent 014036c1f5
commit d70fe678ec
3 changed files with 27 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.idea/jsLibraryMappings.xml
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptLibraryMappings">
<file url="PROJECT" libraries="{all, hammer, jQuery-2.0.0, jquery, jquery-1.11.1, jquery-3.3.1, jquery-migrate-3.0.0, jquery-ui, jquery.mobile-1.4.5, jquery.mobile-1.5.0-alpha.1}" />
<file url="PROJECT" libraries="{jquery-3.3.1}" />
</component>
</project>

31
assets/css/hamburger.css
View file

@ -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);
}

18
assets/scripts/sidenavScript.js
View file

@ -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");
});