Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Réaliser des menus déroulants à partir des menus des pages statiques


Rédigé par jack le 32 commentairese

Dans ce tutorial nous allons voir comment réaliser avec jQuery des menus déroulants à partir des menus et des groupes de pages statiques.

Le thème utilisé est celui de PluXml 5.3.
Les fichiers à modifier sont stockés dans le dossier themes/defaut/ de votre PluXml.

Création des pages statiques

Nous allons dans un premier temps créer des pages statiques pour mettre en place les différents menus.
A partir de la zone d'administration, allez dans la gestion des pages statiques (menu Pages statiques).
Pour la démonstration nous allons créer deux menus Animaux et Planètes de manière à avoir cette arborescence avec les sous-menus suivants:

Menu Animaux:
  • Lion
  • Tigre
  • Léopard
Menu Planètes:
  • Mercure
  • Vénus
  • Terre
  • Mars

Pour créer les menus nous utilisons la notion de Groupe (voir colonne Groupe).
Ainsi pour regrouper les pages Lion, Tigre et Léopard sous le menu Animaux, renseignez les zones de la colonne "Groupe" pour chacune des pages avec la valeur "Animaux".

Faites de même avec le groupe Planètes pour regrouper les pages statiques Mercure, Vénus, Terre, Mars.

Assurez-vous que la valeur des champs de la colonne Active soit sur Oui et que Afficher soit sélectionné dans la colonne Menu.

Modification du thème

Nous allons maintenant modifier le fichier header.php du thème pour mettre en place les portions de code qui vont créer les menus déroulants.

Éditez donc le fichier header.php

Au dessus de la ligne </head>, ajoutez les lignes suivantes pour déclarer la librairie jQuery et le code pour créer les menus déroulants:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
	$('#static-nav > li').bind('mouseover', openSubMenu);
	$('#static-nav > li').bind('mouseout', closeSubMenu);
	function openSubMenu() {
		$(this).find('ul').css('visibility', 'visible');	
	};
	function closeSubMenu() {
		$(this).find('ul').css('visibility', 'hidden');	
	};
});
</script>
Attention: si vous avez des plugins qui utilisent déjà jquery, la ligne qui ajoute la librairie jQuery pourrait ne pas être nécessaire, voir être source de problème si jquery est déjà déclaré d'une autre façon ou à un autre endroit de votre site.

Ensuite, localisez la ligne suivante:

<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>
et remplacez la par:

<?php 
	$plxShow->staticList(
		$plxShow->getLang('HOME'),
		'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>', 
		'<a href="javascript:void(0)" class="#group_class">#group_name</a>'
	); 
?>	
Nous avons ici utilisé le troisième paramètre de la fonction staticList() afin d'afficher les groupes des pages statiques, de manière à générer le code html suivant:

<ul id="static-nav">
	<li id="static-home"><a href="http://localhost/PluXml/" class="active" title="Accueil">Accueil</a></li>
	<li>
		<a href="javascript:void(0)" class="static group">Animaux</a>
		<ul id="static-animaux">		
			<li id="static-1"><a href="http://localhost/PluXml/index.php?lion.html" class="noactive" title="Lion">Lion</a></li>
			<li id="static-2"><a href="http://localhost/PluXml/index.php?tigre.html" class="noactive" title="Tigre">Tigre</a></li>
			<li id="static-3"><a href="http://localhost/PluXml/index.php?leopard.html" class="noactive" title="Léopard">Léopard</a></li>
		</ul>
	</li>
	<li>
		<a href="javascript:void(0)" class="static group">Planètes</a>
		<ul id="static-planetes">		
			<li id="static-4"><a href="http://localhost/PluXml/index.php?mercure.html" class="noactive" title="Mercure">Mercure</a></li>
			<li id="static-5"><a href="http://localhost/PluXml/index.php?venus.html" class="noactive" title="Vénus">Vénus</a></li>
			<li id="static-6"><a href="http://localhost/PluXml/index.php?terre.html" class="noactive" title="Terre">Terre</a></li>
			<li id="static-7"><a href="http://localhost/PluXml/index.php?mars.html" class="noactive" title="Mars">Mars</a></li>
		</ul>
	</li>
</ul>
Remarque: cette structure html est une nouveauté de la version 5.3 de PluXml afin de faciliter l'affichage de la hiérarchie des menus, dans l'objectif des créer facilement des menus déroulants avec jQuery.

Il nous reste à ajouter le code css pour mettre en forme les menus déroulants.

Éditez le fichier themes/defaut/css/style.css

A la fin du fichier ajoutez le code suivant:

/* -------------------------- */
/* style des menus déroulants */
/* -------------------- */
#static-nav {
	margin:0;
	padding:0;
	height: 25px; /* hauteur de la barre de navigation */
}
#static-nav li {
	list-style:none;
	float:left;
}
#static-nav li a:link, 
#static-nav li a:visited {
	display:block;
	margin:0;
}
#static-nav li a:hover {
}

/* -------------------- */
/* style des sous menus */
/* -------------------- */
#static-nav li ul {
	position:absolute;
	visibility:hidden;
	margin:0;
	padding:0;
}

#static-nav li ul li {
	display:inline;
	float:none;
	margin: 0;
	padding: 0;
}

#static-nav li ul li a:link, 
#static-nav li ul li a:visited {
	width:auto;
	padding: 2px 30px 2px 5px;
	background-color: #666; /* couleur de fond des sous menus */
}

#static-navli ul li a:hover {
}
Les pages statiques sont maintenant accessibles sous forme de menus déroulants.
Libre à vous de personnaliser l'affichage des menus en changeant la couleur de fonds ou du texte par exemple en jouant avec les propriétés css des menus

Edit: solution en cas de problème si le menu déroulant s'ouvre bien mais impossible d'aller cliquer un sous menu.

Dans le code css ajouté dans le thème de votre site rajouter la ligne z-index: 9999; au niveau du code suivant:


/* -------------------- */
/* style des sous menus */
/* -------------------- */
#static-nav li ul {
	position:absolute;
	visibility:hidden;
	margin:0;
	padding:0;
	z-index: 9999;
}

Pour faire fonctionner les menus déroulants assurez-vous également d'avoir dans le fichier header.php du thème id="static-nav" au niveau de la ligne <ul id="static-nav" class="menu expanded">.

Avec le thème par défaut de PluXml 5.4, vous devrez avoir:


<ul id="static-nav" class="menu expanded">
	<?php 
		$plxShow->staticList(
			$plxShow->getLang('HOME'),
			'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>', 
			'<a href="javascript:void(0)" class="#group_class">#group_name</a>'
		); 
	?>					
	<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
</ul>

DClassé dans : PluXml ,Mots clés : Page statique, Navigation, PluXml, Thème, jQuery

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

32 commentaires

Florian a dit : #1

Bonjour,

J'ai essayé de mettre en place le tuto sur un site en local mais je ne comprends pas pourquoi le menu reste déroulé...
J'utilise le thème suivant : http://forum.pluxml.org/viewtopic.php?id=4208&p=1

J'ai bien suivi le tuto, je n'ai pas ajouté jquery, étant déjà présent dans le thème, mais le menu reste déroulé...

PS : petite erreur dans le code : <?a href="#static_url" class="#static_status" title="#static_name">#static_name<?/a>

Il y a des "?" qui posent problèmes ;)

Stéphane a dit : #2

@Florian :
Bonjour. Remplace également
<ul class="nav navbar-nav navbar-right">
par
<ul id="static-nav" class="nav navbar-nav navbar-right">

PS: Les coquilles dans le code sont corrigées. Merci

Florian a dit : #3

@Stéphane

Merci effectivement ça fonctionne bien mieux !
En tout cas, un tuto bien expliqué et qui fonctionne très bien sur une version par défaut de pluXml sans modifs supplémentaires !

md a dit : #4

Bonjour,

comment dois-je faire pour afficher le groupe Planetes que dans la sidebar sans les autres groupes ?

Stéphane a dit : #5

@md :
Bonjour.
La réponse est peut-être dans cet article: http://goo.gl/39jjvZ

cpalo a dit : #6

Bonjour,

j'ai suivi le tuto.
Le menu affiche bien les pages statiques (sauf celle dans un groupe) et le groupe de pages statiques.
Mais le groupe n'affiche pas le menu déroulant.

Le code dans le header:

<ul id="static-nav">
<?php
$plxShow->staticList(
$plxShow->getLang('HOME'),
'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>',
'<a href="javascript:void(0)" class="#group_class">#group_name</a>'
);
?>
<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
</ul>

Stéphane a dit : #7

@cpalo :
Bonjour. Tu peux m'envoyer tes fichiers de ton theme que je regarde pourquoi cela ne fonctionne pas.

Cpalo a dit : #8

Bonjour

Je suis reparti avec le thème par defaut ( plx.cahue.net) . J'ai essayé avec le script jquery en ligne ou dans le dossier js du thème.
Mais le menu déroulant ne s'affiche toujours pas.

Je t'envoie donc les fichiers

Cordialement

Stéphane a dit : #9

@Cpalo :
Bonjour. Erreur localisée dans le fichier header.php de ton thème:

