Intégrateur certifié et Développeur TYPO3

Les autres blogs

Bootstrap 3 : Déplier le menu dropdown au "hover" plutôt qu'au "click"

Pour ceux qui ne le savent pas encore, Bootstrap est le framework HTML, CSS et JS le plus populaire pour du développement de sites web responsifs.

La version 3 de Bootstrap (comme les autres versions d'ailleurs) permet de générer un menu JS dynamique appelé "Menu Dropdown" avec plusieurs niveaux d'arborescence.

Le premier problème que j'ai avec ce menu dropdown bootstrap, c'est qu'il n'est activable qu'au clic de la souris. Mon deuxième problème, c'est que comme on doit cliquer sur le premier niveau du menu pour déplier le deuxième, forcément, le premier niveau ne peux pas être utilisé en tant que "lien classique".

Je vais donc vous partager la méthode que j'ai mis en place pour afficher les sous-menus dropdown au passage de la souris (et non au clic), tout en gardant la fonction première sur mon premier niveau, à savoir : changer de page lorsque je clique sur mon lien.

Customize and download

Avant toute chose, j'ai commencé par supprimer la fonction "dropdown" de base du framework Bootstrap. Avant de télécharger mon package bootstrap, j'ai donc personnalisé mon package en supprimant la fonction "Dropdown", puis ai téléchargé mon package.

D'autres préfères peut-être faire autrement, pour moi c'est ainsi. N'hésitez pas à partager vos avis dans les commentaires.

Maintenant le code

Maintenant que j'ai une base "propre", je passe aux choses sérieuses.

HTML

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="" class="dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="">Action</a></li>
      <li><a href="">Another action</a></li>
      <li><a href="">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="">Separated link</a></li>
    </ul>
  </li>
</ul>

JavaScript

var timerIn = 200;
var timerOut = 200;
$('ul.nav li.dropdown').hover(function() {
    $(this).find('> .dropdown-menu').stop(true, true).fadeIn(timerIn);
    $(this).addClass('open');
}, function() {
    $(this).find('> .dropdown-menu').stop(true, true).fadeOut(timerOut);
    $(this).removeClass('open');
});

Votre dropdown s'affiche désormais au "hover". Si vous avez d'autres méthodes, n'hésitez pas à les partager dans les commentaires, je prendrai en compte les remarques de chacun pour mettre à jour ce post.

Commentaires

commentaires générés par Disqus