Jquery Slide Menu Déroulant

Personne ne sait si il existe un plugin JQuery qui va créer un "glisser" menu similaire à celui présenté ici : http://www.bu.edu/

Ne sais pas si je suis en utilisant le terme correct pour ce type de menu, et j'ai cherché sur Google et StackOverflow pour un certain temps maintenant, sans succès....

Merci d'avance!

  • Merci à tous pour votre aide! Toutes les réponses à vos questions ont été utiles. Voici la solution que j'ai trouvé jusqu'à présent: jsfiddle.net/akil_ja/jyrkV/2. Dernière question: si quelqu'un peut me donner une astuce sur la façon d'arrêter le menu de rebondir en haut et en bas comme un fou lorsqu'un utilisateur place le pointeur de la rapidité, il serait bien apprécié! (Je suis soupçonner setTimeout pourrait être utile pour cela, mais vous ne savez pas comment la mettre en œuvre...)
InformationsquelleAutor Akil A. | 2013-04-26
  1. 3

    Avez-vous essayé une approche sans utiliser de js ou jQuery?

    Je veux dire, vous pouvez le faire simplement en utilisant HTML5 avec CSS3 transitions.

    Il ressemblera à ceci:

    HTML:

    <div id="menu">
<ul>
    <a href="#"><li>Menu 1</li></a>
    <a href="#"><li>Menu 2</li></a>
    <a href="#"><li>Menu 3</li></a>
    <a href="#"><li>Menu 4</li></a>
    <a href="#"><li>Menu 5</li></a>
    <a href="#"><li>Menu 6</li></a> 
</ul>

    CSS

    a {
font-family: verdana;
color: #fff;
font-size: 11px;   
}

a:hover {
color: #cff;    
}
#menu {

background: #666;
height: 30px;
width: 377px; 
transition:height 0.5s;
-webkit-transition:height 0.5s;
}

#menu:hover {
 height: 200px;     
}

ul {    
padding: 0; margin: 0;
padding-right: 10px;
position: absolute;    
}

ul li {
float: left;
display:block;
padding: 10px;
margin: 0;
background: #333;
border-right: 1px solid #666
}

#outset {
width: 377px; height: 200px;
background: #900;

}

    découvrez ce JsFiddle exemple

    MODIFIER

    Pour s'adapter à votre question, j'ai fait quelques changement dans le code ci-dessus et ajouter un peu de jQuery.
    Comme ceci:

    $(document).ready(function() {
  $("#subMenu").hide(); 
});

$("#menu").hover(
  function() {
    $("#subMenu").show('fast');        
  },
  function() {
    $("#subMenu").hide('fast'); 
  }
);

    Vous pouvez voir les résultats dans ce JsFiddle exemple

    • +1 pour pas de JS. Mais si la période de transition est nécessaire et ils sont non pris en charge (un.k.un. IE, etc), il suffit d'utiliser .animate() (si vous utilisez jQuery :D)
    • Merci Christian et bravo pour penser hors de la boîte, sur ce point. Le seul problème que je peux voir avec ton exemple (pour mon application), c'est que je vais avoir imbriquée des sous-liens et votre code html doit être modifié afin de tenir compte de cela. Sinon, votre exemple est génial...merci!
    • vous pouvez essayer quelque chose comme ceci par exemple: jsfiddle.net/xWQ2Z
    • NICE! C'est à peu près ce que j'allais pour...merci man 😀
    • Heureux de vous aider!
    InformationsquelleAutor Christian
  2. 2

    Qui serait très facile à construire sans plugin. Créer un sous-menu div et set display:none en CSS.

    Puis créer un hover auditeur à "glisser" dans le sous-menu.

    Sur le mouseout partie de l'passez de l'événement, plutôt que de simplement fermer le sous-menu, enveloppez la clôture du sous-menu dans un setTimeout de 200ms, puis ajouter un événement mouseover dans le sous-menu pour annuler le setTimeout: (sinon, le sous-menu de fermer immédiatement à la sortie du menu)

    var menuTimer;

$("#menu").hover(function() {
    //Slide down the submenu
    $("#sub_menu").slideDown();
}, function() {
    //Create a 200ms timer, after which it will close the sub_menu
    menuTimer = setTimeout(function() {
                        $("#sub_menu").slideUp();
                    },200);
});

$("#sub_menu").mouseenter(function() {
    //The user entered the submenu, so cancel the timer (don't close the submenu)
    clearTimeout(menuTimer);
});
    • Merci pour le conseil et l'exemple. Le seul problème avec cette solution est que le site doit être accessible aux lecteurs d'écran et de ma compréhension, l'affichage rien ne peut lui causer quelques problèmes où les lecteurs d'écran ignore le contenu....Je peut faire quelque chose de similaire, mais d'animer la hauteur pour afficher/masquer les liens secondaires à la place...cheers
    • ensuite, réglez la hauteur à 0 et au lieu d'utiliser la slideDown et slideUp, animer la hauteur à l'aide de jQuery.animer
    InformationsquelleAutor BBagi
  3. 0

    Pourquoi ne pas vous faire votre propre menu?
    essayez avec une liste <ul> et jQuery .mouseover() de faire un div .show() avec blind effet de jQuery UI

    • Merci pour la réponse Memolition. Je peut finir par créer mon propre menu si aucune plugins sont disponibles, mais j'ai pensé qu'il était inutile de réinventer la roue si il y en avait un...
    • Ok je vous recommande vraiment de vous faire votre propre, mais regarde sur cette page, je pense que ça va aider Menus Déroulants
    • Merci pour le lien. Je suis vraiment à la recherche pour des exemples/plugins qui fait pousser le contenu ci-dessous le menu vers le bas...pas de superposition de la liste déroulante des options sur le contenu. Je suis à l'écoute de votre recommandation, bien que, et je peut juste créer ce à partir de zéro...cheers
    • oui c'est mieux et pour faire cet effet que le menu appuyez sur le contenu vers le bas, vous pouvez utiliser les css display:block; sur chaque menu div
    InformationsquelleAutor Memolition
  4. 0

    Prendre un coup d'oeil à ceci:
    Menu déroulant

    $('li').mouseover(function() {
    var this_menu = $(this).attr('class');
    if($('.menu_div').is(':visible')) {
       $('.menu_div').hide('blind', 'fast');
    }
    $('#' + this_menu).show('blind', 'fast'); 
});
$('.menu_div').mouseout(function() {
   var this_menu = $(this).attr('class');
   $('.menu_div').hide('blind', 'fast'); 
});

    Il est fait avec jQuery et jQuery UI
    aussi, si vous ajoutez tou votre document <head> la jQuery bibliothèque et après jQuery-UI cause jQuery-UI besoins jQuery de travail

    • Merci! Seul problème de cet exemple est que j'ai vraiment envie d'afficher TOUTES les sous-options lorsque le menu est survolé....Je pense que c'est l'un des principaux avantages de ce type de menu sur une norme déroulant...
    InformationsquelleAutor Memolition