Le html :

<head>
    
<nav>
      
      <label for="toggle">☰</label>
    <input type="checkbox" id="toggle">
        <div class="main_pages">
            <a href="index.php"><?php echo _("Accueil"); ?></a>
            <a href="bijoux.php"><?php echo _("Pendentif"); ?></a>
            <a href="pipe.php"><?php echo _("Pipe"); ?></a>
            <a href="boucle.php"><?php echo _("Boucles d'oreilles"); ?></a>
            <a href="bague1.php"><?php echo _("Bague"); ?></a>
            <a href="#"><?php echo _("Mon Panier"); ?></a>
        </div>
    </nav>


<label for="taggle">⚑</label>
                <input type="checkbox" id="toggle">
                    <div class="main_pages">
                        <a href="bijoux.php"><?php echo _("Français"); ?></a>
                        <a href="bijoux.php"><?php echo _("Anglais"); ?></a>   
                    </div>

      
</head>

j'aimerai ajouter le bout de code en dessous pour le choix des langues en sous menu

Voici le code Css :

nav 
{
    margin: 50px auto;
    width: 50%;
    
    background: black;
    border-radius: 1.2em;

}
 
nav .main_pages 
{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
nav .main_pages a 
{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    color: white;
}
 
nav a:hover 
{
    background: #5A5766
}

label, #toggle
{
    display: none;
}



 
@media all and (max-width: 991px)
{
    nav
    {
        max-height: 40%;
        max-width: 80%;
        
        
    }
 
    nav .main_pages 
    {
        display: none;
        flex-direction: column;
        background: black;
        height: 200px;
        text-align: center;
        padding: 25px;
    }
 
    nav .main_pages a {
        width: 50%;
        
        

    }
 
    label 
    {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: white;
        
    }
 
    #toggle:checked + .main_pages {
        display: flex;


    }
}

FélixLefebure

28 septembre 2021 à 22:32:21