menu à deux lignes...

Joeljoel · août 2015

Bonjour à tous,

J'essaye de créer un menu (dans le header) affichant :
- sur la première ligne : Accueil, "Groupe de pages statiques n°1", "Groupe de pages statiques n°2", etc.
- sur la deuxième ligne : quand on clique sur "Groupe de pages statiques n°1" la liste des pages statiques de ce groupe n°1, et ainsi de suite...

J'y suis arrivé sur le thème par défaut en créant un menu avec des radio cf code :
dans header.php :

[== PHP ==]
	<nav class="nav" role="navigation">
			<ul class="menu two-line">
				<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>','<label for="#group_id">#group_name</label><input type="radio" name= "static_radio" id="#group_id" >'); ?>
				<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
			</ul>
	</nav>

dans pluccss.css

[== CSS ==]
.two-line input[type=radio] {
	display: none;
}

.two-line ul {
	display: none;
}

.two-line input[type=radio]:checked+ul{
    display: block;
	position: absolute;
}

Cependant... il y'a un mais... cette deuxième ligne disparait lorsque l'on clique sur une autre page statique du même groupe (si j'analyse bien c'est parce-que la page se recharge et on perd donc le "checked" sur mes radio).
Or j'aimerais justement garder cette deuxième ligne pour continuer à naviguer dans ce même groupe.

Si j'ai bien compris le #static_status (de $plxShow->staticList) qui renvoie active/noactive devrait m'aider en cela... mais comme il ne s'applique qu'aux pages statiques je n'arrive donc pas à utiliser ce statut pour appliquer un style css (du type display: block) au groupe parent.

Existe-t-il un moyen de récupérer l'info indiquant si le groupe est actif ou non ? (une sorte #group_status à la manière du #static_status).

Ou quelqu'un aurait une solution pour arriver à garder affichée cette deuxième ligne?

Merci d'avance !

mathieu · août 2015

l'information du groupe actif n'est pas disponible.
donc une solution sans utilisation de JavaScript serait de faire une extension qui modifie l'affichage du menu

tout d'abord modifie le menu pour rajouter une classe CSS comme ça (ajout dans le "input type=radio") :

	<nav class="nav" role="navigation">
		<ul class="menu two-line">
			<?php $plxShow->staticList($plxShow->getLang('HOME')
				,'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'
				,'<label for="#group_id">#group_name</label><input type="radio" name="static_radio" id="#group_id" class="#group_class">'
			); ?>
			<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
		</ul>
	</nav>

code CSS :

.two-line input[type=radio]:checked + ul
, .two-line input.actif + ul
{
    display: block;
    position: absolute;
}

et le plus gros, le code de l'extension

<?php

class MenuGroupes extends plxPlugin {
	
	public function __construct($default_lang) {
		
		parent::__construct($default_lang);
		
		$this->addHook("plxShowStaticListEnd", "plxShowStaticListEnd");
		
	}
	
	
	public function plxShowStaticListEnd() {
		
		echo "<?php";
		?>
			$plxPlugin = $this->plxMotor->plxPlugins->aPlugins["MenuGroupes"];
			$menus = $plxPlugin->traitementMenus($menus, $format_group);
			?>
		<?php
	}
	
	
	public function traitementMenus($menus, $format_group) {
		
		# Affichage des pages statiques + menu Accueil et Blog
		if($menus) {
			foreach($menus as $k=>$v) {
				if(is_numeric($k)) {
					echo "\n".(is_array($v) ? $v[0] : $v);
				}
				else {
					
					// parcours des pages du groupe pour trouver la page active
					$groupeActif = FALSE;
					
					foreach ($v as $vv) {
						if (FALSE !== strpos($vv, "<li class=\"static active\"")) {
							$groupeActif = TRUE;
							break;
						}
					}
					
					$classeGroupe = $groupeActif ? "actif" : "inactif";
					
					$group = str_replace('#group_id','static-group-'.plxUtils::title2url($k),$format_group);
					$group = str_replace('#group_class', "static group $classeGroupe" ,$group);
					$group = str_replace('#group_name',plxUtils::strCheck($k),$group);
					
					echo "\n<li>\n\t".$group."\n\t<ul id=\"static-".plxUtils::title2url($k)."\">\t\t";
					foreach($v as $kk => $vv) {
						echo "\n\t\t".$vv;
					}
					echo "\n\t</ul>\n</li>\n";
				}
			}
			echo "\n";
		}
		
	}
}

Joeljoel · août 2015

Merci beaucoup ! Cela fonctionne parfaitement !

il reste plus qu'à me débrouiller avec les CSS pour rendre ça tout beau

Joeljoel · août 2015

Après avoir un peu plus testé le truc, je me suis rendu compte qu'il y a un souci d'affichage. Lorsque l'on clique sur un groupe (appel par [type=radio]:checked) la liste des pages statiques vient se superposer à celle appelée par .actif.

Donc pour ceux que ça aiderait; la solution que j'ai trouvée est d'utiliser la propriété des boutons radio (un seul bouton peut être actif à la fois) pour gérer l'appel de la deuxième ligne.

Ce qui donne :
Modification du plugin pour renvoyer l’attribut checked/unchecked à la place de la class actif/unactif :

<?php

class MenuGroupes extends plxPlugin {
	
	public function __construct($default_lang) {
		
		parent::__construct($default_lang);
		
		$this->addHook("plxShowStaticListEnd", "plxShowStaticListEnd");
		
	}
	
	
	public function plxShowStaticListEnd() {
		
		echo "<?php";
		?>
			$plxPlugin = $this->plxMotor->plxPlugins->aPlugins["MenuGroupes"];
			$menus = $plxPlugin->traitementMenus($menus, $format_group);
			?>
		<?php
	}
	
	
	public function traitementMenus($menus, $format_group) {
		
		# Affichage des pages statiques + menu Accueil et Blog
		if($menus) {
			foreach($menus as $k=>$v) {
				if(is_numeric($k)) {
					echo "\n".(is_array($v) ? $v[0] : $v);
				}
				else {
					
					// parcours des pages du groupe pour trouver la page active
					$groupeActif = FALSE;
					
					foreach ($v as $vv) {
						if (FALSE !== strpos($vv, "<li class=\"static active\"")) {
							$groupeActif = TRUE;
							break;
						}
					}
					
					$checkedGroup = $groupeActif ? "checked" : "unchecked";
					
					$group = str_replace('#group_id','static-group-'.plxUtils::title2url($k),$format_group);
					$group = str_replace('#group_checked',$checkedGroup ,$group);
					$group = str_replace('#group_name',plxUtils::strCheck($k),$group);
					
					echo "\n<li>\n\t".$group."\n\t<ul id=\"static-".plxUtils::title2url($k)."\">\t\t";
					foreach($v as $kk => $vv) {
						echo "\n\t\t".$vv;
					}
					echo "\n\t</ul>\n</li>\n";
				}
			}
			echo "\n";
		}
		
	}
}

Et modification de la navigation pour le récupérer afin de l'exploiter dans le CSS :

	<nav class="nav" role="navigation">
		<ul class="menu two-line">
			<?php $plxShow->staticList($plxShow->getLang('HOME')
				,'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'
				,'<label for="#group_id">#group_name</label><input type="radio" name="static_radio" id="#group_id" #group_checked>'
			); ?>
			<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
		</ul>
	</nav>

Le CSS reste inchangé à part la ligne

, .two-line input.actif + ul

que l'on peut maintenant supprimer car elle est devenue inutile !

menu à deux lignes...

Réponses