Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probème toogle:checked

    23 septembre 2021 à 1:56:05

    Bonjour,

    Alors voilà, j'ai essayer de faire un menu déroulant : quand j'appuie sur un le toggle, le "display" du menu passe de "None" à "Block". Cependant, même si l'implémentation s'est bien passé, il me reste un gros problème : rien ne se passe quand j'appuie sur le toggle en question. J'ai essyer plusieus solutions, en vain. Je vous joins donc mon code HTML et CSS dans l'espoir que vous puissiez m'aider. Merci d'avance.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="stylesheet.css"/>
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
            <title>Suppr</title>
        </head>
        <body>
            <header>
                <div class="navbar">
                    <h1><a href="index.php">Suppr</a></h1>
                    <label for="toggle">&#9776;</label>
                    <input type="checkbox" id="toggle"/>
                    <ul>
                        <li><a href="">Contests</a></li>
                        <li><a href="">Rating</a></li>
                        <li><a href="">Shop</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Profile</a></li>
                        <li><a href="">Log In</a></li>
                    </ul>
                </div>
                <div class="banner">
                    <div class="container">
                        <h1>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h1>
                        <h2>XXXXXXXXXXXXXXXXXXXXXX</h2>
                    </div>
                </div>
            </header>
        </body>
    </html>
    *{
        margin: 0;
    }
    ul{
        padding-inline-start: 0px;
    }
    header{
        height: auto;
        width: 100%;
        background-color: #FBAB7E;
        background-image: linear-gradient(180deg, #FBAB7E 0%, #F7CE68 100%);
    }
    .navbar{
        display: flex;
        align-items: center;
        padding: 2rem;
    }
    .navbar a{
        text-decoration: none;
        color: #ffffff;
    }
    .navbar h1{
        text-align: left;
        text-transform: uppercase;
        font-size: 64px;
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 10px;
    }
    .navbar label{
        display: none;
        text-align: right;
        font-size: 48px;
        line-height: 70px;
        color: #ffffff;
    }
    .navbar ul{
        flex: 1;
        text-align: right;
    }
    .navbar ul li{
        display: inline-block;
        padding: 1rem;
        text-transform: uppercase;
        list-style: none;
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 7px;
    }
    .banner{
        display: flex;
        height: 60vh;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .banner h1{
        padding: 1rem;
        text-transform: uppercase;
        font-size: 3rem;
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 10px;
        color: #ffffff;
    }
    .banner h2{
        padding: 1rem;
        text-transform: uppercase;
        font-size: 2rem;
        font-family: 'Bebas Neue', cursive;
        letter-spacing: 6px;
        color: #ffffff;
    }
    #toggle{
        display: none;
    }
    
    @media only screen and (max-width:965px){
        .navbar{
            display: block;
            padding: 2rem 2rem 0 2rem;
        }
        .navbar h1{
            padding: 0 0 1rem 0;
            text-align: left;
            font-size: 8vw;
        }
        .navbar ul{
            display: none;
            text-align: center;
        }
        #toggle:checked + .navbar{
            display: block;
        }
        .navbar ul li{
            display: block;
            padding: 0.5rem;
            font-size: 4vw;
        }
        .navbar label{
            display: block;
            cursor: pointer;
        }
        .banner{
            height: 60vw;
        }
        .banner h1{
            padding: 0 1rem;
            font-size: 6vw;
        }
        .banner h2{
            font-size: 4vw;
        }
    }

    Respectueusement,

    Axel Hippolite.



    • Partager sur Facebook
    • Partager sur Twitter

    Probème toogle:checked

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    • Editeur
    • Markdown