Le menu de Freshy

Par Franck, . Lien permanent Dotclear › Thèmes

Vous avez peut-être remarqué que dans le thème Freshy, l'item de menu Accueil était en surbrillance (fond vert) lorsque vous vous trouvez sur la page d'accueil et pas dans les autres cas. Voilà comment obtenir le même fonctionnement sur les autres items de menu, qu'ils soient des liens vers des pages connexes (plugin Related) ou un lien vers une table des matières.

Préparation

Tout d'abord, il faut rajouter une petite fonction dans le fichier prepend.php du thème avec votre éditeur de texte favori. À la fin du fichier (ou là où il vous plaira), mais de toute façon avant la dernière ligne — celle qui contient ?>, rajoutez ces lignes :

# Determine si une page connexe est active
function dcRelatedCurrent($page)
{
	if ((is_callable(array('dcRelatedPages','relatedMode')) && dcRelatedPages::relatedMode()))
		return isset($GLOBALS['related_page']) && $GLOBALS['related_page'] == $page;
	return false;
}

Maintenant notre menu

Imaginons que nous ayons, dans l'ordre :

  • un premier élément intitulé Accueil qui ramène l'utilisateur vers la page d'accueil du blog,
  • un deuxième élément intitulé Sommaire qui fournit un lien vers la table des matières,
  • un troisième élément intitulé "Infos" qui fournit un lien vers une page connexe titrée infos dans le fichier related.ini du plugin Pages connexes,
  • et enfin, cadré à droite, un dernier élément intitulé Contact qui fournit également un lien vers une page connexe titrée contact (toujours dans le fichier related.ini).

Voilà le code correspondant à ce menu :

<ul class="menu">
	<li class="page_item"><a class="first_menu" href="<?php dcInfo('url'); ?>" accesskey="1">Accueil</a></li>
	<li class="page_item"><a href="?toc/toc" title="Infos">Table des mati@egrave;res</a></li>
	<li class="page_item"><a href="?infos" title="Infos" accesskey="8">Infos</a></li>
	<li class="last_menu"><a class="last_menu" href="?contact" title="Contact" accesskey="7">Contact</a></li>
</ul>

Chaque élément du menu (balise <li>…</li>) possède une classe page_item ou last_menu pour le dernier. Pour qu'un de ceux-ci soit mis en surbrillance, il suffit de lui attribuer en plus la classe current_page_item.

Voilà l'exemple de l'item Contact sans classe current_page_item positionné :

Élément de menu normal

Et voilà maintenant à quoi il ressemble lorsqu'on ajoute la classe current_page_item à la balise <li> :

Élément de menu en cours

Comment positionner cette classe supplémentaire en fonction du contexte ?

Prenons les éléments du menu un à un :

Élément Accueil

Pour celui-là, c'est facile car il suffit de tester la valeur de la variable $mode pour savoir si on est sur la page d'accueil. L'insertion de la classe supplémentaire éventuelle se fera avec le code suivant :

<?php echo ($mode == 'home') ? 'current_page_item' : ''; ?>

Les éléments Infos et Contact

Pour ces deux là, qui sont des pages connexes, nous allons utiliser la petite fonction que nous avons collée dans le fichier prepend.php tout au début. Les deux codes nécessaires seront :

<?php echo dcRelatedCurrent('infos') ? 'current_page_item' : ''; ?>

pour la page des informations et

<?php echo dcRelatedCurrent('contact') ? 'current_page_item' : ''; ?>

pour la page contact.

Élement Table des matières

Enfin le dernier ressemble au premier dans la mesure où, la aussi, il suffit de tester la variable $mode. Voilà le code correspondant :

<?php echo ($mode == 'tocHome') ? 'current_page_item' : ''; ?>

Le code complet du menu

Voilà maintenant à quoi ressemble le code complet du menu, une fois insérés les morceaux de code nécessaires (j'ai mis une forte emphase sur ce qui a été rajouté) :

<ul class="menu">
	<li class="page_item <?php echo ($mode == 'home') ? 'current_page_item' : ''; ?>"><a class="first_menu" href="<?php dcInfo('url'); ?>" accesskey="1">Accueil</a></li>
	<li class="page_item <?php echo ($mode == 'tocHome') ? 'current_page_item' : ''; ?>"><a href="?toc/toc" title="Infos">Table des mati@egrave;res</a></li>
	<li class="page_item <?php echo dcRelatedCurrent('infos') ? 'current_page_item' : ''; ?>"><a href="?infos" title="Infos" accesskey="8">Infos</a></li>
	<li class="last_menu <?php echo dcRelatedCurrent('contact') ? 'current_page_item' : ''; ?>"><a class="last_menu" href="?contact" title="Contact" accesskey="7">Contact</a></li>
</ul>

Ensuite ?

Bien sûr je n'ai pas couvert tout les cas possibles, comme par exemple un lien vers un billet particulier ou bien encore l'affichage d'une page gérée par le plugin Galerie, mais il n'y a rien de très compliqué une fois que le système est compris.

Voilà, c'est tout pour aujourd'hui ;-)

Ajouter un commentaire

Les champs suivis d'un * sont obligatoires

Les commentaires peuvent être formatés en utilisant la syntaxe Markdown Extra.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/3036

Haut de page