(document).ready(function() {

au lieu de

$(document).ready(function() {

cpalo a dit : #10

Bonjour

Merci pour cette petite correction.
En repartant d'un pluxml "nu" , le menu a fonctionné sans problème.

Cordialement

Foxbille a dit : #11

Bonjour,
Merci pour cet excellent tuto, très utile.
Malheureusement les sous menus ne fonctionnement pas correctement sous IE8. Bon, ok, je sors...
En fait, il est impossible de cliquer un item de sous menu.
Si quelqu'un a une idée, je suis preneur, car les pages sont sur un intranet et je ne maitrise pas le choix du navigateur des postes de travail.
Bien cordialement
Eric

Stéphane a dit : #12

@Foxbille :
Bonjour Eric.
Je n'ai meme pas un IE8 sous la main pour chercher une solution. ça va donc être difficile pour moi de te proposer quelque chose. Désolé.

PPmarcel a dit : #13

Bonjour Stéphane,

Crois-tu que l'on peut imbriquer plus de sous-menus ensemble ? Mon but serait d'obtenir 3 niveaux : "niveau 1">"niveau 2">"niveau 3".

Cordialement,
Matthieu

Seriall75 a dit : #14

Bonjour et merci pour ce tuto !

Je l'ai appliqué sur la derniere version de PluXml et cela fonctionne a moitié.

J'ai bien le menu déroulant, quand je passe la souris dessus il s'affiche correctment, je peux cliquer sur le premier sous-menu mais pas les autres. Si je veux cliquer sur le deuxieme sous menu, le menu se referme.

Une solution?
Merci :)

admin a dit : #15

@Seriall75 :
Je vais reprendre le tuto et contrôler si tout est encore d'actualité.

admin a dit : #16

@Seriall75 :
J'ai mis à jour l'article avec la solution pour faire fonctionner les menus déroulants (cf en bas de l'article)

Franck a dit : #17

Bonsoir,
Sur un PluXml 5.4 avec le thème par défaut personnalisé, j'ai littéralement copier/coller les éléments du tuto, tout fonctionne impeccable. Merci !

admin a dit : #18

@Franck :
Bonjour Franck; Merci pour ce retour

Franck a dit : #19

@admin:
Avec d'autant plus de plaisir que, comme expliqué ici : http://pluxopolis.net/deplacer-le-menu-blog.html, on peut aussi placer le menu Blog en ajoutant un paramètre qui indique le rang souhaité pour le menu :

<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>','<a href="javascript:void(0)" class="#group_class">#group_name</a>', 6); ?>

Top!

Sam a dit : #20

Bonsoir et grand merci,
J'ai testé de tuto avec la dernière version 5.4 de Pluxml, ok sur chromium (Ubuntu), mais j'ai du commenter la ligne "12 | float:left;" car mon firefox 42.0 (Ubuntu) décalait le contenu de la balise <main> en l'alignant à droite du contenu du dernier <li> contenu dans la balise <nav>. Je vais continuer à tester sous des navigateurs windows (IE et chrome) demain.
La suppression de "12 | float:left;" n'a semble-t-il pas perturbé chromium.
Bonne continuation,
Samuel

admin a dit : #21

@Sam :
Bonjour. Merci pour ce retour d'expériences

Loun a dit : #22

Bonjour,
J'ai testé sur mon site et ça marche très bien merci. Par contre sur mobile, le menu n'est pas cliquable, du coup les visiteurs ne peuvent pas accéder au sous-menu. Avez-vous une idée ? Merci

admin a dit : #23

@Loun :
Bonjour. J'ai cherché une solution mais je n'ai rien trouvé de concluant pour que ça fonctionne. Désolé.

Loun a dit : #24

Bonjour et merci pour votre réponse, j'ai trouvé une solution alternative: J'ai installé le plugin "WDD_mobile_menu" et cela fonctionne sur mobile, contournant ainsi le problème. ^^ Bonne journée à vous.

PEM1977 a dit : #25

Bonjour,

J'ai tenté avec la 5.5 mais ça ne fonctionne pas.
Je pense que c'est normal étant donné que les balises ont changé.

Peut-on avoir une version de code compatible?

Merci

Stéphane a dit : #26

Bonjour
Pouvez-vous svp reprendre le code donné dans l'article et le tester. Des coquilles se sont glissées quand j'ai upgradé le site en PluXml 5.5. Merci

PEM1977 a dit : #27

Merci pour la réactivité.

C'est mieux mais j'ai dû transformer <ul class="menu expanded"> en <ul id="static-nav">
il faut que je trouve où modifier mon espacement entre les entrées du menu.
Les éléments du sous-menu s'affiche bien mais disparaissent quand je veux aller cliquer dessus.

http://garancelebarth.fr/PluXml/

Stéphane a dit : #28

Regarde si tu as bien appliqué la partie expliquée dans le paragraphe "Edit: solution en cas de problème si le menu déroulant s'ouvre bien mais impossible d'aller cliquer un sous menu."

PEM1977 a dit : #29

J'ai oublié de le remettre....
/me part se fouetter avec des orties fraîches.

Cristofoto a dit : #30

Salut,
Et grand merci pour tes explications.
J'ai un problème sur mon site de test,
on peut cliquer sur l'entête du groupe et ça fait un lien vers http://www.cristofoto.fr/pluxviltest/javascript:void(0)
du coup on se retrouve sur une page n'existant pas.

je suis sûr que c'est un petit bug simple à corriger mais je ne vois pas vers où chercher.

Stéphane a dit : #31

Regarde si ton problème ne vient pas de ce bug https://github.com/pluxml/PluXml/issues/174
Soit tu appliques manuellement le correctif, soit récupère la version de PluXml de github pour tester et voir si ça pose toujours le même souci.

Cristofoto a dit : #32

merci, c'est résolu grâce à cette solution.

rFil RSS des commentaires de cet article

Les commentaires sont fermés.

Top