focuspro
@focuspro

Как скрыть меню бургер на чистом CSS?

Меню бургер в мобильной версии на чистом CSS, закрывается только если нажать на крестик, меню содержат якорные ссылки на эту же страницу при нажатии на ссылку меню остаётся открытым, как сделать чтобы оно скрывалось при нажатии на якорь, без js

<header class="header fixed-top navbar-light">
    <div class="logo"><a href="" class="navbar-brand">Лого</a></div>
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
    <ul class="menu navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#1">Пункт1</a></li>
      <li class="nav-item"><a class="nav-link" href="#2">Пункт2</a></li>
      <li class="nav-item"><a class="nav-link" href="#3">Пункт3</a></li>
      <li class="nav-item"><a class="nav-link" href="#4">Пункт4</a></li>
    </ul>
  </header>


.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}



.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Froggyweb
Никак :) не стоит извращаться, там где не надо
Ответ написан
Вместо, checked используй псевдокласс :focus Только кнопку "крестик" - надо сделать другим элементом, чтобы фокус терялся, думаю сам справишься

Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы