formateur informatique

Sous menus en cascade en Javascript

Accueil  >  Technique  >  Javascript  >  Javascript Astuces  >  Sous menus en cascade en Javascript
Livres à télécharger


Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Inscription Newsletter    Inscription Newsletter
Sujets que vous pourriez aussi aimer :


Sous-menus en cascades

Avec les styles Css et l'appui du code Javascript, nous avions appris à créer des menus avec des sous-menus qui réagissaient au survol de la souris. Désormais, avec le JQuery en soutien du Javascript, quelques styles Css fournis et une construction Html particulière, nous entendons créer des sous-menus en cascade avec un niveau de profondeur sans limite et tout cela, avec une très grande simplicité.

Sous menus en cascades en Javascript, JQuery et CSS

Dans l'exemple illustré par la capture, l'internaute pointe par exemple sur la rubrique Bureautique. Dans le sous-menu qui apparaît, il pointe sur la rubrique Excel. Dès lors, dans le sous-sous-menu qui surgit, il clique sur le terme astuces pour accéder à tous les sujets que ce choix entonnoir offre.



Sources Html, JQuery et CSS à télécharger
Pour la mise en place de cette nouvelle solution et comme toujours, nous proposons de débuter à partir de sources offrant entre autres, les librairies JQuery nécessaires au pilotage de ces menus. La décompression livre le fichier de la page Web. Il est nommé index.htm. Ses ressources l'accompagnent dans les sous dossiers comme les librairies JQuery dans le sous dossier Js et les feuilles de styles dans le sous dossier Css. De plus, un fichier texte nommé stylesJQ.txt est présent à la racine. Il livre les styles Css qui fonctionnent de concert avec la méthode JQuery que nous allons employer. Ces styles font partie des librairies librement fournies sur le Web.
  • Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur Web par défaut,
Esquisse de menus Html avec des listes hiérarchisées

Comme vous pouvez le voir, des données hiérarchisées sont déjà en place sous forme de listes à puces. C'est cette construction Html bien précise qui va permettre à une méthode JQuery de faire la différence entre les catégories pour articuler les menus avec ses dépendances.
  • A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
  • Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
Comme toujours, nous trouvons les références aux feuilles de styles Css et aux librairies JQuery dans la section Head de la page Html :

...
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/mes-styles.css">
<link rel="stylesheet" href="css/les-styles.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>

</head>
<body>
...


Plus bas dans le code Html, les listes des menus et rubriques sont hébergées par un calque d'identifiant menu :

...
<div id="auCentre">
<ul id="menu">
<li><div>Technique</div>
<ul>
<li><div>Javascript</div>

</li>
<li><div>Php</div>

...
...
<li><div>Les Livres</div>
<ul>
<li><div>Access</div></li>
<li><div>CSS</div></li>
<li><div>Excel</div></li>
<li><div>Javascript</div></li>
<li><div>Php</div></li>
<li><div>Word</div></li>
</ul>
</li>
<liclass="ui-state-disabled"><div>Autres</div></li>
</ul>
</div>
...


Cet identifiant du calque parent est important. C'est grâce à lui qu'une méthode JQuery bien spécifique va pouvoir prendre possession de la construction Html qu'il héberge pour la piloter. Des points remarquables sont à souligner dans cette construction Html. Chaque élément parent, inclus dans ce calque d'identifiant menu, est annoncé par une balise li. La section dépendante, soit le sous-menu, est annoncé par une nouvelle balise ul. Elle déclare la nouvelle énumération qui est orchestrée par des balises li successives. A ce stade, le niveau de profondeur s'arrête à deux étages, soit menu et sous-menus. Mais en respectant ce principe de construction, nous pourrons créer autant de niveaux de profondeur que nous le souhaitons. Le JQuery comprendra et articulera les rubriques dépendantes entre elles. Ensemble, nous nous arrêterons au troisième niveau pour ajouter des sous-menus aux sous-menus existants pour créer des sous sous-menus.



Transformer des listes en menus
Dans un premier temps et nous allons le constater, une simple méthode JQuery va permettre de transformer ces listes à puces pour diriger leurs comportements. Mais comme nous l'avons vu à l'occasion de la formation précédente pour créer une boîte de dialogue mobile, ces méthodes JQuery activent des styles CSS qu'elles affectent aux éléments ciblés. Et sans la présence de ces styles, la solution ne sera pas parachevée. Néanmoins, nous allons procéder par étape afin de faciliter la bonne compréhension.
  • Dans la section de script en bas du code Html, ajouter l'instruction JQuery suivante :
...
</div>

<script type="text/javascript" language="javascript">
$("#menu").menu();
</script>

</body>
...


