Menu déroulant dans jQuery. Menu d'ouverture fluide à l'aide de jQuery Menu déroulant simple à l'aide de jquery

Après avoir reçu plusieurs demandes, j'ai décidé d'écrire un article sur la façon de réaliser un menu déroulant. Le moyen le meilleur et le plus simple de créer un tel menu est de s’appuyer sur jQuery.

Regardons d'abord le balisage HTML

Menu déroulant simple basé sur jQuery Menu déroulant simple

Maison
Des produits
Prestations de service
Contactez-nous

Contenu

Il existe une simple liste non ordonnée de ul , ses balises li sont la base du menu de navigation. Ensuite, ajoutez le code ci-dessous à la balise li appropriée, cela structurera la liste déroulante.

Si vous y prêtez attention, vous remarquerez deux choses :

1. La balise li a une classe déroulante.
2. Le lien parent possède la classe ddIcon.

La classe déroulante est utilisée dans jQuery pour afficher/masquer un menu déroulant. La deuxième classe, ddIcon, est utilisée pour afficher un pointeur vers le menu déroulant.

Il n'y a rien de spécial dans les styles de menu - les styles habituels sont :

Conteneur ( largeur : 960 px ; marge : 0 auto ; padding-top : 50px ; ) .container h1 ( taille de police : 30px ; couleur : #666 ; marge-bottom : 1em ; ) .container nav ( border-radius : 4px ; couleur d'arrière-plan : #fff ; hauteur : 37 px ; ) .container nav ul li ( position : relative ; float : gauche ; ) .container nav ul li a ( taille de police : 12 px ; décoration de texte : aucune ; poids de police : gras ; transformation du texte : majuscule ; couleur : #545454 ; remplissage : 13px 15px ; affichage : bloc ; bordure droite : 1px solide #f9f9f9; ) .container nav ul li a.ddIcon ( arrière-plan : transparent url("dd.png ") pas de répétition 86 % 52 % ; remplissage : 13px 25px 13px 15px ; ) .container nav ul li a:hover ( background-color : #cc333f ; couleur : #fff; ) .container nav ul li.active a ( background -color : #cc333f ; couleur : #fff ; ) .container nav ul li:first-child a ( border-radius : 4px 0 0 4px ; ) .container nav ul li .subNav ( position : absolue ; background-color : # cc333f ; remplissage : 15px 15px 20px ; largeur : 172px ; gauche : 0px ; haut : 38px ; affichage : aucun ; ) .container nav ul li .subNav .navSection ( remplissage : 5px 0 ; ) .container nav ul li .subNav h4 (marge inférieure : 0,5 em ; ) .container nav ul li .subNav h4 a ( taille de police : 11 px ; couleur : # edc951 ; transformation du texte : majuscule ; bordure inférieure : 1 px solide #D33B47 ; remplissage : 7px 10px ; ) .container nav ul li .subNav h4 a:hover ( couleur : #edc951 ; ) .container nav ul li .subNav h4 a span ( float : droite ; taille de police : 10 px ; couleur : #fff; -moz-transition : couleur 0,5 s facilité 0 s ; ) .container nav ul li .subNav h4 a span:hover ( couleur : #390206 ) .container nav ul li .subNav a ( float : aucun ; bordure : aucun ; affichage : bloc ; transformation de texte : majuscule ; couleur : #fff ; remplissage : 7px 15px ; -moz-transition : couleur 0,5 s facilité 0s ; hauteur de ligne : 1,3 ; ) .container nav ul li .subNav:hover ( couleur : #390206; ) .container .section ( clair : les deux ; remplissage : 10px ; ) .container .section article p ( taille de police : 16px ; couleur : #488fb8 ; hauteur de ligne : 1.3 ; ) .container .section en-tête d'article p ( padding-top : 20px ; taille de police : 20px ; couleur : #333 ; hauteur de ligne : 1,3 ; marge-bottom : .4em ; )

Maintenant nous devons relancer menu déroulant. La fonction jQuery la plus simple nous y aidera.

$(function())( $("li.dropdown").hover(function() ( if ($("this:has(div.subNav)"))( $(".subNav").css(( " display":"aucun")); $(".subNav", this).css(("display":"block")); $("nav ul li").css(("position":" relatif ", "z-index":"1001")); $(this).addClass("active"); ) ), function())( $(".subNav").css(("display": "aucun ")); $(this).removeClass("active"); $("nav ul li").css(("position":"relative", "z-index":"1")); )) ; ));

