PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 02/11/2017 01:14:29

Gasbé
Membre
Inscription : 13/03/2017
Messages : 40

Astuce pour ajouter une couleur aux liens actif du menu

Bonsoir,
Je cherchais depuis pas mal de temps maintenant à mettre en place un moyen qui indique dans le sous-menu de mon menu, une couleurs différente
pour indiqué la page en cours de lecture, en gros ça donne une indication visuel du lien actif dans le menu et vue que pluxml est un cms dynamique avec plusieurs page php ça me paraissait un peu compliqué mais en fait pas tant que ça et du coup je vous partage la méthode pour ceux qui ont un menu déroulant avec des sous menu si ça peut vous être utile :

Le menu déroulant dans header.php (si vous avez un menu déroulant, il devrait ressembler à peu près à ça:

[== PHP ==]
<ul id="menu-main-nav" class="nav-menu">
	<!--Home -->
		<li id="menu-item-16" ><a title="Accueil" href="<?php $plxShow->racine() ?>">Home</a>
		</li>
							
        <!--CATEGORIE 1 -->	
    <li id="menu-item-48" ><a title="CATEGORIE 1" href="#"><?php $plxShow->lang('CATEGORIE 1'); ?></a>
	  <ul class="sub-menu">
		<li> <a href="http://www.monsite.com/index.php?article1/lelien1a" title="Lien 1-A">LE LIEN 1-A</a></li>
		<li> <a href="http://www.monsite.com/index.php?article9/lelien1b" title="Lien 1-B">LE LIEN 1-B</a></li>							
		<li> <a href="http://www.monsite.com/index.php?article7/lelien1c" title="Lien 1-C">LE LIEN 1-C</a></li>
	</ul>
    </li>
						 
       <!--CATEGORIE 2 (pas de sous-menu ici)-->
     <li id="menu-item-48" ><a title="CATEGORIE 2" href="http://www.monsite.com/index.php?article6/categorie2"><?php $plxShow->lang('CATEGORIE 2');?></a>
     </li>
						 
   <!--CATEGORIE 3 -->
   <li id="menu-item-48" ><a title="CATEGORIE 3" href="#"><?php $plxShow->lang('CATEGORIE 3'); ?></a>
	<ul class="sub-menu">
	    <li><a href="http://www.monsite.com/index.php?article4/lelien3a" title="Lien 3-A">LE LIEN 3-A</a></li>
	    <li><a href="http://www.monsite.com/index.php?article10/lelien3b" title="Lien 3-B">LE LIEN 3-B</a></li>
	    <li><a href="http://www.monsite.com/index.php?article8/lelien3c" title="Lien 3-C">LE LIEN 3-C</a></li>
	</ul>
   </li>		
       </ul>	

pour que l'effet de couleur s'affiche sur lien actif il faut indiqué la couleur dans la feuille .css de votre thème, donc il faut crée une class, par exemple "active_menu" :

[== CSS ==]
.active_menu {
background: #feba03 ;
}

.active_menu a {
color:#2c2c2c !important;
text-shadow: none !important;
font-weight: bold !important;
font-size: small !important;
text-shadow: 1px 1px 2px #d6d5d5 !important;
}

Admettons que vous avez créer une page qui s'appelle par exemple "article-static-lelien1a.php" et bien ouvez-là dans votre éditeur de texte et ajouté à la 1ere ligne :

[== PHP ==]
<?php $pageCourante = 'article-static-lelien1a.php'; ?>

Maintenant on retourne dans le header.php, au niveau du menu on s'occupe du lien pointant vers "article-static-lelien1a.php" :

[== PHP ==]
 <!--CATEGORIE 1 -->	
  <li id="menu-item-48" ><a title="CATEGORIE 1" href="#"><?php $plxShow->lang('CATEGORIE 1'); ?></a>
	<ul class="sub-menu">
	   <li> <a href="http://www.monsite.com/index.php?article1/lelien1a" title="Lien 1-A">LE LIEN 1-A</a></li>
	   <li> <a href="http://www.monsite.com/index.php?article9/lelien1b" title="Lien 1-B">LE LIEN 1-B</a></li>							
	   <li> <a href="http://www.monsite.com/index.php?article7/lelien1c" title="Lien 1-C">LE LIEN 1-C</a></li>
	</ul>
  </li>

Remplacer :

[== PHP ==]
<li> <a href="http://www.monsite.com/index.php?article1/lelien1a" title="Lien 1-A">LE LIEN 1-A</a></li>

Par :

[== PHP ==]
<li <?php if ($pageCourante=="lelien1a.php") echo 'class="active_menu"'; ?>> <a href="http://www.monsite.com/index.php?article1/lelien1a" title="Lien 1-A">LE LIEN 1-A</a></li>

En gros il faut ajouter cette ligne <?php if ($pageCourante=="lelien1a.php") echo 'class="active_menu"'; ?>  au niveau du <li>  et après, visuelement
quand vous cliquerez sur lelien1a sa vous redirige vers la page pour lire l'article mais dans votre menu il y a une indication de couleurs jaune pour dire qu'on est bien sur cette page...


Bzzzzzzzzzzz

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés