Eu criei uma caixa de seleção com o id = "navToggle" para mostrar o "nav" e pretendia usar a label
com o for
apontando para esse checkbox
, mas por algum motivo quando eu clico no X nada acontece. O checkbox
funciona bem. Abaixo, há o código css3 que eu usei para mostrar o menu quando checkbox
está marcado e, em seguida, há o HTML. Por favor ajude. Obrigado.
.nav-toggle:checked ~ nav{
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FirstPage</title>
</head>
<body>
<link rel="stylesheet" href="navMenuStyle.css" />
<header>
<h1 class="logo">S.Gibas</h1>
<input type="checkbox" class="nav-toggle" id="navToggle" />
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
<lable for="navToggle" class="nav-toggle-lable">
<span>X</span>
</lable>
</header>
</body>
</html>