Menu-Lien avec différents images suivant l'état css

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Bonjour,

je me suis mis sur Drupal il y a une semaine. Et je dois créer un site Internet sur ce CMS.
C'est assez puissant : j'ai créé mon propre template (en me basant sur celui garland )....

Voici mon problème :

J'essaie désespérément de créer un menu avec DES IMAGES POUR CHAQUE ETAT CSS (visited,active,hover..).

Effectuant de nombreuses recherches de modules comme : Nice Menu, Icon Menu,etc.. Je ne trouve pas ce que je cherche.
Actuellement j'ai installé Script Graphic Menu, mais impossible de changer d'image lors de l'état du lien.

Comment créer un menu en image, définissant une image pour le lien(link), une autre image lors que celui ci est "hover" et une autre lors de "active" ???

Je n'aimerai pas coder directement sur ma page.tpl.php un menu qui n'est pas lié à l'administration du site Drupal.

Merci de votre aide, j'espère être assez clair sur ma quetion.

Forum : 
Version de Drupal : 

En background ou pas, peut-importe suivant ta solution.

Mais mes titres des liens ont une typographie particulière, donc le titre "texte" ne sera pas visible. Et j'utilise actullement le menu avec les "primary-link".

si c'est en background alors il te suffit de déclarer des classes css pour chaque état des lien de ton menu primary (c'est un code d'exemple je ne dis pas qu'il marche en l'état c'est a titre indicatif)

#primary li a {
  background: transparent url(images/image1.gif) no-repeat left top;
}
#primary li a:hover {
  background: transparent url(images/image2.gif) no-repeat left top;
}
#primary li a:visited {
  background: transparent url(images/image3.gif) no-repeat left top;
}
#primary li a:active {
  background: transparent url(images/image4.gif) no-repeat left top;
}

Oui, merci ça c'est bon.

Le problème pour moi, c'est justement d'avoir ce code css personnalisé pour chaque lien. Comme chaque image est différente par lien (car la typographie est différente...Je ne peux pas avoir un menu avec un background afficher "accueil" pour tout le menu ;) ), il faudrait avoir une "class" ou un "div" avec une variable à chaque fois.

Et dans le code de base, lors de la création d'un menu chaque LI à la meme class (li.leaf,etc..)

<div id="menu">
  <div id="block-menu-primary-links" class="clear-block block block-menu">
    <div class="content">
      <ul class="menu">
        <li class="leaf first active-trail">
<a href="exemple/node/1" title="Accueil" class=" spritemenu-152active">Accueil</a></li>
<li class="leaf last"><a href="exemple/node/2" title="Présentation">Présentation</a></li>
     </ul>
  </div>
</div>

Alors moi j'ai un truc de goret pour cela, mais qui à l'avantage de toujours fonctionner

Dans le template.php j'ajoute cette fonction :

<?php
function phptemplate_menu_item_link($link) {
 
$options = array(
     
'attributes' => array(
         
'id' => str_replace('/', '-', $link['href'])
      )
  );
  if (empty(
$link['localized_options'])) {
   
$options = array_merge($options, $link['localized_options']);
  }
 
  return
l($link['title'], $link['href'], $options);
}
?>

Le principe est que chaque lien d'un menu formatté par drupal passera par cette fonction pour transformer l'objet lien $link, en code du lien XHTML. Donc j'en profite juste pour récupérer l'href du lien, le transformer en ID css, et voilà.

Si tu veux plus d'info sur comment et pourquoi cette fonction est utilisable, tu peux lire ceci : http://arnumeral.fr/articles/drupal/la-gestion-des-themes-drupal

puisqu'on peut donner les idées sales allons y. Voilà une solution en js ^^

  var menu_elems = $('#primary .menu').children('li');
  
   for(var c=0; c < menu_elems.length; c=c+1){
     $(menu_elems[c]).addClass('element-menu' + c);
   }

Ah oui pas mal celle là :) Ceci dit tu peux faire la même chose que ton script, mais server-side en passant pas phptemplate_menu tout court je crois.

PS: ceci dit la bonne question serait de savoir pourquoi un truc aussi basique n'est pas prévu en standard dans l'IHM de drupal. Ils nous ont mis des tonnes de pimpom sur drupal 7, mais ce truc basique (un id par menu-link), ben toujours pas... On est encore obligé de se coltiner ce genre de hack à la noix. On pourrait faire une belle liste comme cela de tous les hack/modules que l'on ajoute systématiquement à chaque projet que l'on démarre en se demandant à chaque fois pourquoi ce n'est pas dans le core...

Merci pour ce code, en effet cela transforme en ID CSS. Mais je me retrouve vite confronté au problème suivant:

J'ai des liens primary links qui me mènent directement sous une page du sous-menu (un peu comme une redirection) donc problème... Car le lien primaire a un autre nom ET une autre IMAGE, que le lien du sous-menu menant à la meme page.

Exemple du menu créé en IMAGE :

  1. PRESTATIONS(mène sur la page direct > node5)
    1.1 GENERAL(sous-menu, c'est la page node5)

Je me retrouve avec le même ID pour 2 liens, dont l'affichage visuel doit être différent.

Il faudrait alors avoir un numéro ID spécifique pour chaque lien.
Comment faire ? Il me faudrait une function simple et facile rajouter au "li" du menu une variable a chaque fois. Vous en avez ????

Merci de votre aide !

Je ne comprend toujours pas et j'ai tjrs le même problème. Il est étonnant qu'il y'a pas de post concret à ce sujet. :(

A. en appelant le menu via "print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist)" j'arrive à ce résultat (ci-dessous), mais je n'ai pas de sous menu qui s'affiche.

li class="menu-114 first"

li class="menu-115"

...

B. en appelant le menu via " print $left " je n'arrive pas à ajouter une variable dans ces li. La solution donné en dessus peut marcher, mais je me retrouve a chaque fois avec le numéro du node. Chose qui ne me convient pas.

J'ai donc deux solutions, soit :

  • Afficher le sous menu en appelant les primary links comme ceci exemple A. Dans ce cas comment faire pour l'afficher ???

  • Une function avec variable à mettre dans template.php. Dans ce cas, quel code ?