Не отображается гамбургер меню на css (checkbox)

349

15 января 2017, 16:57

Меню постоянно скрыто (transform: translateY(-100%); opasity: 0;), при нажатии должно выезжать сверху (transform: translateY(0%); opasity: 1;). Как его отобразить с помощью комбинаций селекторов checkbox:checked?

body { 
  margin: 0; 
  padding: 0; 
  font-family: Tahoma, Arial, sans-serif; 
  font-size: 16px; 
  color: #222; 
  background: #de3c3c; 
  overflow-y: hidden; 
} 
nav { 
  color: #fff; 
} 
nav ul.navbar-wrapper { 
  margin: 0; 
  padding: 0; 
  background: #ea506e; 
  width: 100%; 
  height: 650px; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  z-index: -1; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  -webkit-flex-direction: column; 
  -ms-flex-direction: column; 
  flex-direction: column; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -webkit-transform: translateY(-100%); 
  -ms-transform: translateY(-100%); 
  transform: translateY(-100%); 
  -webkit-transition: all .5s; 
  transition: all .5s; 
  opacity: 0; 
} 
nav ul li.nav-item { 
  list-style: none; 
  -webkit-align-self: center; 
  -ms-flex-item-align: center; 
  align-self: center; 
} 
nav ul li.nav-item a { 
  display: block; 
  color: #ffe7ec; 
  text-decoration: none; 
  font-size: 1.6em; 
  line-height: 1.6; 
} 
nav ul li.nav-item a:hover { 
  color: #fff; 
} 
 
nav .hamburger { 
  position: absolute; 
  clip: rect(0, 0, 0, 0); 
} 
nav label[for="hamburger"] { 
  position: fixed; 
  right: 25px; 
  top: 20px; 
  z-index: 3; 
  height: 40px; 
  width: 35px; 
  font-size: 40px; 
  line-height: 30px; 
  cursor: pointer; 
  display: block; 
} 
/***********************************ПРОБЛЕМА**/ 
nav input.hamburger:checked + ul { 
  -webkit-transform: translateY(0%); 
  -ms-transform: translateY(0%); 
  transform: translateY(0%); 
  opacity: 1; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Big Menu</title> 
  <link rel="stylesheet" href="style.css" class="style"> 
  <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
</head> 
 
<body> 
  <nav> 
    <ul class="navbar-wrapper"> 
      <li class="nav-item"> 
        <a href="#"><i class="fa fa-home" aria-hidden="true"></i>&#32;Home</a> 
        <a href="#"><i class="fa fa-desktop" aria-hidden="true"></i>&#32;Articles</a> 
        <a href="#"><i class="fa fa-paper-plane" aria-hidden="true"></i>&#32;Drop me a line</a> 
        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i>&#32;Follow me</a> 
      </li> 
    </ul> 
    <input type="checkbox" id="hamburger" class="hamburger"></input> 
    <label for="hamburger"><i class="fa fa-bars" aria-hidden="true"></i> 
    </label> 
  </nav> 
</body> 
 
</html>

Answer 1

Сделайте класс для открытого меню, например, .active

nav ul.navbar-wrapper.active {
  opacity:1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

И добавляйте этот класс при нажатии на #hamburger (для jQuery):

$('#hamburger').click(function(){
 $('nav ul.navbar-wrapper').toggleClass('active')
})

$('#hamburger').click(function(){ 
   $('nav ul.navbar-wrapper').toggleClass('active') 
})

body { 
  margin: 0; 
  padding: 0; 
  font-family: Tahoma, Arial, sans-serif; 
  font-size: 16px; 
  color: #222; 
  background: #de3c3c; 
  overflow-y: hidden; 
} 
nav { 
  color: #fff; 
} 
nav ul.navbar-wrapper { 
  margin: 0; 
  padding: 0; 
  background: #ea506e; 
  width: 100%; 
  height: 650px; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  z-index: -1; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  -webkit-flex-direction: column; 
  -ms-flex-direction: column; 
  flex-direction: column; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -webkit-transform: translateY(-100%); 
  -ms-transform: translateY(-100%); 
  transform: translateY(-100%); 
  -webkit-transition: all .5s; 
  transition: all .5s; 
  opacity: 0; 
} 
nav ul.navbar-wrapper.active { 
  opacity:1; 
  -webkit-transform: translateY(0); 
  -ms-transform: translateY(0); 
  transform: translateY(0); 
} 
 
nav ul li.nav-item { 
  list-style: none; 
  -webkit-align-self: center; 
  -ms-flex-item-align: center; 
  align-self: center; 
} 
nav ul li.nav-item a { 
  display: block; 
  color: #ffe7ec; 
  text-decoration: none; 
  font-size: 1.6em; 
  line-height: 1.6; 
} 
nav ul li.nav-item a:hover { 
  color: #fff; 
} 
/***********************************ПРОБЛЕМА**/ 
 
nav .hamburger { 
  position: absolute; 
  clip: rect(0, 0, 0, 0); 
} 
nav label[for="hamburger"] { 
  position: fixed; 
  right: 25px; 
  top: 20px; 
  z-index: 3; 
  height: 40px; 
  width: 35px; 
  font-size: 40px; 
  line-height: 30px; 
  cursor: pointer; 
  display: block; 
} 
nav input.hamburger:checked + ul { 
  -webkit-transform: translateY(0%); 
  -ms-transform: translateY(0%); 
  transform: translateY(0%); 
  opacity: 1; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Big Menu</title> 
  <link rel="stylesheet" href="style.css" class="style"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
  <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"> 
</head> 
 
<body> 
  <nav> 
    <ul class="navbar-wrapper"> 
      <li class="nav-item"> 
        <a href="#"><i class="fa fa-home" aria-hidden="true"></i>&#32;Home</a> 
        <a href="#"><i class="fa fa-desktop" aria-hidden="true"></i>&#32;Articles</a> 
        <a href="#"><i class="fa fa-paper-plane" aria-hidden="true"></i>&#32;Drop me a line</a> 
        <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i>&#32;Follow me</a> 
      </li> 
    </ul> 
    <input type="checkbox" id="hamburger" class="hamburger"> 
    <label for="hamburger"><i class="fa fa-bars" aria-hidden="true"></i> 
    </label> 
  </nav> 
</body> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

структура для хранения цвета С++

Разработать структуру для хранения цвета (компоненты Red, Green, Blue)

412

c++

Aрхитектура приложения

Сразу прошу прощения за такой заголовок, я просто не знаю, как в двух словах описать проблему

334

c++

Работа со службами из программы со стандартными полномочиями

Имеется следующая ситуация: 1Работаем под OS поддерживающими UAC

315

c++

Проблемы с реализацтей Entity–component–system Design Pattern [требует правки]

Реализовал ECS pattern на примере игрыПока была одна сущность - Игрок (Player) было все хорошо, создал 10 компонентов Position, SpriteSheet, State, Movable, MovableMod, Controller,...

344