Pour chaque élément de la liste, il est possible de créer votre propre menu déroulant : à l'intérieur de l'élément li, placez un bloc avec la classe .subnav , et attribuez la classe .dropdown au li lui-même.

Aussi, si quelqu'un est intéressé, vous pouvez consulter la méthode précédente avec en utilisant CSS qui est décrit dans l'article -

Maintenant au point. Comme dans le dernier article, écrivons tout d’abord le code HTML de notre menu. Le code est le même que dans cet article, afin qu’il n’y ait pas de confusion et qu’il soit plus compréhensible. Menu avec deux éléments et les deux ont des sous-menus.

paragraphe 1
- Élément déroulant 1
- Élément déroulant 2
- Élément déroulant 3
point 2
- Élément déroulant 1
- Élément déroulant 2
- Élément déroulant 3

Si vous disposez d'une telle ligne ou d'une ligne similaire qui a déjà inclus la bibliothèque auparavant, vous ne devriez pas recommencer.

jQuery(document).ready(function($)( $("#slow_nav ul li").hover(function () ( $("ul", this).stop().slideDown(400); ), function ( ) ( $("ul", this).stop().slideUp(400); )); ));

Dans la deuxième ligne du script nous indiquons l'ID de notre menu. Si vous utilisez cette méthodeà votre propre menu, puis changez naturellement le nom pour le vôtre. Dans ce cas, il s'agit de #slow_nav.

Vous pouvez également ajuster la durée de l'animation. Dans ce script, le temps d'ouverture et de fermeture est de 400 millisecondes, soit 0,4 seconde. Si vous le souhaitez, vous pouvez le modifier pour une valeur supérieure ou inférieure.

La dernière étape consiste à ajouter des styles. Ils sont très similaires aux styles de l’article précédent, sauf qu’il leur manque les propriétés d’animation CSS.

#slow_nav > ul( width: 500px; margin:25px auto 0; ) #slow_nav > ul > li( list-style : none; display: inline-block; position:relative; padding:0; ) #slow_nav a(text- decoration:none;) #slow_nav > ul > li > a( font-size:18px; padding:5px; background-color:#333; color:#fff; ) #slow_nav li ul( position:absolute; list-style: aucun; texte-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; display:none; ) #slow_nav li ul li( background-color:#333; border- bottom:1px solid #888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover( background-color:#444; ) #slow_nav li ul li:first-child( margin-top:25px; position:relative; ) #slow_nav li ul li:first-child:before( content:"" ; position : absolu ; largeur : 1px ; hauteur : 1px ; bordure : 5px solide transparent ; border-bottom-color : #333 ; gauche : 10px ; haut : -10px ; )

Aux styles est également ajouté un nouvelle ligne, avec lequel le script fonctionne correctement. Pour l'élément - #slow_nav li ul la propriété display:none; . Si vous ne l'ajoutez pas, le menu déroulant sera initialement visible et ne disparaîtra qu'après avoir déplacé le curseur dessus. Tous les autres styles sont les mêmes que ceux de l’article précédent.

Comme la méthode précédente, celle-ci peut être appliquée non seulement aux menus auto-écrits, mais également aux mêmes menus dynamiques créés par les systèmes de gestion de contenu, tels que WordPress. Pour ce faire, vous devez modifier un peu les styles et c'est tout. Autrement dit, vous n’avez pas besoin d’utiliser le premier code HTML, uniquement les styles. Dans les styles, vous devez remplacer le nom d'ID #slow_nav par ce que vous avez, et peut-être modifier d'autres petites choses. Je n'entrerai pas dans les détails. Chaque cas nécessite une approche personnelle, alors excusez-moi :)

C'est tout, merci pour votre attention. 🙂

En utilisant JQuery classique, de nombreux articles ont été écrits sur ce sujet. J'ai essayé de compliquer un peu la tâche en ajoutant la possibilité de laisser des sections de menu ouvertes (ou fermées, selon le choix de l'utilisateur) lors de ses déplacements sur le site.
Pour résoudre ce problème, j'ai décidé d'utiliser le plugin JQuery Cookie. L'avantage de ce plugin est que l'opération est effectuée côté client, ce qui réduit la charge sur le serveur. Moins - si l'utilisateur a désactivé JS, le plugin ne fonctionnera pas. Mais cette option Je n’y pense pas, car alors tout l’intérêt du menu déroulant disparaît. Alors, commençons.
Tout d'abord, nous devons connecter le framework JQuery lui-même et le plugin JQuery Cookie :

Code : HTML

Vient ensuite le marquage. Cela ressemblera à une simple liste, rien de surnaturel. La seule chose que je noterai, c'est que la balise doit contenir un titre, lorsque vous cliquez dessus, un menu déroulant s'affichera :

Code : HTML

Premier titre

Premier lien

Deuxième lien

Troisième lien

Deuxième titre

Premier lien

Deuxième lien

Troisième lien

Troisième titre

Premier lien

Deuxième lien

Troisième lien

Quatrième titre

Premier lien

Deuxième lien

Troisième lien

Eh bien, et ainsi de suite à l'infini. Vient maintenant la partie la plus intéressante. J'ajouterai quelques commentaires dans le code pour que ce soit à peu près clair.

Code : JS

$(document).ready(function())(
if($.cookie("num_open_ul"))( // vérifie s'il y a une entrée dans les cookies
if($.cookie("num_open_ul") != 0)( // et cette entrée n'est pas égale à 0
var number_eq = parseInt($.cookie("num_open_ul")-1);
$(".navigation_body").eq(number_eq).show().prevAll("#navigation h2.navigation_head:first").addClass("active_navigation");
}
};
$("#navigation h2.navigation_head").click(function())( // lorsque vous cliquez dessus, cette fonction fonctionnera
if(!$(this).next().is(":visible"))(
$("div.navigation_body").siblings("div.navigation_body").slideUp(500); // si d'autres sont ouverts, ferme tout sauf celui en cours
}
$(this).next("div.navigation_body").slideToggle(500).siblings("div.navigation_body").slideUp(500);
$(this).toggleClass("active_navigation").siblings("#navigation h2.navigation_head").removeClass("active_navigation"); // une classe a été ajoutée à celle ouverte pour changer le style
setTimeout(fncookie, 600); //l'enregistrement lui-même dans les cookies avec un délai, afin que le script ait le temps de terminer son travail avant l'enregistrement (500ms - vitesse, délai - 600ms)
});
function fncookie())( // la fonction d'enregistrement elle-même
var number_open_ul = 0;
var je = 0;
$("div.navigation_body").each(function())(
je++;
si($(this).is(":visible"))(
number_open_ul = je;
}
$.cookie("num_open_ul", number_open_ul, (expire :3, chemin :"/")); // stocker pendant 3 jours pour l'ensemble du site.
});
}
});

Autrement dit, si l'utilisateur ouvre le menu, quitte le site et y revient quelques jours plus tard, le menu restera toujours ouvert pour lui.
Et enfin, il nous reste une petite touche : en fait, les styles CSS. Vous pouvez le faire à votre goût, dans l'exemple j'ai pris un design prêt à l'emploi de l'un des projets

Code : CSS

#la navigation (
marge : 80px automatique ;
largeur : 250 px ;
}
#navigation h2, #navigation h2.navigation_head (
taille de police : 18 px ;
poids de la police : plus gras ;
couleur d'arrière-plan : #ffb6c1 ;
image d'arrière-plan : -webkit-gradient(linéaire,50 % 0,50 % 100 %,color-stop(0%,#ffe9e9),color-stop(100%,#ffb6c1));
image d'arrière-plan : -webkit-linear-gradient(#ffe9e9,#ffb6c1) ;
image d'arrière-plan : -moz-linear-gradient(#ffe9e9,#ffb6c1);
image d'arrière-plan : -o-linear-gradient(#ffe9e9,#ffb6c1);
image d'arrière-plan : dégradé linéaire (#ffe9e9,#ffb6c1);

remplissage : 5px 3px 6px 3px ;
marge : auto ;
position : relative ;
}
#navigation h2.navigation_head:après (
position : absolue ;
à droite : 5px ;
couleur : #550000 ;
contenu : "cssb" ;
}
#navigation h2:hover, #navigation h2.navigation_head:hover (
curseur : pointeur ;
}
.active_navigation(
image d'arrière-plan : -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffb6c1),color-stop(100%,#ffe9e9)) !important;
image d'arrière-plan : -webkit-linear-gradient(#ffb6c1,#ffe9e9) !important;
image d'arrière-plan : -moz-linear-gradient(#ffb6c1,#ffe9e9) !important;
image d'arrière-plan : -o-linear-gradient(#ffb6c1,#ffe9e9) !important;
image d'arrière-plan : dégradé linéaire(#ffb6c1,#ffe9e9) !important;
}
.active_navigation:après (
position : absolue ;
à droite : 5px ;
contenu : "cssd" !important;
}
.navigation_body(
affichage : aucun ;
}
#navigation ul (
marge : 0 ;
remplissage : 0 ;
type de style de liste : aucun ;
}
* html #navigation ul li(
hauteur : 1 % ;
}
#navigation div.navigation_body ul li (
marge gauche : 10 px ;
}
#navigation un (
famille de polices : « Times New Roman » ;
bloc de visualisation;
couleur : #918871 ;
remplissage : 3 px ;
couleur d'arrière-plan : #ffe3e0 ;
bordure inférieure : 1px solide #fff ;
décoration de texte : aucune ;
}
#navigation a:survol (
couleur : #585858 ;
couleur d'arrière-plan : #ffb6cc ;
}

Si quelqu'un l'a remarqué, j'ai essayé ici d'utiliser la propriété content : +/- une fois fermé/ ouvrir le menu, mais vous pouvez ajouter une image ou tout autre motif. Vous pouvez voir un exemple de ce que nous avons trouvé ici

Comme toujours, je suis prêt à écouter les questions et à essayer d'y répondre. Tout le meilleur, tout le meilleur.

Afin d'écrire vous-même la navigation sous la forme d'un menu déroulant vertical dans jQuery avec une liste déroulante de sous-catégories, vous devez comprendre le principe même de fonctionnement de ce mécanisme. Mais d'abord, regardons la structure de navigation :

La navigation

Comme vous l'avez peut-être deviné, notre menu déroulant est basé sur des listes à puces. Lorsque vous survolez un tag

tout ce qu'il contient sera révélé, à savoir :

essai 1
essai 2
essai 3
essai 4

Mais comment, demandez-vous ? Oui, tout est en réalité très simple. Tout d'abord, regardons la feuille de style de notre liste de navigation, elle ressemblera à ceci :

Corps ( arrière-plan : rgb(244, 244, 244 ); famille de polices : Verdana ; poids de police : 100 ; ) /*---Navigation---*/ #menu ( largeur : 200 px ; marge : 0 ; remplissage : 2px; ) #menu li ( type de style de liste : aucun ; ) .menu ( position : relative ; arrière-plan : chocolat ; arrière-plan : -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3) ; arrière-plan : -webkit-linear-gradient(haut, rgb(198, 255, 242), #2AC4B3); arrière-plan : -o-linear-gradient(haut, rgb(198, 255, 242), #2AC4B3); bordure : 1px solide #2AC4B3; ) .menu:hover ( arrière-plan : #00c ; arrière-plan : -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB) ; arrière-plan : -webkit-linear-gradient( haut, rgb(230, 230, 230), #0CBFAB); arrière-plan : -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .menu span (largeur : 11 px ; hauteur : 11px; affichage: bloc; position: absolue; haut: 8px; droite: 10px; curseur: pointeur; ) .menu ul ( largeur: 150px; marge: 0; remplissage: 1px; position: absolue; haut: -1px; gauche: 198px; ) .menu ul li ( arrière-plan : chocolat ; arrière-plan : -moz-linear-gradient (haut, rgb (198, 255, 242), #2AC4B3); arrière-plan : -webkit-linear-gradient(haut, rgb(198, 255, 242), #2AC4B3) ; arrière-plan : -o-linear-gradient(haut, rgb(198, 255, 242), #2AC4B3) ; bordure : 1px solide #fff ; ) .menu ul li:hover ( arrière-plan : #00c ; arrière-plan : -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); arrière-plan : -webkit-linear-gradient(top, rgb( 230, 230, 230), #0CBFAB); arrière-plan : -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); ) .menu a ( remplissage : 5px ; affichage : bloc ; texte- décoration : aucune ; couleur : blanc ; ) .menu a:hover ( couleur : blanc ; ) /*---END---*/

