Menu déroulant

guigui71 · février 2010

Bonjour,

peut on faire un menu déroulant de page statiques comme sur ce site :
http://www.saintmarcel.com/la_commune/actualites.html

Merci.

Hamtaro · février 2010

Oui, ceci est juste du css avec peut être un peu de javascript

Il faut que tu te renseignes autour de ça, tout cela ne dépend pas de Pluxml.

Gzyg · février 2010

C'est du pur Javascript à l'ancienne ce qui veut dire accessibilité = 0

Donc à éviter si possible

Il existe de tels menus en pur CSS, d'autres en jquery ou motools (javascript "accessible").

tape "menu déroulant css" dans ton moteur favori, tu devrais déjà pouvoir en trouver un grand nombre.

à plus,

Gzyg

gcyrillus-nomade · février 2010

guigui71 a écrit:

Bonjour,

peut on faire un menu déroulant de page statiques comme sur ce site :
http://www.saintmarcel.com/la_commune/actualites.html

Merci.

oui , il te faut d'abord creer ton menu en pure html , afin de regler tes probleme ou choix de style et de script.

La structure et le fonctionnement de ton menu de déroulant finalisé et testé , il est temps de passer a l'intégration dans ton theme .

exemple basique :

<div id="test">
 <ul>
<li><a href="/">Accueil</a></li>
<li> Page statiques
<ul>
<?php $plxShow->staticList('','<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>
</ul>
</li>
<li>rubrique
<ul>
<?php $plxShow->catList('','<li id="#cat_id" class="#cat_status"><a href="#cat_url" title="#cat_name">#cat_name</a></li>'); ?>
</ul>
</li>
</ul>
</div>

avec comme css pour le test :

#test ul {margin:0;padding:0;}
#test ul li {float:left; display:inline;padding:5px;position:relative;margin:0 5px;background:gray;width:120px;}
#test ul li li {float:none;display:block;margin:0;}
#test ul ul {position:absolute;display:none;left:0;}
#test ul li:hover ul {display:block;}

GC

guigui71 · février 2010

Merci.

Stéphane · février 2010

Gzyg a écrit:

C'est du pur Javascript à l'ancienne ce qui veut dire accessibilité = 0

Donc à éviter si possible

Il existe de tels menus en pur CSS, d'autres en jquery ou motools (javascript "accessible").

à plus,

Gzyg

Si javascript à l'ancienne = accessibilité 0, pourquoi parler de jquery ou motools qui sont aussi du javascript. Un peu contradictoire, nan ? Je vois pas ce qu'il y a de plus ou de moins accessible dans ces 2 solutions, ça restera des menus déroulants à base de js.

super_g2 · février 2010

ouaip, mais il existe des alternatives qui se dégradent très bien avec jQ et mootools... qui sont bien des librairies JS....
donc peu d'intérêt je te l'accord

enjoy

Gzyg · février 2010

La seule petite différence est qu'avec jquery ou motools (ou autres) le rendu ne sera pas aléatoire selon le navigateur utilisé (c'est la principale qualité de ces librairies que d'uniformiser les rendus) ce qui n'est pas possible avec le javascript du site en question.

Je vous accorde que le mot "accessible" même mis entre guillemets, n'était pas le plus adéquat...

à plus,

Gzyg

Linugis · septembre 2010

Bonjour,

Je suis nouveau sur pluxml et ma demande se rapproche un peut de la demande Gzyg, je poste donc a la suite pour ne pas ouvrir un nouveau topic.

En fait je souhaiterais créer une liste déroulante de pages statiques en fonction de leurs "groupe". Ou dit différemment ne pas avoir une seule liste avec toutes les pages statiques mais une liste pour chaque groupes.

J'ai un peut chercher mais je ne trouve pas de fonction $plxShow qui réponde a ma demande.

Y-a t'il une solution à mon problème ?

merci par avance.

EDIT : Je viens de trouver un post un peut semblable : http://forum.pluxml.org/viewtopic.php?id=1849.
Par contre je ne comprend pas ou rajouter la classe indiqué (Ou comment rajouter une nouvelle classe Pluxml ?).

cpalo · janvier 2013

Bonjour,

je souhaiterai faire un menu horizontal mais uniquement avec des pages statiques, classées elles-mêmes en rubriques.
Je vois bien dans cet exemple comment faire si il y a une seule rubrique.. mais pas pour plusieurs rubriques.

Cordialement

NaBiSs · janvier 2013

Un tel menu peut-être réalisé uniquement en HTML et CSS, les exemples ne manquent pas sur internet.

Je me pose la même question quant à l'intégration d'un tel menu dans PluXML, et je pense effectivement qu'il faut modifier staticList pour pouvoir le générer de façon imbriquée.

Je pense que la solution est de générer une liste à puce imbriquée, de façon à pouvoir en faire ce que l'on veut par la suite en CSS, vertical ou horizontal :

<ul id="nav">

   <li><a href="#">SANS GROUPE</a></li>

   <li><a href="#">GROUPE 1</a>
      <ul>
          <li><a href="#">Lien groupe 1</a></li>
          <li><a href="#">Lien groupe 1</a></li>
      </ul>
   </li>

</ul>

cpalo · janvier 2013

Bonjour,

J'ai déjà réalisé effectivement réalisé ce menu en html et css...
C'était l'intégration de manière dynamique , en particulier lorsqu'on modifie les menus par l'ajout de pages.

NaBiSs · janvier 2013

Oui oui, c'est bien ce que j'avais compris.

NaBiSs · février 2013

Salut,

Si ça peut t'aider, j'ai codé une petite fonction tant bien que mal afin d'afficher le menu statique sous cette forme :

<ul>
      <li><a href ="#">STATIQUE</a></li>
      <li><a href ="#">GROUPE</a>
            <ul>
                    <li><a href ="#">STATIQUE GROUPE</a></li>
                    <li><a href ="#">STATIQUE GROUPE</a></li>
                    <li><a href ="#">STATIQUE GROUPE</a></li>
            </ul>
      </li>
      <li><a href ="#">STATIQUE</a></li>
</ul>

Copie colle cette fonction dans le fichier "class.plx.show.php"

 public function staticListc() {
		$gr_p='';				// variable contenant le précédent groupe traité
		$html='';				// variable contenant l'html a afficher
		$verif=array(); 			// tableau de stockage des groupes de menus traités
		$pages_statiques=array();
		$pages_statiques=$this->plxMotor->aStats;
		$page_active=$this->plxMotor->cible;
			foreach($this->plxMotor->aStats as $k=>$v){
				if($pages_statiques[$page_active]['group']===$v['group']){
					$pointage=' id="selecteur_menu" ';     // à changer suivant CSS
				}
				else{
					$pointage='';
				}
				if ($k==$this->staticId()){
					$point=' id="selecteur_menu" '; // à changer suivant CSS
				}
				else{
					$point='';
				}
				
				if($v['active'] == 1 AND $v['menu'] == 'oui') {
					$lien = $this->plxMotor->urlRewrite('?static'.intval($k).'/'.$v['url']);
					if (empty($gr_p)){
						if (empty($v['group'])){
							$html.= '<li><a href="'.$lien.'"'.$point.'>'.$v['name'].'</a></li>';
						}
						if(!empty($v['group']) && !in_array($v['group'],$verif)){
							$html.='<li><a href=""'.$pointage.'>'.$v['group'].'</a><ul>';
							foreach($this->plxMotor->aStats as $key=>$val){
								if($val['active'] == 1 AND $val['menu'] == 'oui'){
									if ($v['group']===$val['group']){
										$lien = $this->plxMotor->urlRewrite('?static'.intval($key).'/'.$val['url']);
										$html.= '<li><a href="'.$lien.'">'.$val['name'].'</a></li>';
									}
								}
							}
							$gr_p = $v['group'];
							$verif[] = $v['group'];
						}
					}
					if (!empty($gr_p)){
						if (empty($v['group'])){
							$html.= '</ul></li>';
							$html.= '<li><a href="'.$lien.'"'.$point.'>'.$v['name'].'</a></li>';
							$gr_p='';
						}
						if (!empty($v['group'])){
							if ($gr_p === $v['group']){
								// si groupe précédent idem groupe en cours, pas d'action car déjà traité
							}
							if ($gr_p != $v['group'] && !in_array($v['group'],$verif)){
								$html.='</ul></li>';
								$html.='<li><a href=""'.$pointage.'>'.$v['group'].'</a><ul>';
								foreach($this->plxMotor->aStats as $key=>$val){
									if($val['active'] == 1 AND $val['menu'] == 'oui'){
										if ($v['group']===$val['group']){
											$lien = $this->plxMotor->urlRewrite('?static'.intval($key).'/'.$val['url']);
											$html.= '<li><a href="'.$lien.'">'.$val['name'].'</a></li>';
										}
									}
								}
								$gr_p=$v['group'];
								$verif[] = $v['group'];
							}
						}
					}
				}
			}
			if (!empty($gr_p)){
				$html.='</ul></li>';
			}
			echo $html;
	}

Ensuite appelle la fonction dans le fichier header.php (ou ailleurs en fait)

<ul>
	<?php $plxShow->staticListc(); ?>
</ul>

Ne pas oublier de le mettre entre la balise <ul>, j'ai fait comme ça pour pouvoir ajouter manuellement le lien vers le blog avant ou après.

Après le code est moche, c'est certainement faisable avec une fonction récursive mais je ne maitrise pas assez le PHP pour vous proposer mieux.

A+

Stéphane · février 2013

Merci NaBiSs pour l'initiative et le partage

Jos · février 2013

Va falloir que je test cela, çà m'intéresse

Francis · février 2013

Il y a aussi cette méthode, proposée par DanielSan pour PluXml 5.1.6 et qui devrait marcher pour la version 5.1.7 :
http://forum.pluxml.org/viewtopic.php?pid=27705#p27705

danielsan · février 2013

je ne l'ai pas testé en 5.1.7, cette astuce est plutôt une bidouille sans modifier le core et en jouant sur les paramètres proposés

Jos · février 2013

A Priori, je pense que sa doit marcher, à vérifier.

NaBiSs · février 2013

@Stéphane : Merci à toi pour ce projet qui est juste fantastique.

@Francis @danielsan : Effectivement je n'avais pas vu l'astuce de danielsan, sinon j'aurais repris sa base. Peu importe ça a le mérité d'apporter du choix et une approche différente

.

Je l'ai testé un peu plus sur la version de mon site en échangeant et mélangeant les sous-menus, ça semble OK l'ordre est respecté.

Defaz · mai 2013

Bonjour à tous !

Je relance le sujet car j'ai essayé de créer ce menu et l'astuce de danielsan ne fonctionne pas sur mon template... J'ai bien une liste avec les noms des groupes mais la liste des pages statiques n'apparait pas

J'ai repris le code trouvé sur samare.net qui donne ça :

[== PHP ==]
<?php

if ($plxShow->plxMotor->aStats) { // s'il y a des pages statics
	$menu_groupe = array(); // création du tableau des groupes
	$group_name='';

	// étape 1: à partir de la liste des statics, nous allons extraire leur groupe et effectuer un classement par groupe

	foreach($plxShow->plxMotor->aStats as $k=>$v) { // on boucle sur la liste des statics
		if(!empty($v['group']) AND $group_name!=$v['group']) { // si elles sont dans un groupe
			array_push($menu_groupe, $v['group']); // on remplie le tableau des groupes avec tous les noms de groupe existants
		} else {}
	}

	$menu_groupe = array_unique($menu_groupe); // on dédoublonne le tableau
	$menu_groupe = array_flip($menu_groupe); // on inverse les clefs / valeurs
	foreach($menu_groupe as $k=>$v) {
		$menu_groupe[$k] = array(); // on crée un sous tableau pour chaque groupe
	}

	foreach($plxShow->plxMotor->aStats as $k=>$v) { // on boucle sur la liste des statics
		if($v['active'] == 1 AND $v['menu'] == 'non') { // si la page est active et NON-affichée dans le menu ( les statics paramétrées comme affichée dans le menu seront gérées par la fonction staticList de PluXml )
			if($v['group']!="") { // si le groupe existe
				$menu_groupe[$v['group']][$k] = $v; // on rajoute une entrée pour chaque page static dans chaque groupe
			} else {}
		} else {}
	}

	// étape 2: affichage du menu

	foreach($menu_groupe as $k=>$v) { // on boucle sur les groupes
		echo "<li class=\"menu_static_groupe static_groupe_".plxUtils::title2url($k)."\"><a href=\"#\"><span>".$k."</span></a>\n"; // nouvel élément du menu avec le nom du groupe et une class associée
		echo "<ul>\n"; // création d'une liste des statics de ce groupe
		foreach($menu_groupe[$k] as $i=>$j) { // on boucle sur chaque page static du groupe
			$url = $plxShow->plxMotor->urlRewrite('?static'.intval($i).'/'.$menu_groupe[$k][$i]['url']); // formatage de l'url
			// gestion du status
			if($plxShow->staticId()) { // si nous sommes sur une page static
				$idStat = $plxShow->staticId(); // on récupère l'identifiant de la static active
				// on compare cet identifiant avec celui du menu
				if($idStat==intval($i)){ // s'il est égale à celui du menu, le status est actif
					$status = "active";
				} else {
					$status = "no-active";
				}
			} else {
				$status = "no-active";
			}
			echo "<li class=\"".$status."\"><a href=\"".$url."\" title=\"".$menu_groupe[$k][$i]['name']."\">".$menu_groupe[$k][$i]['name']."</a></li>\n"; // création du lien vers la static
		} // fin de la boucle des statics
		echo "</ul>\n"; // on ferme la liste des statics
		echo "</li>\n"; // on ferme l'élément du menu
	} // fin de la boucle des groupes
} else {} // magique ! ^^
?>
		</ul>

Ça coince au moment de la génération de la liste des pages mais je ne vois pas trop ou...

Merci d'avance

danielsan · mai 2013

Bonjour,

as-tu bien joué sur les paramètres des pages statics comme mentionné ?
c'est à dire:
1/ faire partie d'un groupe
2/ active (avec un contenu)
3/ non-affichés dans le menu standard des statics de PluXml

Cordialement,

Defaz · mai 2013

Et voila ou était l'erreur...

danielsan a écrit:

3/ non-affichés dans le menu standard des statics de PluXml

Je n'avais pas saisi que ça prenait les pages non affichées mais dans un groupe.

Maintenant ça fonctionne parfaitement

Merci pour cette réponse rapide

Menu déroulant

Réponses