18041 sujets

Questions générales et questions de débutants

Problème responsive navbar

Bonjour à tous !
Je suis débutant en intégration et je rencontre un petit problème de responsive sur ma barre de navigation...
Lorsqu'on est en dessous des 940px ma navbar se transforme en menu hamburger, jusque là tout va bien ! Or lorsqu'on clique sur ce menu hamburger... et ben rien ne se passe... le menu ne se déplie pas... J'ai beau chercher l'erreur je ne la trouve pas...
Pouvez vous m'aider s'il vous plaît ?
Un grand merci à tous ceux qui auront pris le temps de lire mon message et à ceux qui m'aideront ! Smiley merci
Très bonne soirée à vous ! Smiley smile

LA PARTIE HTML :


    <div class="container">
        <div class="navbar">
            <img src="img/logo.png" alt="logo" class="logo">
            <label for="btn" class="icone">
                <img src="img/menu.png" alt="menu hamburger" class="hamburger">
            </label>
            <input type="checkbox" id="btn">
            <nav>
                <ul>
                    <li><a href="accueil.html">Accueil</a></li>
                    <li>
                        <label for="btn-1" class="afficher">Catégorie 1</label>
                        <a href=".html">Catégorie 1</a>
                        <input type="checkbox" id="btn-1">
                        <ul>
                            <li><a href="test.html">Sous catégorie 1</a></li>
                            <li><a href="test.html">Sous catégorie 2</a></li>
                            <li><a href="test.html">Sous catégorie 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <label for="btn-2" class="afficher">Catégorie 2</label>
                        <a href="test.html">Catégorie 2</a>
                        <input type="checkbox" id="btn-2">
                        <ul>
                            <li><a href="test.html">Sous catégorie 1</a></li>
                            <li><a href="test.html">Sous catégorie 2</a></li>
                            <li><a href="test.html">Sous catégorie 3</a></li>
                            <li><a href="test.html">Sous catégorie 4</a></li>
                        </ul>
                    </li>
                    <li><a href="test.html">Catégorie 3</a></li>
                    <li><a href="test.html">Catégorie 4</a></li>
                    <li><img src="img/cart.png" alt="panier" class="cart"></li>
                </ul>
                </nav>
        </div>
     </div>


CSS DE LA NAVBAR POUR RESPONSIVE


 @media screen and (max-width:940px) {
    .container{
        height: 50vh;
        width: 100%;
        background-image: url(background.jpg);
        background-position: center;
        background-size: cover;
        position: relative;
    }
    nav ul{
        margin-right: 0px;
        float: left;
    }
    nav .logo{
        padding-left: 30px;
        width: 160px;
    }
    nav ul li, nav ul ul li{
        display: block;
        width: 100%;
    }
    nav ul ul{
        top:70px;
        position: static;
        float:none;
        display: none;
        visibility: visible;
    }
    nav ul ul a{
        padding-left: 40px;
    }
    .afficher{
        display: block;
        color: white;
        font-size: 18px;
        padding: 0 20px;
        line-height: 70px;
        cursor: pointer;
    }
    .icone{
        display:block;
        position: absolute;
        right: 40px;
        line-height: 70px;
        font-size: 25px;
        cursor: pointer;
    }
    .hamburger{
        width: 25px;
    }
    .afficher + a, ul{
        display:none;
    }
    [id^=btn]:checked +ul{
        display: block;
    }
}