Depuis la feuille de style vous pouvez constater que la liste déroulante n'est pas masquée initialement, mais nous corrigerons ce point en utilisant :

$(document).ready(function())( $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")" ) ; $("#menu li").hover(function())( $(this).children("ul").show(); /*Équivalent à $("ul", this).show() ;*/ $(this).find("span").css("background", "url("right.png")"); /*Équivalent à $("span", this).css("background ", "url ("right.png")");*/ ),function())( $(this).children("ul").hide(); /*Équivalent à $("ul", this ).hide(); */ $(this).find("span").css("background", "url("down.png")"); /*$("span", this).css ("arrière-plan", " url("down.png")");*/ )) ))

Examinons maintenant en détail le code jQuery du menu déroulant, car... Peut-être que cela ne sera pas tout à fait clair pour certains. Au tout début s’écrit la construction suivante :

$(document).ready(function())( ))

Il spécifie les commandes qui doivent être exécutées une fois la page complètement chargée. Cela a été fait pour que divers types d'erreurs n'apparaissent pas lorsqu'il est impossible de trouver un objet car il n'est tout simplement pas encore chargé.

$(".menu ul").hide();

Que signifie cette entrée ? La construction « $() » vous permet de sélectionner des éléments. Par conséquent, au tout début, nous devons masquer notre liste déroulante. Nous prenons la construction « $() » et y écrivons l'objet qui nous intéresse. Dans notre cas, cet objet sera une liste à puces avec la classe « menu ». Ensuite, nous écrivons la méthode « hide() », qui nous permet de masquer l'objet qui nous intéresse.

$(".menu span").css("background", "url("down.png")");

Que fait-elle? Il recherche une balise dont l'élément parent reçoit la classe « menu » et, à l'aide de la méthode « css("background", "url("down.png")")", attribue à la propriété de style "background" la valeur " url("down. png")". "down.png" est une icône indiquant que la liste peut être développée.

Vient ensuite la construction qui va élargir notre liste, elle ressemble à ceci :

$("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function())( $(this).children("ul").hide(); $(this).find("span").css(" arrière-plan" , "url("down.png")"); )

Nous recherchons une balise dont l'élément parent est affecté à id="menu". Vient ensuite la méthode "hover" et deux fonctions entre parenthèses. La première fonction sera exécutée lorsque la souris sera survolée, et la seconde sera exécutée si le curseur de la souris quitte l'élément qui nous intéresse.

La première fonction dit :

$(this).children("ul").show(); $(this).find("span").css("background", "url("right.png")");

La construction « $(this) » signifie que l'on s'intéresse à l'élément sur lequel on survole actuellement (this de l'anglais this). Et on a survolé la balise

. Ensuite, en utilisant la méthode « children("ul) », nous recherchons une balise imbriquée dans la balise et l'affichons à l'aide de la méthode « show() ».

Après cela, nous recherchons les descendants de la balise, à savoir : la balise et changeons son arrière-plan en une autre icône.

Après cela, une fonction est écrite qui fait tout comme à l'origine, une fois que le curseur de la souris quitte l'élément de liste :

Function())( $(this).children("ul").hide(); $(this).find("span").css("background", "url("down.png")") ; )

Pour que le code écrit dans jQuery fonctionne et que notre menu déroulant fonctionne correctement, vous devez télécharger la bibliothèque depuis jquery.com et la connecter en écrivant la ligne après la balise d'ouverture.

