class active dans un menu personnalisé

cpalo · février 2016

Bonjour,

J'ai fait un menu personnalisé qui fonctionne presque sans problème:

[== PHP ==]
<ul 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>', '', 4); ?>
	<?php
		$idCat = '003';
		if(isset($plxMotor->aCats[$idCat])) {
			if($plxMotor->aCats[$idCat]['menu']=='oui' AND $plxMotor->aCats[$idCat]['active']) {
				$id = 'cat-'.intval($idCat);
				$url = $plxMotor->urlRewrite('?categorie'.intval($idCat).'/'.$plxMotor->aCats[$idCat]['url']);
				$name = plxUtils::strCheck($plxMotor->aCats[$idCat]['name']);
				$active = ($plxShow->catId()==intval($idCat)?'active':'noactive');
				echo '<li id="'.$id.'"><a class="'.$active.'" title="'.$name.'" href="'.$url.'">'.$name.'</a></li>';
			}
		}
	?>
	<li ><a href="<?php $plxShow->urlRewrite('?contact') ?>" title="Nous contacter">Nous contacter</a></li>
	<li ><a href="<?php $plxShow->urlRewrite('?search') ?>" title="Recherche">Rechercher</a></li>
</ul>

Le problème que j'ai est que la class active ne fonctionne plus.
C'est à dire lorsqu'une entrée du menu est sélectionnée, celle-ci n'est pas surlignée.

Cordialement

kowalsky · février 2016

Est-ce que tu peux nous copier le css associé à ta classe active ?

cpalo · février 2016

C'est celle de plucss et du theme par défaut.

[== CSS ==]
.menu.expanded li.active a,
.menu.expanded li.active:hover {
    background-color: #258fd6;
    color: #fff;
}

kowalsky · février 2016

Je ne sais pas si ton problème est toujours d'actualité mais je n'arrive pas à reproduire ton souci. J'ai recopié ton code sur un PluXml 5.4 en local et j'ai bien le changement de couleur dans la barre de menu en rapport avec la page qui est active (à part bien sûr pour les deux menus "nous contacter" et "rechercher" puisque tu as fait un simple lien sans classe associée)

(d'ailleurs si tu utilises les deux plugins plxMySearch et plxMyContact, il est plus simple de les faire apparaitre dans le menu via leur configuration respective que de le rajouter à la main)

cpalo · février 2016

Bonjour

J'ai toujours le même problème.
Si dans le menu je n'utilise que cette ligne:

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

Cela fonctionne.
Et si je rajoute ce code pour avoir une catégorie dans le menu:

[== PHP ==]
$idCat = '003';
	if(isset($plxMotor->aCats[$idCat])) {
		if($plxMotor->aCats[$idCat]['menu']=='oui' AND $plxMotor->aCats[$idCat]['active']) {
			$id = 'cat-'.intval($idCat);
			$url = $plxMotor->urlRewrite('?categorie'.intval($idCat).'/'.$plxMotor->aCats[$idCat]['url']);
			$name = plxUtils::strCheck($plxMotor->aCats[$idCat]['name']);
			$active = ($plxShow->catId()==intval($idCat)?'active':'noactive');
			echo '<li id="'.$id.'"><a class="'.$active.'" title="'.$name.'" href="'.$url.'">'.$name.'</a></li>';
		}
	}

Cela ne fonctionne plus; c'est à dire que la catégorie s'affiche bien dans le menu mais le surlignement de l'item actif dans le menu ne fonctionne plus (y compris pour les autres pages statiques).

Pour myContact et mySearch, je suis obligé de faire cela sinon le titre de la catégorie (03 ici) s'affiche en dernier après contact et chercher.

J'utilise la version 5.5

Je vais refaire des essais en reinstallant un pluxml ( au cas où j'aurai créé une classe quelque part qui provoquerait un conflit)

Cordialement

kowalsky · février 2016

Bon, je viens de tout reprendre. A priori ça ne fonctionne pas car tu as placé la classe "active" sur le <a> et non sur le <li>

(cf la première ligne du menu par défaut : <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>.

Remplace :

echo '<li id="'.$id.'"><a class="'.$active.'" title="'.$name.'" href="'.$url.'">'.$name.'</a></li>';

Par :

echo '<li class="'.$active.'" id="'.$id.'"><a title="'.$name.'" href="'.$url.'">'.$name.'</a></li>';

Et tout rentre dans l'ordre.

Par contre ton autre ligne de code solo ne devrait pas fonctionner aussi puisqu'elle est sur la même structure. Cependant j'ai trouvé un truc bizarre en testant de nouveau sur mon PluXml 5.4 local. Quand j'active le plugin myContact, j'ai ce bout de CSS qui s'incruste dans site.css :

[== CSS ==]
.menu.expanded li a.active {
    background-color: #258fd6;
    color: #fff;
}

Où cette fois la classe active est associée au <a> et non plus au <li>, et qui rend le tout fonctionnel... Alors que rien ne s'affiche dans le menu de configuration CSS du plugin (???)

Par contre avec un 5.5 tout neuf et sans plugin, rien ne marche avec ton code complet.

Bref, essaye déjà la correction proposée pour voir si cela fonctionne chez toi

cpalo · février 2016

Je vais remonter au fur et à mesure les resultat des essais.
Je suis donc sur la 5.5 avec 4 plugins ( tinymce, ChamPlus, myContact,mySearch).
Là tout fonctionne donc (surlignement de la page active) y compris Accueil, Contact, Search.
Pour voir le résultat, je vais utiliser le domaine consacré initialement à ma généalogie ( mais pour le moment c'est sommeil...)
[del]http://www.cahue.fr[/del]
et effectivement:
pour les pages statiques, la classe active est affectée à la balise <li>
pour les items Contact, Rechercher et Blog elle est affectée à à la balise <a>

cpalo · février 2016

Bonjour,

Tout fonctionne bien avec le code initial. Je devais sans doute avoir modifié quelque part une partie du css....
Le problème c'est lorsque je code "en dur" des liens de pages statiques pour ordonner les divers items du menu.Sinon si je ne le fais pas, mon menu catégorie se retrouvera en dernier. C'est comment appliquer la class active sur ces liens.

[== PHP ==]

   <?php
		$staticId = '004';
		if(isset($plxMotor->aStats[$staticId])) {
			$url = $plxMotor->urlRewrite('?static'.$staticId.'/'.$plxMotor->aStats[$staticId]['url']);
			$title = plxUtils::strCheck($plxMotor->aStats[$staticId]['name']);
			echo '<li><a href="'.$url.'" title="'.$title.'">'.$title.'</a></li>';
		}
	?> 

<li ><a href="<?php $plxShow->urlRewrite('?contact') ?>" title="Nous contacter">Nous contacter</a></li>

cpalo · mars 2016

Bonjour,

Je bute toujours sur la classe active/noactive pour les liens en "dur".

Extrait du code pour inserer le titre d'une catégorie dans le menu ( billet 5), avec une variable $active

$active = ($plxShow->catId()==intval($idCat)?'active':'noactive');
echo '<li id="'.$id.'"><a class="'.$active.'" title="'.$name

Pour le menu "automatique" de pluxml on utilise la classe #static_status".

Ne serait-il pas possible de les adapter pour une page statique?

clicdroit · septembre 2016

BIG BIZAR

je crois bien être dans le sujet et, pour ce que j'ai essayé, ai la preuve sous les yeux de ce qui est à constater :

quand dans un menu nav est utilisé catList, le css "a active" des liens des catégories en question n'est opérant qu'à partir du moment où il y a au moins deux articles publiés dans cette catégorie ! (version 5.5, thème défaut)

(ce qui n'est indiqué nulle part à ma connaissance, et qui est pour moi incompréhensible et n'a guère de sens, surtout lorsqu'on débute un site, qu'on en travaille la structure et le rendu sans trop de contenu au départ et passe de ce fait toute une matinée à chercher à comprendre où l'on s'est planté dans le code alors que ce dernier est bon - et comme s'il y avait un sous-code... mais de là à savoir d'où cela vient et à quoi c'est dû...)

Pierre · septembre 2016

Pourtant, j'utilise très souvent la fonction catList dans le menu et la liste fonctionne, même avec un seul article dans une catégorie. Un paramètre dans l'admin permet même d'afficher les catégories qui n'ont aucun article.

La confusion vient peut-être de la définition de "active". Une catégorie a un statut actif selon le choix fait dans l'admin tandis que le mot "active" prend une autre définition dans un menu, il indique la surbrillance ou autre choix visuel pour indiquer que nous sommes sur la page qui traite le sujet d'un bouton par rapport à un autre. Si un bouton du genre "liste des catégories" ne génère pas une page, le statut peut être attribué pour le mauvais sujet.

En passant, beaucoup de choses ne sont pas documentées. Par manque de temps, le réparateur de PluXml a le choix d'utiliser son temps précieux pour documenter sans arrêt ou pour effectuer les réparations et améliorations que nous lui indiquons. Il ne faut pas se gêner pour pointer calmement et poliment les endroits où une coquille a été identifiée. Stéphane se fera sûrement un plaisir d'y aller immédiatement. Peut-être était-il en pleine rédaction de documentation...

clicdroit · septembre 2016

Chacun prendra donc acte des possibilités de : faire du hors-sujet, produire (régulièrement) des commentaires à rallonge, se livrer à des lectures interprétatives et connotatives, et considérer d'autres "membres" du forum comme ses larb... employés !

clicdroit · octobre 2016

BIG BIZAR (suite et fin)

quand dans un menu nav est utilisé catList, le css "a active" des liens des catégories en question n'est opérant qu'à partir du moment où il y a au moins deux articles publiés dans cette catégorie ! (version 5.5, thème défaut)

Nouveau constat (différent), ce jour : une catégorie ne comptant qu'un seul article prend bien le style a active

Seule explication plausible à mon niveau zéro :
1. le fait de ne pas construire/modifier le site en local, mais en réel, d'où - peut-être et très hypothétiquement de ma part - des temps-délai de "diffusion de l'info" pour que celle-ci s'imprime jusqu'au serveur de mon hébergeur
2. hébergeur avec lequel des problèmes s'étaient déjà révélés lors des enregistrement/modification réalisés dans l'admin du site (page error), et qui avaient nécessité d'ajouter un code htaccess à la racine du site
3. et à quoi peut aussi éventuellement se greffer la gestion hasardeuse (et/ou capricieuse) du cache de mon navigateur principal Chrome

Voilà donc pour ce qui est [encore toujours] des faits

class active dans un menu personnalisé

Réponses