Nous le répétons à chaque occasion, l'alias du dollar permet au JQuery de prendre possession de l'élément Html dont l'identifiant préfixé d'un sharp (#) lui est passé entre parenthèses. Et c'est alors la méthode menu qui oeuvre. Elle ne requiert aucun paramètre.

Cette méthode doit donc articuler les rubriques pour faire respecter la hiérarchie et les liens de dépendances. Mais nous l'avons dit, elle applique des styles Css à cet élément ciblé. Ces styles sont toujours livrés avec ces librairies. Ici, nous en proposons une version allégée. Nous les appliquerons ensuite.
  • Enregistrer les modifications (CTRL + S) puis basculer sur le navigateur Web (ALT + Tab),
  • Ensuite, rafraîchir la page avec la touche F5 du clavier,
Une différence notable est effectivement à observer. Les éléments parents des menus sont regroupés tandis que les éléments enfants des sous-menus sont masqués.

Méthode JQuery pour regrouper les rubriques dans des menus Html

Et si vous pointez sur l'une des rubriques, vous constatez qu'elle se déploie pour laisser place à ses éléments enfants. Mais ces derniers n'apparaissent pas. Tout est une question de mise en forme, de disposition et de comportement que les styles CSS associés gèrent, dès lors que la méthode est enclenchée. Si vous pointez sur une autre rubrique, elle se déploie elle aussi tandis que la précédente se replie. Si vous placez la souris en dehors de la zone d'influence, tous les menus sont à nouveau regroupés.

Comportement des sous-menus en cascade
Nous l'avons dit, ces fameux styles CSS sont livrés gratuitement sur le Web avec les librairies JQuery. Ici, nous en proposons une version épurée concentrée sur la solution des menus avec sous-menus.
  • A la racine du dossier de décompression, double cliquer sur le fichier stylesJQ.txt,
  • Réaliser le raccourci clavier CTRL + A pour sélectionner tous les styles CSS,
  • Puis, réaliser le raccourci clavier CTRL + C pour les copier,
  • Dès lors, double cliquer sur le sous dossier Css pour l'ouvrir,
  • Ensuite, cliquer droit sur le fichier les-styles.css,
  • Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,
  • Après le style h1, coller (CTRL + V) les styles précédemment copiés,
Nous y découvrons notamment tous les styles du type ui-menu. Ce sont eux qui gèrent l'apparence et le comportement des rubriques attenantes aux rubriques parentes. Et nous entendons le vérifier.

...
.ui-menu {
list-style: none;
padding: 0;
margin: 0;
display: block;
outline: 0;
width:150px;
}
.ui-menu .ui-menu {
position: absolute;
}
.ui-menu .ui-menu-item {
margin: 0;
cursor: pointer;
...
  • Enregistrer les modifications (CTRL + S) et revenir sur le navigateur Web,
  • Actualiser le cache avec le raccourci clavier CTRL + F5,
En effet, les styles CSS sont mémorisés dans le cache des navigateurs. Sans action spécifique, ils ne sont pas actualisés entre deux chargements et les modifications ne sont pas prises en compte.
  • Dès lors, pointer sur l'un des menus,
Comme vous pouvez l'apprécier les menus prennent aussitôt vie. Et pour cela, seules quelques petites actions ont été nécessaires. Les rubriques dépendantes se déploient sur le côté. Elles sont mises en valeur au survol de la souris. Certes, il aurait été de bon ton de les associer à des liens cliquables. Mais ici, seul l'aspect technique de la mise en oeuvre nous intéresse.

Menus Css, Javascript et JQuery



Créer des sous sous-menus
Maintenant que l'aspect et le comportement de ce menu Html sont gérés par le JQuery, nous proposons de voir avec quelle simplicité il est possible d'imbriquer de nouveaux sous-menus en cascade. Pour cela, il suffit de suivre les enseignements dictés par la construction de base. Dans la balise li d'une rubrique, il est question de débuter une nouvelle énumération avec une balise ul. C'est ainsi que les sous sous-menus prendront vie.
  • Revenir dans le code de la page Html,
  • Sous la première rubrique Javascript, créer le sous-menu suivant :
...
<li><div>Technique</div>
<ul>
<li><div>Javascript</div>
<ul>
<li><div>Débutant</div></li>
<li><div>Avancé</div></li>
</ul>

</li>
<li><div>Php</div>
...
  • Enregistrer les modifications (CTRL + S),
  • Basculer sur le navigateur Web,
  • Rafraîchir la page Html (F5),
  • Pointer sur la rubrique Technique,
  • Dans le sous-menu qui se déploie, pointer sur la rubrique Javascript,
Menus Html avec plusieurs sous menus en cascade grâce au JQuery

Comme vous pouvez l'apprécier, un nouveau sous menu dépendant apparaît effectivement pour offrir une organisation structurée des informations de navigation.

Ainsi, il apparaît opportun de reproduire le même protocole pour les autres rubriques, sauf pour les livres qui ne proposent pas de dépendances supplémentaires.

...
<ul id="menu">
<li><div>Technique</div>
<ul>
<li><div>Javascript</div>
<ul>
<li><div>Débutant</div></li>
<li><div>Avancé</div></li>
</ul>

</li>
<li><div>Php</div>
<ul>
<li><div>Débutant</div></li>
<li><div>Avancé</div></li>
</ul>

</li>
<li><div>CSS</div>
<ul>
<li><div>Débutant</div></li>
<li><div>Avancé</div></li>
</ul>

</li>
</ul>
</li>
<li><div>Bureautique</div>
<ul>
<li><div>Access</div>
<ul>
<li><div>Débutant</div></li>
<li><div>Avancé</div></li>
<li><div>Astuces</div></li>
<li><div>VBA</div></li>
</ul>

</li>
<li><div>Excel</div>
<ul>
<li><div>Débutant</div></li>
<li><div>Avancé</div></li>
<li><div>Astuces</div></li>
<li><div>VBA</div></li>
</ul>

</li>
<li><div>Word</div>
<ul>
<li><div>Débutant</div></li>
<li><div>Avancé</div></li>
<li><div>Astuces</div></li>
<li><div>VBA</div></li>
</ul>

</li>
</ul>
</li>
<li><div>Les Livres</div>
<ul>
<li><div>Access</div></li>
<li><div>CSS</div></li>
<li><div>Excel</div></li>
<li><div>Javascript</div></li>
<li><div>Php</div></li>
<li><div>Word</div></li>
</ul>
</li>
<liclass="ui-state-disabled"><div>Autres</div></li>
</ul>
...


 
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales



Abonnement à la chaîne Youtube
Partager la formation
Partager sur Facebook
Partager sur Twitter
Partager sur LinkedIn