OK, c'est fini maintenant ! En conclusion, je voudrais noter que si votre site est assez lourd, alors peut-être que le script se lancera trop tard (le site mettra beaucoup de temps à se charger) et les utilisateurs verront comment il s'ouvre d'abord complètement et ensuite se cache, ce qui , voyez-vous, c'est très moche. Il est donc nécessaire de déplacer toutes les commandes jQuery derrière cette construction : « $(document).ready(function()()) ». Il ressemblera à ceci:

$(document).ready(function())( )) $(".menu ul").hide(); $(".menu span").css("background", "url("down.png")"); $("#menu li").hover(function())( $(this).children("ul").show(); $(this).find("span").css("background", " url("right.png")"); ),function())( $(this).children("ul").hide(); $(this).find("span").css(" arrière-plan" , "url("down.png")"); ))

La connexion de notre script doit être déplacée de la balise jusqu'à la toute fin, avant la balise de fermeture, ou vous pouvez connecter le script immédiatement après la liste à puces.

(téléchargements : 314)

De nos jours, les menus de navigation jQuery sont plus que de simples blocs de texte contenant des liens. Dans j'ai expliqué comment vous pouvez utiliser JQuery et CSS3 pour créer un menu de navigation vraiment cool.

En utilisant la puissance de JQuery, nous pouvons transformer le menu de navigation en un menu dynamique. Alors que vous ne pouvez actuellement utiliser CSS3 que pour créer une navigation dynamique, JQuery rend les menus encore plus puissants.

Outre les fonctions dynamiques, le design joue également un rôle important. Ne serait-ce que parce que c’est ce que les visiteurs voient en premier lorsqu’ils accèdent à votre site.

Si le menu n’est pas présentable, cela offrira aux utilisateurs une mauvaise expérience utilisateur. Bon design Le menu augmentera à son tour la qualité de votre site et offrira une meilleure expérience utilisateur.

Aujourd'hui, je vous présente 30 excellents exemples de menus de navigation jQuery.

1.Pushy

Pushy est un menu de navigation réactif et sans canevas utilisant des transformations et des transitions CSS. Cela fonctionne très bien sur appareils mobiles. Assurez-vous de regarder la démo et vous l'aimerez certainement.

Démo | Télécharger

2. Moulant

Ceci est un autre excellent menu jQuery pour créer de belles listes de navigation déroulantes. Son trait distinctif est la petite taille des fichiers sources.

Démo | Télécharger

3. Menu contextuel jQuery

Il s'agit d'un simple menu contextuel réactif avec très fonctionnalités intéressantes. Lorsque vous cliquez sur l'icône de menu, une fenêtre de menu avec des icônes d'éléments apparaît. Découvrez la démo.

Démo | Télécharger

4. Barres coulissantes

Slidebars est un framework JQuery permettant d'implémenter rapidement et facilement des styles d'application sans être lié à un canevas. Les barres de défilement gèrent également les changements d'orientation et le redimensionnement.

Démo | Télécharger

5. Menu carré jQuery

Menu JQuery, qui affiche un menu de site Web carré animé utilisant JQuery et CSS3. Assurez-vous-en en regardant la démo.

Démo | Télécharger

6. Navigation dans la vue de page en perspective

Ce menu de navigation jQuery transforme une page en menu 3D. L'idée est de créer un design application mobile, dans lequel lorsque vous cliquez sur l'icône de menu, le contenu de la page est décalé sur le côté et le menu est mis au premier plan.

Démo | Télécharger

7. Navigation fluide

Plugin pour créer un menu jQuery mobile réactif avec plusieurs niveaux et des paramètres flexibles mais simples. Compatible avec différents navigateurs, la navigation à l'aide du clavier est possible.

Démo | Télécharger

8. Menus

Menu jQuery pour les applications avec et sans liaison au canevas avec sous-éléments contextuels. Grâce à de nombreuses options, modules complémentaires et extensions, une personnalisation très flexible des menus est possible.

Démo | Télécharger

9. Sidr

Plugin jQuery pour créer des menus et ajout simple fonctions adaptatives. Avec Sidr, vous pouvez créer divers éléments de votre site Web, ainsi que des menus réactifs.

Démo | Télécharger

