Menu déroulant avec bootstrap.

Waren59
Javascript

Bonsoir,

Je suis en train de regarder le tutoriel sur bootstap, mais je n'arrive pas à créer mon menu déroulant comme je ne m'y connais pas du tout en javascript. Pourriez-vous m'indiquer la marche à suivre ?

Voici mon code actuel :

<ul class="nav secondary-nav">
                    <li><a href="#" class="menu">Se connecter</a>
                        <ul class="dropdown-menu">
                            <form action="" class="form-stacked">   
                                <div class="clearfix">
                                <label for="">Pseudo</label>
                                    <div class="input">
                                        <input type="text">
                                    </div>
                                </div>
                                <div class="clearfix">
                                <label for="">Mot de passe</label>
                                    <div class="input">
                                        <input type="password">
                                    </div>
                                </div>
                                <input type="submit" value="Envoyer" class="btn success">
                            </form>
                        </ul>
                    </li>
                </ul>

Merci d'avance.

3 réponses

Grafikart
Réponse acceptée

Twitter fournit un ensemble de fichier javascript "tout fait", regarde de ce côté là (il y a une page dédiée sur la doc) http://twitter.github.com/bootstrap/javascript.html

Waren59
Auteur

Problème résolu voici la solution.

Le menu en lui même :

<!--Menu déroulant "Participer"-->
                <ul class="nav secondary-nav">
                <li class="dropdown" data-dropdown="dropdown"> 
                <li><a href="#" class="menu">Participer</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Ajouter un exercice</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Livre d'or</a></li>
                    </ul>
                </li>
                </ul>

Le js entre les head : 

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>

Le js en bas de page : 

<script>
    $(document).ready(function () {
        $("#topbar-container").dropdown();
    });
    $("body").bind("click", function (e) {
        $('.dropdown-toggle, .menu').parent("li").removeClass("open");
    });
    $(".dropdown-toggle, .menu").click(function (e) {
        var $li = $(this).parent("li").toggleClass('open');
        return false;
    });
    </script>

Par contre, l'écriture des sous menu est anormale une solution genre entourer d'une div avec class... ?

Merci.

PshetKenpachi

Merci bcp sa m'a été tres utile :)