2

Доброй ночи, Господа! Кто может помочь с изменением цвета у крестика бургера? Пробовал через active (css), что-то не вышло...

body {
  background: red;
}

.mobile-menu__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: .4s;
  z-index: 1;
  margin-top: 20px;
}

.mobile-menu__icon {
  display: block;
  position: relative;
  background: white;
  width: 90%;
  height: 2px;
  transition: .4s;
}

.mobile-menu__icon::after,
.mobile-menu__icon::before {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 2px;
  transition: .4s;
}

.mobile-menu__icon::after {
  top: 8px;
}

.mobile-menu__icon::before {
  top: -8px;
}

.mobile-menu__checkbox {
  display: none;
}

.mobile-menu__checkbox:checked~.mobile-menu__nav {
  opacity: 1;
}

.mobile-menu__checkbox:checked~.mobile-menu__container {
  height: 100%;
  z-index: -1;
}

.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon {
  background: transparent;
}

.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::before,
.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::after {
  top: 0;
}

.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
<input type="checkbox" id="checkbox" class="mobile-menu__checkbox">
<label for="checkbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>

Заранее благодарю!

2 ответа 2

4

Если правильно понял)

body {
  background: red;
}

.mobile-menu__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: .4s;
  z-index: 1;
  margin-top: 20px;
}
.mobile-menu__icon {
  display: block;
  position: relative;
  background: white;
  width: 90%;
  height: 2px;
  transition: .4s;
}
.mobile-menu__icon::after, .mobile-menu__icon::before {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 2px;
  transition: .4s;
}

.mobile-menu__icon::after {
  top: 8px;
}
.mobile-menu__icon::before {
  top: -8px;
}

.mobile-menu__checkbox {
  display: none;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__nav {
  opacity: 1;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__container {
  height: 100%;
  z-index: -1;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
  background: transparent;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  top: 0;
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  background: #000;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
  background: #000;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
<input type="checkbox" id="checkbox" class="mobile-menu__checkbox">
<label for="checkbox" class="mobile-menu__btn"><div class="mobile-menu__icon"></div></label>

1
  • 1
    Благодарю за столь кратковременный отклик и ответ!) 7 дек 2020 в 18:16
1
.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::before,
.mobile-menu__checkbox:checked~.mobile-menu__btn .mobile-menu__icon::after {
  top: 0;
  background: orange;
}

теперь при переходе цвет крестика будет с белого меняться на оранжевый

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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