10. menu mince

slimMenu est un petit plugin jQuery qui vous aidera à développer des menus de navigation réactifs à plusieurs niveaux. Ce qui est cool, c'est que vous pouvez avoir plusieurs menus différents et ils seront tous complètement réactifs.

Démo | Télécharger

11.Nav horizontale

Menu de navigation jQuery, qui vous permet de définir un menu horizontal sur toute la largeur du conteneur. Ce plugin rend les choses très simples. De plus, la prise en charge d'IE7 peut être implémentée.

Démo | Télécharger

12.FlexNav

Il s'agit d'un premier exemple mobile d'utilisation de requêtes multimédias et de JavaScript pour créer de superbes menu à plusieurs niveaux avec le soutien écrans tactiles, effets de survol et navigation au clavier.

Démo | Télécharger

13. Menu jQuery-Objectif

Menu jQuery qui déclenche des événements lorsque la souris survole un élément du menu déroulant. Idéal pour créer des menus déroulants réactifs comme ceux d'Amazon.

Démo | Télécharger

14. Menus intelligents

Un plugin de menu jQuery qui offre un moyen simple et intuitif d'afficher les menus. Crée des listes de menus réactives. Fonctionne sur tous les appareils !

Démo | Télécharger

15. Manette de vitesse

Shifter est un plugin jQuery mobile facile à utiliser pour créer des menus coulissants qui glissent du côté droit lorsque vous cliquez sur le bouton de commutation. Il n'y a qu'une seule option maxWidth à configurer. Il vous permet d'ajuster la résolution/orientation des appareils mobiles.

Démo | Télécharger

16.Hamburger

Hamburger est un plugin jQuery permettant de créer un menu coulissant de style application Android qui place un menu contextuel sur le bord droit de l'écran. Lorsque le menu est agrandi en taille réelle, il chevauche la zone de contenu, mais pas la barre d'action.

Démo | Télécharger

17. Focus

Focucss est un menu de navigation jQuery qui crée un menu de barre latérale non-canvas avec des fonctionnalités de flou intéressantes qui peuvent vous aider à attirer l'attention des utilisateurs sur les sections principales du site et à rendre les sections moins visibles moins visibles.

Démo | Télécharger

18. Tiroir

Drawer est un plugin jQuery permettant de créer un menu réactif et animé qui apparaît sur le côté de l'écran lorsque vous cliquez dessus. Vous avez peut-être vu des fonctions similaires dans les applications Android.

Démo | Télécharger

19.Menu de données

Datmenu est un menu réactif jQuery premium avec diverses fonctionnalités d'animation CSS3. Ce qui est génial avec ce plugin, c'est la possibilité de personnalisation complète en utilisant les options js.

Démo | Télécharger

20. jPanelMenu

jPanelMenu est un menu jQuery magnifique et moderne qui vous permet de créer un menu de navigation de panneau avec des fonctionnalités de transition d'animation CSS3. Le style de jPanelMenu ressemble à versions mobiles Facebook et Google. Le plugin peut être utilisé pour une variété d’applications mobiles.

Démo | Télécharger

21. Menu latéral volant

Fly Side Menu est un plugin de menu de navigation sympa qui utilise CSS3 pour créer menu latéral avec des transformations et des transitions 3D.

Démo | Télécharger

22. Plugin de menu jQuery PageScroll

PageScroll est un menu jQuery mobile personnalisé recommandé pour une utilisation sur n'importe quel site Web ainsi que sur les pages de destination.

Démo | Télécharger

23.Menu d'icônes DD

DD Icon Menu est un plugin jQuery qui vous permet de créer un menu vertical d'icônes situées sur le bord de l'écran avec des sous-éléments de menu qui se développent au survol.

Démo | Télécharger

24. Navigation par date mobile JQuery

Menu jQuery qui vous permet de naviguer par dates dans une plage sélectionnée (semaine, mois ou année). Idéal pour demander des informations à l’aide d’appels AJAX.

Démo | Télécharger

25. Navire

Plugin de menu de navigation jQuery qui facilite grandement la création menus mobiles. Utilise les transitions CSS pour définir la position du menu sur les appareils mobiles.