1

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>

1
  • Edite sua pergunta e escreva em português ok.
    – hugocsl
    Commented 21/02/2019 às 9:54

2 Respostas 2

1

Olá,

Amigo pelo o que eu entendi de sua pergunta é que você queria fazer o checkbox esconder e aparecer coisar aqui tem como eu fiz para o checkbox esconder o seu label com um X, espero ter ajudado.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>FirstPage</title>
    <style>
        .nav-toggle-lable{
            display:none;
        }
        .nav-toggle:checked~nav {
            display: block;
        }
        .nav-toggle:checked~.nav-toggle-lable{
            display: block;
        }
    </style>
</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>

1

Primeiro vc precisa decidir se vc quer começar mostrando ou escondendo a Nav, para isso vc vai precisar faze:

inserir a descrição da imagem aqui

Para a nav inicial escondida

nav{
    display: none;
}

Ou para a nav iniciar visível

nav{
    display: block;
}

Depois o seu seletor .nav-toggle:checked ~ nav está errado, pois usando ~ vc indica que a nav está dento do checkbox, o que não é verdade, por isso vc precisa trocar ~ por +, usando o + vc indica que vc vai pegar o primeiro irmão depois do checkbox, que é justamente sua nav

Veja o código funcionando, começando com a nav oculta com display:none;

.nav-toggle:checked + nav{
    display: block;
}
nav{
    display: none;
}
<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>

    <label for="navtoggle" class="nav-toggle-lable">
        <span>X</span>
    </label>
</header>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .