Toggler 3
Toggler 3
/*===== Toggler 3 =====*/
#toggler-3:focus,
#toggler-3:active {
outline: 0;
}
#toggler-3 span {
width: 30px;
height: 3px;
display: block;
background-color: #333;
margin: 7px 0;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#toggler-3 span:nth-child(1) {
-webkit-transform: translatey(10px);
-ms-transform: translatey(10px);
transform: translatey(10px);
}
#toggler-3 span:nth-child(2) {
opacity: 1;
width: 15px;
-webkit-transform: translatex(33%);
-ms-transform: translatex(33%);
transform: translatex(33%)
}
#toggler-3 span:nth-child(3) {
-webkit-transform: translatey(-10px);
-ms-transform: translatey(-10px);
transform: translatey(-10px);
}
#toggler-3.collapsed span {
-webkit-transform: translatey(0);
-ms-transform: translatey(0);
transform: translatey(0);
opacity: 1;
width: 30px;
}
/*===== Toggler =====*/
#toggler:focus,
#toggler:active {
outline: 0;
}
#toggler span {
width: 30px;
height: 3px;
display: block;
background-color: #333;
margin: 7px 0;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#toggler span:nth-child(1) {
-webkit-transform: translatey(10px);
-ms-transform: translatey(10px);
transform: translatey(10px);
}
#toggler span:nth-child(2) {
opacity: 1;
width: 15px;
-webkit-transform: translatex(33%);
-ms-transform: translatex(33%);
transform: translatex(33%)
}
#toggler span:nth-child(3) {
-webkit-transform: translatey(-10px);
-ms-transform: translatey(-10px);
transform: translatey(-10px);
}
#toggler.collapsed span {
-webkit-transform: translatey(0);
-ms-transform: translatey(0);
transform: translatey(0);
opacity: 1;
width: 30px;
}