Dropdown

Nucky
PHP

Bonjour/Bonsoir, je recherche depuis plus d'un jour comment faire fonctionner mon dropown...
J'ai pourtant tous les css du bootstraps mais toujours, comment faire ?
voici mon thème : https://bootswatch.com/sandstone/

Mon code : 

            <ul class="dropdown-menu">
            <li><a href="#">Profil</a></li>
            <li><a href="#">Mot de passe</a></li>
            <li><a href="#">Mes dernières connexions</a></li>
            <li class="divider"></li>
            <li><a href="#">Se déconnecter</a></li>
            </ul>

Mes fichiers associés : 

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.min.css" rel="stylesheet">
    <link href="scripts/_bootswatch.scss" rel="stylesheet">
    <link href="scripts/_variables.scss" rel="stylesheet">
    <link href="scripts/bootswatch.less" rel="stylesheet">

Donc merci de m'éclaircir a se sujet :)

8 réponses

kwik
Réponse acceptée

Bonjour

Je vois que tu charges les fichiers css, mais pour les dropdown il te faut chargé aussi le js donc le fichier bootstrap.min.js sans oublier de chargé jquery.

J'ai pas regarder le reste du code, ce n'est pas evident sur un tel.

Metylene
Réponse acceptée 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../assets/js/custom.js"></script>

Le thème charge ces trois fichier javascript. Ton dropdown doit être fait à partir de bootstrap donc il te faut minimum jquery et bootstrap de chargé dans ta page. En bas de page de préférence.

Metylene

Peux tu donner tout le code de ta navbar stp ? Car juste avec ça ce n'est pas suffisant, il peut manquer d'autres balises. D'après le code du thème, voilà la structure d'un dropdown : 

    // Pas dropdown
    <li>
        <a href="#">Blog</a>
    </li>
    // Dropdown
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user">Nom menu<span class="caret"></span></a>
        <ul class="dropdown-menu" aria-labelledby="user">
        <li><a href="#">Profil</a></li>
        <li><a href="#">Mot de passe</a></li>
        <li><a href="#">Mes dernières connexions</a></li>
        <li class="divider"></li>
        <li><a href="#">Se déconnecter</a></li>
        </ul>
    </li>

Aussi, as-tu vérifié dans la console de debug de ton navigateur si il n'y a pas d'erreur de chargement de tes styles ?

Nucky
Auteur 
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="connexion.php">Espace Client</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <?php if (isset($_SESSION['auth'])): ?>
                <li><a href="accueil.php">Accueil</a> </li>
                <li class="disabled"><a href="#">Mes produits</a></li>
                <?php else: ?>
                <li><a href="enregistrement.php">S'inscrire</a></li>
                <li><a href="connexion.php">Se connecter</a></li>
                <?php endif; ?>
            </ul>

                <ul class="nav navbar-nav navbar-right">
                <?php if (isset($_SESSION['auth'])): ?>
                <li><a href="profil.php">Profil</a> </li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
            <?= $_SESSION['auth']->username; ?> <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
            <li><a href="#">Profil</a></li>
            <li><a href="#">Mot de passe</a></li>
            <li><a href="#">Mes dernières connexions</a></li>
            <li class="divider"></li>
            <li><a href="#">Se déconnecter</a></li>
            </ul>
            </li>
            <li><a href="deconnexion.php">Se déconnecter</a> </li>
            </ul>
            <?php else: ?>
            <?php endif; ?>
        </div><!--/.nav-collapse -->
    </div>
</nav>

Voila.

Metylene

Essaye en rajoutant 'id' sur le lien et 'aria-labelledby' sur le ul.

            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false" id="profile">
            <?= $_SESSION['auth']->username; ?> <span class="caret"></span>
            </a>
            <ul class="dropdown-menu"  aria-labelledby="profile">
keulu

et tu peux aussi virer les fichier CSS qui ont l'extension scss et less. (ce sont des fichier pour compiler en CSS)

Nucky
Auteur

Metylene, j'ai fais ce que tu as dit, toujours rien. Merci quand même.
kwik, possible de m'expliquer plus clairement car je me prend la tête alors que ces tèllemment minable mon problême.

Nucky
Auteur

Sujet résolu, merci a tous pour votre aide.