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 6 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="http://pluxopolis.net/article79/pages-statiques-sous-forme-de-menus-deroulant-en-pur-css#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="http://pluxopolis.net/article79/pages-statiques-sous-forme-de-menus-deroulant-en-pur-css#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) { ... }

6 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

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la dernière lettre du mot aufjn ?
Top