Message d'avertissement

The subscription service is currently unavailable. Please try again later.

Creer un menu utilisant des images

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 debute avec Drupal, je rencontre un probleme je pense classique mais pour lequel je ne trouve pas de solution.

Je souhaite creer un menu tout simple, utilisant des images et non du texte, car nous utilisons une police particuliere. Pour le moment j'utilise les blocks menus de drupal, sans aucun module additionnel, avec un nom de lien et une balise image dans la description:

<img src="sites/default/files/images/Layer-11.png" alt="logo caroline little" />

Cela fonctionne, mais les images n'apparaissent plus lorsque je navigue dans le site. Probleme de chemin surement? mais comment faire pour voir les images apparaitre partout?

De plus j'aimerais introduire un effet de rollover sur ces images, et afficher de maniere differente la categorie dans laquelle se trouve l'utilisateur.

Y a-t-il des modules Drupal qui permettent de gerer ca facilement? Avez-vous une methode miracle pour m'epargner quelques heures de recherches fastidieuses et probablement infructueuses?? Je pensais aussi a faire tout en CSS, si quelqu'un sait comment faire, qu'il n'hesite surtout pas ;)

Merci d'avance pour toute aide!!

Version de Drupal : 

Moi je prendrais l'option CSS :

#primary .menu-item-1 a {
    background: url(../images/mon_image.png) no-repeat;
    width: 121px;
  text-indent: -9000px;
}

Peut-être qu'il existe un module qui fait cela, mais là c'est assez directe une fois que tu as les class/id CSS;

Merci de ta reponse, la solution CSS me parait bien aussi, mais je ne sais pas vraiment comment "localiser" les elements a styliser...

Quand tu dis

#primary .menu-item-1 a

il s'agit d'un exemple? Quand je regarde le code source de ma page, j'ai quelque chose comme

<div id="block-menu-primary-links" class="block block-menu region-odd odd region-count-3 count-3 with-block-editing"><div class="block-inner">

      <h2 class="title">Primary links</h2>
 
  <div class="content">
    <ul class="menu">

pour le menu, puis une liste de li pour les elements le constituant:

<li class="leaf first"><a href="/col...

En gros comment connaitre les informations dont j'ai besoin?

Un must pour cela : FireFox + l'extension FireBug. Cela t'ajoute une icone "bug" à droite de la barre de status, tu clickes dessus et tu clickes ensuite sur "Inspect". Là avec la souris tu te balades et tu découvres les class/id css utilisés que tu reprends dans ta feuille de style.

Maintenant pour pouvoir disposer d'une classe par item de menu, moi ce que je fais c'est recopier la fonction theme_links dans mon template.php, la renommer en mon_theme_links, et la modifier pour ajouter une classe sur chacun des items de la forme menu-item-1, menu-item-2, etc... Si tu veux passe moi un PM et je te filerais le code de la fonction modifiée.

Super,

je viens d'installer firebug et c'est vraiment tres pratique!! Je regarde comment surdefinir les fonctions, je vois bien ou le faire maintenant mais je ne vois pas du tout comment faire ce dont tu parles. Si tu utilises la meme chose je veux bien la partie de code correspondante en effet! mais au risque de passer pour un boulet, c'est quoi un PM??

PM=Private Message=Message Privé :) Ici par le formulaire de contact.

Mais entre temps j'ai réfléchi (si si :) et tu dois pouvoir tout faire en css (comme souvent :). Sachant que tu as dans les blocs des liens du style :

  <div id='block-machin-bidule' ...>
  <ul>
    <li><a href="..">..</a></li>
    ...
    <li><a href="..">..</a></li>
  </ul>
  </div>

Tu peux "skinner" chaque lien dans ton bloc comme ceci :

#block-machin-bidule li:nth-child(1) a {
   background: url(../images/lien_1.png) no-repeat;
   width: 121px;
   height: 20;
   text-indent: -9000px;
}

#block-machin-bidule li:nth-child(2) a {
   background: url(../images/lien_1.png) no-repeat;
   width: 121px;
   height: 20;
   text-indent: -9000px;
}
...

Super cette règle css mais heu j'ai du mal à croire que ça marche partout ça ?? genre IE 7 ? (évitons de parler de IE6).

Sinon je mettrai ma main à couper qu'il existe un module permettant de définir un id ou des icones par lien de menu mais je ne sais plus son nom...

C'est completement genial comme solution, et j'aimerais beaucoup l'utiliser mais ca ne semble pas vouloir marcher ici, avec la configuration que nous utilisons. Apres rapide recherche il semble que ce soit du CSS3, un peu avant-gardiste pour ce que je dois faire, j'ai peur que ca ne soit pas encore bien gere par la plupart des navigateurs. Peut-etre me contrediras-tu... si tu as deja mis en place cette solution ca m'interesse!

peut être ceci peut au moins t'aider pour les obtenir des ids et des classes qui vont bien bien :
http://drupal.org/project/menu_icons

Et peut être qu'avec un display : none bien placé tu pourrais n'afficher que l'image ?

Sinon un bloc html n'est pas une si mauvaise solution, sauf que avec les cleans url il me semble que tu engendre des disparitions d'images de temps à autres. Quand je mets une images, je mets toujours cela pour être sûr que rien ne bouge :

base_path retrouver la première partie de l'url, path_to_theme retrouve le dossier de ton theme. Du coup ce chemin est flexible et même si tu bouges ton site tes images seront toujours là. Enfin tu évites les disparitions éventuelles sur certains pages de tes images.

Yep mais ça marchera pas, sinon tu penses, il suffit de surcharger le hook_links pour obtenir le même effet que ton module. Là les blocs génère leur propre code XHTML sans passer forcement par un thème; généralement en passant l(...).

Donc pour ce cas précis, comme mon coup du CSS est foireux, je passerais par une petite procédure Javascript/jquery qui ajouterais les id (link-1, link-2, etc.) sur les liens d'un bloc, et ce pour chaque $(.block).

En musique, ça donne le code suivant (c'est un script Drupal de test à coller à la racine genre test.php, et à lancer par http://localhost/test.php).

<?php
 
require('./includes/bootstrap.inc');
 
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
  
ob_start();
?>

<style>
#block-machin-bidule .link-1 {
   color:green;
}
#block-machin-bidule .link-2 {
   color:red;
}

#block-machin-bidule .link-3 {
   color:blue;
}
</style>
<script>
  Drupal.behaviors.myModuleBehavior = function (context) {
  $('.block').each(
     function () {
             $(this).find("a").each(
          function (index) {
                 $(this).addClass('link-'+(index+1));
             }
          );
     });
  };

</script>

<div class='block' id='block-machin-bidule'>
  <ul>
    <li><?php print l("toto","toto")?></li>
    <li><?php print l("tutu","tutu")?></li>
    <li><?php print l("tata","tata")?></li>
  </ul>
  </div>
<?php
 $output
=ob_get_contents();
 
ob_end_clean();
   print
theme('page', $output);
?>

Merci pour toutes ces reponses tres utiles,

J'ai bien envie de tester la derniere solution de Yoran mais malheureusement pour le moment je n'ai pas le temps. Nous avons reussi a faire marcher plus ou moins le menu avec menu_icons, et comme nous avons pas mal de choses a avancer sur divers projet, je reviendrai dessus quand j'aurai plus de temps.

Super, c'est exactement ce qu'il me fallait, creer des images a partir d'une police particuliere. J'ai essaye ca marche bien, et cree de plus une classe que je peux reutiliser dans mes pages css.

Un grand merci :)