Submitted by KamyP on
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.
quand tu parles d’image tu
Permalien Soumis par khtuluu le 16 Juin, 2010 - 16:53
quand tu parles d'image tu veux parler d'image en background sur tes liens ??
En background ou pas,
Permalien Soumis par KamyP le 16 Juin, 2010 - 17:02
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
Permalien Soumis par khtuluu le 16 Juin, 2010 - 17:38
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
Permalien Soumis par KamyP le 16 Juin, 2010 - 18:10
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>
J’ai trouvé ça :
Permalien Soumis par KamyP le 16 Juin, 2010 - 21:02
J'ai trouvé ça : http://drupal.org/node/227607#comment-1113609
Je l'ai ajouté, mais rien ne change. Faut-il faire une manipulation en plus que d'ajouter ce code dans template.php pour avoir un résultat dans le code par rapport au class de LI ?
Merci d'avance pour votre aide.
Problème résolu, il faut
Permalien Soumis par KamyP le 17 Juin, 2010 - 09:08
Problème résolu, il faut rafraichir le thème pour que "template.php" soit pris en compte !
Alors moi j’ai un truc de
Permalien Soumis par Yoran le 17 Juin, 2010 - 09:32
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 :
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
Permalien Soumis par khtuluu le 17 Juin, 2010 - 09:48
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à :)
Permalien Soumis par Yoran le 17 Juin, 2010 - 10:17
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
Permalien Soumis par KamyP le 22 Juin, 2010 - 21:54
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.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
Permalien Soumis par KamyP le 23 Juin, 2010 - 14:28
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 ?