Label and Checkbox not working

Asked

Viewed 130 times

1

I created a checkbox with id = "navToggle" to show the "Nav" and intended to use the label with the for pointing to this checkbox, but for some reason when I click on the X nothing happens. The checkbox works well. Below is the css3 code I used to show the menu when checkbox is marked and then there is HTML. Please help. Thank you.

.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>

html css html5

  • Edit your question and write in English ok.

2 answers

1

Hello,

Friend from what I understood of your question is that you wanted to make the checkbox hide and show up here have as I did to the checkbox hide your label with an X, I hope to have helped.

<!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

First you need to decide whether you want to start showing or hiding the Nav, for that you will need to do:

inserir a descrição da imagem aqui

To the nav hidden initial

nav{
    display: none;
}

Or for visible start Nav

nav{
    display: block;
}

Then your selector switch .nav-toggle:checked ~ nav is wrong because using ~ you indicate that the nav is within the checkbox, which is not true, which is why you need to change ~ for +, using the + you indicate that you will catch the first brother after the checkbox, which is precisely his nav

See the code working, starting with the nav hidden with 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>

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.