site-accueil-insa/assets/css/hamburger.css

71 lines
1.1 KiB
CSS
Raw Normal View History

2018-03-25 13:22:28 +02:00
#hamburger {
display: inline-block;
2018-04-24 00:15:37 +02:00
position: relative;
2018-03-25 13:22:28 +02:00
cursor: pointer;
font-size: 32px;
margin: 5px;
2018-04-24 00:15:37 +02:00
height: 40px;
width: 40px;
2018-05-23 17:10:39 +02:00
pointer-events: auto;
2018-03-25 13:22:28 +02:00
}
2018-04-24 00:15:37 +02:00
#bar1, #bar2-1, #bar2-2, #bar3 {
position: absolute;
width: 40px;
2018-03-25 13:22:28 +02:00
height: 5px;
background-color: #fff;
2018-04-24 00:15:37 +02:00
margin: 5px 0;
transition: 0.3s;
2018-03-25 13:22:28 +02:00
}
2018-04-24 00:15:37 +02:00
#bar1 {
top: 0;
}
#bar2-1, #bar2-2 {
margin: 0;
width: 20px;
top: 50%;
transform: translateY(-50%);
}
#bar2-1 {
left: 0;
}
#bar2-2 {
right: 0;
}
#bar3 {
bottom: 0;
}
2018-03-25 13:22:28 +02:00
/* Rotate first bar */
2018-04-24 00:15:37 +02:00
.change #bar1 {
-webkit-transform: rotate(-45deg) translate(-10px, 10px);
transform: rotate(-45deg) translate(-8px, 8px);
2018-03-25 13:22:28 +02:00
}
/* Fade out the second bar */
2018-04-24 00:15:37 +02:00
.change #bar2-1 {
opacity: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.change #bar2-2 {
2018-03-25 13:22:28 +02:00
opacity: 0;
2018-04-24 00:15:37 +02:00
-webkit-transform: translateX(50%);
transform: translateX(50%);
2018-03-25 13:22:28 +02:00
}
/* Rotate last bar */
2018-04-24 00:15:37 +02:00
.change #bar3 {
-webkit-transform: rotate(45deg) translate(-10px, -10px);
transform: rotate(45deg) translate(-10px, -10px);
2018-03-25 13:22:28 +02:00
}