IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[BootStrap] Barre navigation, menu déroulant ne fonctionne pas.


Sujet :

Framework CSS Bootstrap

  1. #1
    Membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    mars 2021
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : mars 2021
    Messages : 105
    Points : 66
    Points
    66
    Par défaut [BootStrap] Barre navigation, menu déroulant ne fonctionne pas.
    Bonjour,
    Je viens juste de commencer avec Bootstrap, j'ai fait un menu responsive en suivant un tutoriel. Le problème est le menu déroulant ne se déroule pas et sur petit écran la même chose avec le menu hamburger.
    Voici mon code :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <nav class= " navbar navbar-expand-md navbar-light bg-dark">
                <a class="navbar-brand nav-link text-light font-weight-bold text-uppercase px-3" href="">Mon logo</a>
                <button type="button" class="navbar-toggler bg-light" data-toggle="collapse" data-target="#nav"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse justify-content-between" id="nav">
                    <ul class= "navbar-nav">
                        <li class="nav-item">
                            <a class ="nav-link text-light font-weight-bold text-uppercase px-3" href="#">
                                Home
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class ="nav-link text-light font-weight-bold text-uppercase px-3 dropdown-toggle" href="#" data-toggle="dropdown">
                                Catégories
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item"  href="">Menu</a>
                                <a class="dropdown-item" href="">Menu</a>  
                                <a class="dropdown-item" href="">Menu</a>     
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class ="nav-link text-light font-weight-bold text-uppercase px-3" href="#">
                            Contact
                            </a>
                         </li>
                    </ul>
                    <ul class= "navbar-nav">
                        <li class="nav-item">
                            <a class ="nav-link text-light font-weight-bold text-uppercase px-3" href="#">
                                se connecter
                            </a>
                        </li>
                    </ul>
                </div> 
     </nav>
    Est-ce que c'est un problème de version Bootstrap 4 ou 5 ou bien mon code est erroné?
    merci

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 263
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 263
    Points : 41 689
    Points
    41 689
    Par défaut
    Bonjour,
    Mauvais paramétrage de ton élément, ce que tu as mis :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a class ="nav-link text-light font-weight-bold text-uppercase px-3 dropdown-toggle" href="#" data-toggle="dropdown">
    ce qu'il faudrait :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a class ="nav-link text-light font-weight-bold text-uppercase px-3 dropdown-toggle" href="#" data-bs-toggle="dropdown">
    la différence n'est pas énorme mais fait tout !

  3. #3
    Membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    mars 2021
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : mars 2021
    Messages : 105
    Points : 66
    Points
    66
    Par défaut
    Bonjour,
    Voilà en ajoutant data-bs-toggle="dropdown" j'ai résolu le souci quand je clique sur catégorie le menu se déroule, je vous en remercie.
    Il me reste le problème quand je suis sur petit écran mon Button (menu hamburger) ne se déplie pas. J'ai même modifié pour le button data-bs-toggle ="collapse" (j'ai tenté d'ajouter le bs mais rien y fait)
    Je suis un peu perdu parce que j'ai trouvé une solution mais je ne sais pas si c'est la bonne.. mais tout marche (le menu catégorie et le menu hamburger) :
    j'ai changé mes balises script et j'ai une balise de plus jQuery :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    Puis concernant mon code html j'ai dû réenlever le bs à data-bs-toggle="dropdown" et maintenant les deux se déroulent et marchent.
    Qu'en pensez-vous ? Puis je laisser cela dans l'état vu que tout marche ?
    Merci pour votre aide

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 263
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 263
    Points : 41 689
    Points
    41 689
    Par défaut
    Le conseil que je pourrais te donner est de passer à BootStrap v.5x, si tu ne peux pas t'en passer

  5. #5
    Membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    mars 2021
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : mars 2021
    Messages : 105
    Points : 66
    Points
    66
    Par défaut
    Voila tout marche j'ai suivi la documentation pour les barres de navigation BOOSTRAP 5, merci pour le lien, j'étais un peu perdu avec les versions et les tutoriels anciens. Avant de fermer le post comme résolu j'aurais une dernière question : Dans les barres de navigation je vois souvent des petites images par exemple une petite enveloppe pour les e-mail, les images de connexion etc. comme la barre de ce forum à droite; Est ce que cela fait partie aussi de BOOTSTRAP et comment s'appellent t'ils ? (c'est pour rechercher dans la documentation).
    Merci

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 263
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 263
    Points : 41 689
    Points
    41 689
    Par défaut
    Avant de fermer le post comme résolu j'aurais une dernière question : Dans les barres de navigation je vois souvent des petites images par exemple une petite enveloppe pour les e-mail, les images de connexion etc. comme la barre de ce forum à droite; Est ce que cela fait partie aussi de BOOTSTRAP et comment s'appellent t'ils ?
    Tu trouveras tout cela dans BootStrap icons, les explications de mise en oeuvre sont à la rubrique install.

  7. #7
    Membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    mars 2021
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : mars 2021
    Messages : 105
    Points : 66
    Points
    66
    Par défaut
    merci beaucoup pour votre aide et votre réponse.
    Bonne soirée

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    mai 2006
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : mai 2006
    Messages : 44
    Points : 82
    Points
    82
    Par défaut
    Effectivement, avec Bootstrap il faut faire très attention à la version car la documentation peut porter à confusion si elle se rapporte à une version antérieure. Les noms des classes ont évolué. Moi-même j'ai eu ce problème à mes débuts.

    Citation Envoyé par Matteo53 Voir le message
    Dans les barres de navigation je vois souvent des petites images par exemple une petite enveloppe pour les e-mail, les images de connexion etc. comme la barre de ce forum à droite; Est ce que cela fait partie aussi de BOOTSTRAP et comment s'appellent t'ils ? (c'est pour rechercher dans la documentation).
    Une alternative intéressante (mais ce n'est pas la seule): Font Awesome

  9. #9
    Membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    mars 2021
    Messages
    105
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : mars 2021
    Messages : 105
    Points : 66
    Points
    66
    Par défaut
    Bonjour,
    merci pour ces informations précieuse, je vais regarder tout cela.
    Bonne journée.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 1
    Dernier message: 06/09/2014, 17h34
  2. [CSS 3] Menu déroulant ne fonctionne pas sur mobile
    Par xlucie dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 29/06/2014, 14h54
  3. Menu déroulant ne fonctionne pas sur iPad et iPhone
    Par The Molo dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 10/01/2013, 01h37
  4. menu déroulant ne fonctionne pas
    Par clem62173 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 27/02/2010, 16h55
  5. Menu déroulant ne fonctionnant pas correctement
    Par solorac dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 11/08/2009, 10h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo