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.
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
- Mercure
- Vénus
- Terre
- Mars
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".
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>
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>'); ?>
<?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>'
);
?>
<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>
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 {
}
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 :
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
@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 ?
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>
@cpalo :
Bonjour. Tu peux m'envoyer tes fichiers de ton theme que je regarde pourquoi cela ne fonctionne pas.
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
@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
@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é.
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 :)
@Seriall75 :
Je vais reprendre le tuto et contrôler si tout est encore d'actualité.
@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 !
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
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
@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
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
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/
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.
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.
Florian a dit : #1