CSS DE LA NAVBAR DE BASE


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}
.container{
    height: 100vh;
    width: 100%;
    background-image: url(background.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
.navbar{
    width: 100%;
    height: 10vh;
    margin: auto;
    display: flex;
    align-items: center;
    background: rgba(0,0,0,.8)
}
.logo{
    width:160px;
    cursor:pointer;
    margin-left: 50px;
}
.cart{
    width:30px;
    cursor:pointer;
    margin-top: 18px;
}
.logo{
    width:160px;
    cursor:pointer;
}
nav ul{
    float: right;
    list-style: none;
    margin-right: 40px;
    margin-left: 50px;
    position: relative;
}
nav ul li{
    float: left;
    display: inline-block;
    margin: 0 5px;
}
nav ul li a{
    color: white;
    text-decoration:none;
    line-height:70px;
    font-size: 18px;
    padding: 8px 15px;
}
nav ul ul{
    position: absolute;
    top: 70px;
    visibility:hidden;
}
nav ul li:hover > ul{
    visibility: visible;
}
nav ul ul li{
    position:relative;
    margin:0;
    width: 160px;
    float:none;
    display: list-item;
    background: rgba(0,0,0,.8);
}
nav ul li a:hover{
    color: orange;
    border-radius: 5px;
    box-shadow : 0 0 5px orange;
}
nav ul ul li a:hover{
    color: orange;
    box-shadow : none;
}
.afficher,.icone, input{
    display:none;
}
Bonsoir. L'erreur est ici :
[id^=btn]:checked + nav > ul { /* J'ai rajouté nav */
      display: block;
}

Remarquez aussi qu'avec le code qui précède :
.afficher + a, ul{
  display:none;
}

Vous allez cacher toutes les listes, et non seulement celle de la navigation. Il faut donc là aussi limiter le scope, par exemple :
.afficher + a, .navbar nav > ul {
  display:none;
}

En tout cas, utiliser des checkbox pour ouvrir et fermer tous les onglets... c'est ouf comme solution. Je l'ai souvent fait à l'époque, mais juste pour l'hamburger, pas pour les onglets un par un. Quitte à utiliser du HTML, autant utiliser details/summary.

Je fais tout ça au pif hein, possible qu'il y ait des erreurs car je me suis contenté de lire le code. Un exemple en ligne c'est toujours mieux.
Modifié par Olivier C (14 Jan 2023 - 22:14)
Olivier C a écrit :
Bonsoir. L'erreur est ici :
[id^=btn]:checked + nav &gt; ul { /* J'ai rajouté nav */
      display: block;
}

Remarquez aussi qu'avec le code qui précède :
.afficher + a, ul{
  display:none;
}

Vous allez cacher toutes les listes, et non seulement celle de la navigation. Il faut donc là aussi limiter le scope, par exemple :
.afficher + a, .navbar nav &gt; ul {
  display:none;
}

En tout cas, utiliser des checkbox pour ouvrir et fermer tous les onglets... c'est ouf comme solution. Je l'ai souvent fait à l'époque, mais juste pour l'hamburger, pas pour les onglets un par un. Quitte à utiliser du HTML, autant utiliser details/summary.

Je fais tout ça au pif hein, possible qu'il y ait des erreurs car je me suis contenté de lire le code. Un exemple en ligne c'est toujours mieux.


Merci beaucoup ça fonctionne !!! Smiley prie

Je rencontre juste le même problème avec les sous catégories de ma navbar.
J'ai essayé de corriger ça mais maintenant c'est l'inverse ! Mes sous catégories s'affichent directement sans que j'ai cliqué sur la catégorie qui les contient... Je crois que c'est un problème de sélecteur/combinateur mais je suis un peu perdu...(le CSS c'est pas mon truc)

Les lignes que j'ai rajouté pour essayer de corriger le problème :

.afficher + a, .navbar nav > ul{
        display:none;
    }
    [id^=btn-2]:checked .afficher + a, .navbar nav > ul > li > ul{
      display:block;
  }
    [id^=btn]:checked + nav > ul{
        display: block;
    }

}
Pas besoin de cibler les ID (ce qui produirait un code redondant), on pourrait partir de la classe "afficher" :
.afficher + [type=checkbox] + ul {
  display: none;
}

.afficher + [type=checkbox]:checked + ul {
  display: block;
}

Toujours au pif hein, mais ce devrait être un truc comme ça.
Prévenir un modérateur
Répondre au sujet
Aller à