0

Я пытаюсь сделать анимацию иконки раскрывающегося меню ,чтобы три горизонтальные черты превращались в Х, пробовал разные варианты с параметрами 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>

1 ответ 1

2

$("#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;
  position: absolute;
  left: 50%;
  margin-left: -13px;
  top: 50%;
  margin-top: -2px;
}

.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;
}
.line::after, .line::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: gray;
  border-radius: 2px;
}
.line::after {
  bottom: -6px;
}
.line::before {
  top: -6px;
}
.line.lineafter {
  background: transparent;
}
.line.lineafter::before {
    -moz-transform: rotate(45deg); /* Для Firefox */
    -ms-transform: rotate(45deg); /* Для IE */
    -webkit-transform: rotate(45deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(45deg); /* Для Opera */
    transform: rotate(45deg);
    top: 0;
}
.line.lineafter::after {
    -moz-transform: rotate(-45deg); /* Для Firefox */
    -ms-transform: rotate(-45deg); /* Для IE */
    -webkit-transform: rotate(-45deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(-45deg); /* Для Opera */
    transform: rotate(-45deg);
    top: 0;
}
<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>
</label>
    <div id="menu" class="menu">
      <p>MENU <br>MENU</p>
    </div>

  </div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.