Pluxopolis

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

Pages statiques sous forme de menus déroulant en pur css

Rédigé par Stéphane 14 commentaires

Envie d'afficher la liste des menus des pages statiques sous forme de menus déroulants ?

Comme on essaye toujours de faire les choses simples avec PluXml avec un minimun de modification, voici comment réaliser des listes déroulantes à partir des groupes des menus des pages statiques avec uniquement du code css.

Commençons par un petit rappel, en voyant comment utiliser la notion des groupes des pages statiques.

Pour pouvoir afficher des listes déroulantes, il faut regrouper les pages par groupe.
Dans la gestion des pages statiques, sur l'écran d'administration, utiliser la colonne Groupe pour regrouper les pages qui seront visibles dans le même menu déroulant. Le nom du groupe sera le nom du menu déroulant

Une fois que vos pages sont créées et triées (colonne Ordre), reportez les modifications suivantes:

Attention: PluCSS requis.

Éditer le fichier header.php du thème par défaut de PluXml (dossier: themes/defaut/)

Remplacez la ligne


<div class="responsive-menu">
par
	
<div id="dropdown-nav" class="responsive-menu">
Remplacez la ligne

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

Éditez la feuille de style de votre thème. Pour le thème par défaut, ouvrez le fichier theme.css (dossier: themes/defaut/css/)
A la fin du fichier ajoutez les lignes suivantes
	
#dropdown-nav ul li div {
	color: #eee;
	padding: .425rem .7rem;
}
#dropdown-nav ul li {
	position:relative;
}
#dropdown-nav ul ul {
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#f6f6f6;
	border: 1px solid #efefef;
	padding:0;
	z-index: 9999;
}
#dropdown-nav ul ul a {
	color: #444;
}
#dropdown-nav ul ul li {
	float:none;
	width:200px;
}
#dropdown-nav ul ul li.active a {
	background:transparent;
}
#dropdown-nav ul ul li:hover {
	background:#ccc;
}
#dropdown-nav ul li:hover > ul {
	display:block;
}

@media (max-width: 768px) {
	#dropdown-nav ul {
		background:#f6f6f6;
	}
	#dropdown-nav ul li.active {
		background-color: #258fd6;
		width: 100%;
	}
	#dropdown-nav ul li.active a {
		color: #fff;
	}
	#dropdown-nav ul li:hover  {	
		background:#ccc !important;
		width: 100%;
	}
	#dropdown-nav ul li li:hover a {
		color: #fff;
	}
	#dropdown-nav ul ul {
		width: 100%;
		border: none;
	}
	#dropdown-nav ul li div {
		color: #444;
	}
	#dropdown-nav ul li a {
		color: #444;
	}
}
Voilà, c'est fini. Enjoy !

EDIT: 05/07/2016: ajout du code css pour la partie responsive:
@media (max-width: 768px) { ... }

EDIT: 03/05/2017: mise en surbrillance du menu parent des groups de pages statiques:
La structure html des menus déroulant générée par PluXml 5.5 ne permet pas de mettre en subrillance le menu parent des groupes de pages statiques en utilisant que du code css. L'alternative est d'utiliser quelques lignes de javascript.
L'ensemble de ces modifications sont listées ici : fichier texte

14 commentaires

#1  - Dudy a dit :

Bonjour Stéphane
super ton astuce, marche super
bravo!!

Répondre
#2  - Cyrille BORNE a dit :

Salut Stéphane,

j'ai appliqué sur mon blog c'est parfaitement fonctionnel, néanmoins dans la version mobile, c'est quasiment invisible au niveau du choix des couleurs de police de caractère. Un correctif ?

Cyrille

Répondre
#3  - Stéphane a dit :

Je vais regarder ;-)

Répondre
#4  - Stéphane a dit :

Voilà c'est rajouté le code css pour la partie responsive. Voir la partie de code @media (max-width: 768px) { ... }

Répondre
#5  - abramis a dit :

Bonjour,
Merci pour cette astuce qui me rend bien service dans la mise n place de mon petit blog

Répondre
#6  - brieucs a dit :

merci beaucoup pour cette solution pour les groupes. Ca manquait.. Ne sera-t-elle pas bientôt éligible pour faire partie de la distribution standard de PluXml ?

Répondre
#7  - nicomax a dit :

Bonjour Stéphane,
Ton astuce fonctionne parfaitement sur ma version PluXml 5.5
Juste une question : est-il possible de faire en sorte que lorsqu'on clique sur un sous-menu du groupe et donc que la page correspondante s'affiche, le nom du groupe reste highlighté ?
Bien à toi
Nico

Répondre
#8  - Stéphane a dit :

Salut Nico. Avec le thème par défaut de PluXml 5.6 le nom du groupe reste "highlighté". Je vais regarder pour la règle à rajouter pour avoir le même comportement ici si c'est possible.

Répondre
#9  - nicomax a dit :

Bonjour Stéphane, as-tu pu voir si ma demande est réalisable ?
Merci par avance,
Nico

Répondre
#10  - Stéphane a dit :

Bonjour Nico. Désolé je n'ai pas encore eu le temps. J'essaye de faire ça rapidement

Répondre
#11  - Stéphane a dit :

Bonjour Nico
Voilà ce que je te propose:
voir mon --EDIT: 03/05/2017-- rajouté à la fin de l'article, qui présente les modifications à reporter dans PluXml 5.5 pour répondre à ta demande.

Répondre
#12  - nicomax a dit :

Oups !!! Il y a un petit souci :
• Quand maintenant je clique sur une rubrique de mon menu (nom de page non groupé), tout le menu s'affiche dans la couleur de highlight (comme si on avait tout cliqué en même temps).
• Par contre quand je clique sur ma rubrique groupée, ta solution fonctionne parfaitement et ne highlight pas les autres rubriques.

Répondre
#13  - Stéphane a dit :

En effet. Je viens de mettre à jour le fichier texte des modifs avec un correctif au niveau du javascript à rajouter.

var elt = document.getElementsByClassName("static active");
if(elt[0] && elt[0].parentNode && elt[0].parentNode.parentNode) {
if(elt[0].parentNode.parentNode.tagName.toLowerCase() == 'li') {
elt[0].parentNode.parentNode.setAttribute("style", "background-color:#258fd6;color:#fff");
}
}

Répondre
#14  - nicomax a dit :

Génial, un grand merci Stéphane :)
Longue vie à PluXml !

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la cinquième lettre du mot yzijli ?
Top