Я пытаюсь сделать анимацию иконки раскрывающегося меню ,чтобы три горизонтальные черты превращались в Х, пробовал разные варианты с параметрами display и position но все равно не получается нормально центрировать элементы, в чем моя ошибка?
$("#icon").click(function() {
$("#menu").toggleClass("menuafter");
$(".line").toggleClass("lineafter");
$(".line1").toggleClass("line1after");
$(".line2").toggleClass("line2after");
});
body {
display: flex;
background: #d7d7d7;
margin: 0;
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
.left {
position: relative;
flex: 1 1 auto;
background: silver;
height: 100%;
width: 50%;
}
.right {
align-content: flex-end;
position: relative;
flex: 1 1 auto;
background: gray;
height: 100%;
width: 50%;
}
#icon {
display: flex;
position: absolute;
height: 45px;
width: 45px;
background: white;
border-radius: 100%;
margin-top: 10px;
align-items: center;
justify-content: center;
flex-direction: column;
right: 10px;
opacity: 1;
transform: scale(1, 1);
z-index: 999;
transition: opacity ease-in-out .5s, scale ease-in-out .5s;
}
.line,
.line1,
.line2 {
background: gray;
height: 4px;
width: 25px;
margin: 1.5px;
border-radius: 2px;
transform: translateY(0px);
transform: rotate(0deg);
}
.lineafter {
position: absolute;
background: gray;
height: 4px;
width: 25px;
margin: 1.5px;
border-radius: 2px;
transform: translateY(7px);
transform: rotate(-45deg);
transform-origin: 50% 50%;
transition: transform ease-in-out .5s;
}
.line1after {
position: absolute;
background: gray;
height: 4px;
width: 25px;
margin: 1.5px;
border-radius: 2px;
transform: rotate(-45deg);
transform-origin: 50% 50%;
transition: transform ease-in-out .5s;
}
.line2after {
position: absolute;
background: gray;
height: 4px;
width: 25px;
margin: 1.5px;
border-radius: 2px;
transform: translateY(-7px);
transform: rotate(45deg);
transform-origin: 50% 50%;
transition: transform ease-in-out .5s
}
#icon:hover {
opacity: 0.5;
transform: scale(1.1, 1.1);
transition: opacity ease-in-out .5s, scale ease-in-out .5s;
}
.menu {
display: inline-flex;
right: 0;
background: coral;
opacity: .5;
position: absolute;
flex: 1 1 auto;
height: 100%;
width: 0%;
align-items: center;
justify-content: center;
font-size: 0px;
transition: width ease .5s, font-size ease .5s;
}
.menuafter {
display: inline-flex;
right: 0;
background: coral;
opacity: .5;
position: absolute;
flex: 1 1 auto;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
font-size: 50px;
transition: width ease .5s, font-size ease .5s;
}
input {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="left">
</div>
<div class="right">
<input id="menu1" type="checkbox" name="menu">
<label id="icon" for="menu1">
<div class="line">
</div>
<div class="line1">
</div>
<div class="line2">
</div>
</label>
<div id="menu" class="menu">
<p>MENU <br>MENU</p>
</div>
</div>
</body>