Fork me on GitHub

2 hacks pour le modules multiMenu 1.9

200718
Avril
  satanas Programmation, Hack, ... 6623
Programmation, Hack, ...

Bonjour à tous,

Voiçi deux petits hacks pour la version 1.9 du module multimenu de Solo71.

1) Possibilité de changer les images lors du survol de la souris.

Il est parfois nécessaire de changer l'image d'un bouton de menu lors du survol avec la souris, or actuellement le module Multimenu ne le permettait pas. J'ai utilisé une technique qui minimise les modifications à effectuer sur le module. En effet, il serait possible d'ajouter un champs pour avoir le nom de la seconde image, mais cela nécessite une modification lourde et une procédure de mise à jour.
J'ai alors retenu le principe suivant, j'utilise un petit script téléchargeable à cette adresse: Script rollover et utilise le principe que dans le nom du fichier image il faudra avoir la chaine '_off' et en même temps uploader l'autre fichier avec la chaine '_on'.



Installation du hack:

-) Télécharger le script à cette adresse: Script rollover et recopier le fichier 'chrisdomroll.js' dans le répertoire /modules/multiMenu/script/

-) Modifier le fichier /modules/multiMenu/blocks/multimenu_functions.php à la ligne 176 et remplacer

// Create image
$imenu['image'] = '<img src="'.$image.'" '.$image_width.'alt="'.$alt_title.'" '.$align.' style="vertical-align:middle;" />';
$imenu['imageurl'] = $image;

par
// Create image
// Small hack by Satanas for over images
if(stristr($image'_off') === FALSE) {
     
$imenu['image'] = '<img src="'.$image.'" '.$image_width.'alt="'.$alt_title.'" '.$align.' style="vertical-align:middle;" />';
} else {   
    
$imenu['image'] = '<img src="'.$image.'" class="domroll '.str_replace('_off','_on',$image).'" '.$image_width.'alt="'.$alt_title.'" '.$align.' style="vertical-align:middle;" />';
}
$imenu['imageurl'] = $image;


-) Ajouter au niveau de la template correpondant au type de menu une ligne pour appeler le javascript à la fin de la template
un exemple avec la template multimenu_pic.html
<script language="JavaScript" type="text/javascript" src="<{$xoops_url}>/modules/multiMenu/script/chrisdomroll.js"></script>
<!-- End multiMenu <{$block.mm}> -->


-) Lors de la création d'une entrée du menu, ajouter une image dont le nom contrientra le texte '_on' (ex: mon_image_on.jpg) Sauvegarder l'entrée du menu et la rééditer et ajouter l'autre image qui contriendra le texte '_off' mais donc le reste du nom sera identique (ex: mon_image_off.jpg) et sauvegarder le menu. A ce moment là l'image contenant '_off' sera réellement attribué à l'entrée du menu, mais l'image contenant le '_on' sera aussi dans le répertoire des images du module. Attention que le '-on' et '_off' DOIVENT être en minuscule!!!

Si au niveau du test, la fonctionnalité ne marche pas c'est que soit, vous avez oublié d'ajouter l'appel du script dans la template, soit que les images ne portent pas la chaine '_off' et '_on' ou encore que le nom des 2 images ne correspond pas ( ex: image45_off.jpg et image44_on.jpg)

A noter qu'il faudra dans certains dispositions de menu enlever l'affichage du texte dans la configuration du block du menu.


2) Ajouter un espace entre le menu et le sous-menu dans les menu horizontaux en css

Pour un des projets, j'avais une contrainte graphique d'avoir une image de fond entre le menu horizontal et les sous menu. A première vue un padding du bloc de sous menu aurait été la solution, sans compter que IE ne considère pas ce padding du sous bloc comme faisant partie du bloc, résultat, perte du focus et donc impossibilité de sélectionner une entrée dans les sous-menus!

La solution que j'ai trouvé est avec un border-top transparent, super! Ca marche pour Firefox et Internet Explorer 7, mais pas pour Internet explorer 6 qui ne connait absolument rien du concept de la transparence!! ( sans mauvais jeux de mots!!) Mais j'ai trouvé une parade que je vais vous exposer:

Il faut modifier le fichier /modules/multiMenu/script/08/basic_dd.css pour ajouter un border-top pour l'entrée css suivante
.menuhcss ul li:hover ul {
display:block
position:absolute
top:25px;
text-align:left;
padding-left7px;
background:transparent;  
border-stylesolid/* Ajout pour simuler un espace entre le menu et le sous-menu */
border-colortransparent;
border-width 10px
}

et le fichier /modules/multiMenu/script/08/basic_dd_ie.css pour internet explorer et y mettre l'astuce de la tomate!
/* make the sub menuhcss ul visible and position it beneath the main menuhcss list item */
.menuhcss ul li a:hover ul {
display:block
position:absolute
top:25px
left:2px
border-stylesolid;
border-width 10px;
border-colortransparent;
/*set an unused color to be index color*/
border-color:tomato/*For IE6-*/
/*then remove this indexed color*/
filter:chroma(color=tomato);/*For IE6-*/
}


Voilà, encore deux fonctionnalités supplémentaires pour ce super module!

Note: 10.00 (1 vote) - Noter cet article -

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Aspirant
Inscrit le: 21/01/2006
De:
Contributions: 79
007m Posté le: 18/04/2007 20:04  Mis à jour: 18/04/2007 20:04
 Re: 2 hacks pour le modules multiMenu 1.9
bravo,
A intégrer dans le module officiel !
:xfsuper:
Semi pro
Inscrit le: 21/11/2004
De: Un petit coin de Belgique
Contributions: 826
satanas Posté le: 18/04/2007 21:44  Mis à jour: 18/04/2007 21:44
 Re: 2 hacks pour le modules multiMenu 1.9
petit correctif, le script dans l'archive en lien est dom_image_rollover_hover.js

Apparament il a été renommé.

@burning ma drôle de machine est plutôt terrestre... :banane:
Semi pro
Inscrit le: 04/02/2003
De: Qc.ca
Contributions: 1389
king76 Posté le: 19/04/2007 03:06  Mis à jour: 19/04/2007 03:06
 Re: 2 hacks pour le modules multiMenu 1.9
Allo

Moi cela m'arrive à plusieurs reprises de hacker multimenu pour reproduire quelque chose qui me semble essentiel à savoir avoir l'onglet actif d'une entrée du menu quand on est sur le module en cours. Ca peut paraitre con, mais c'est très pratique. Un exemple ici : www.activdons.ca dans le menu de gauche

J'avais souhaité mettre en bleu foncé le lien en cours ainsi que les liens parents, mais impossible ca aurait demandé trop de changement dans la manière dont multimenu est fait, à moins que quelqu'un est la soluce ;)

Merci
Admin Frxoops
Inscrit le: 04/02/2003
De: Belgique
Contributions: 3376
Solo71 Posté le: 19/04/2007 09:32  Mis à jour: 19/04/2007 09:32
 Re: 2 hacks pour le modules multiMenu 1.9
Excellent. J'en prends bonne note pour une version ultérieure de multimenu.

Xoops accro
Inscrit le: 15/07/2004
De:
Contributions: 4763
blueteen Posté le: 20/04/2007 12:28  Mis à jour: 20/04/2007 12:28
 Re: 2 hacks pour le modules multiMenu 1.9
très sympas comme astuces en effet
c'est vrai qu'un champs supplémentaire pour mouseover/image serait pas mal
Semi pro
Inscrit le: 05/02/2006
De: Ile-de-France
Contributions: 523
zorro87 Posté le: 20/04/2007 14:36  Mis à jour: 20/04/2007 14:36
 Re: 2 hacks pour le modules multiMenu 1.9
Un Grand MERCI à Satanas !

Petite correction pour les images : c'est l'image_off qu'il faut mettre par défaut et non pas l'image_on...

Essai fait avec le ficher dom_image_rollover_hover.js

@+
Z
Semi pro
Inscrit le: 21/11/2004
De: Un petit coin de Belgique
Contributions: 826
satanas Posté le: 20/04/2007 18:58  Mis à jour: 20/04/2007 18:58
 Re: 2 hacks pour le modules multiMenu 1.9
Salut,

Je penses que c'était bien expliqué pourtant, l'image '-off' est l'image par défaut de l'entrée du menu
Citation :

-) Lors de la création d'une entrée du menu, ajouter une image dont le nom contrientra le texte '_on' (ex: mon_image_on.jpg) Sauvegarder l'entrée du menu et la rééditer et ajouter l'autre image qui contriendra le texte '_off' mais donc le reste du nom sera identique (ex: mon_image_off.jpg) et sauvegarder le menu. A ce moment là l'image contenant '_off' sera réellement attribué à l'entrée du menu, mais l'image contenant le '_on' sera aussi dans le répertoire des images du module. Attention que le '-on' et '_off' DOIVENT être en minuscule!!!
Régulier
Inscrit le: 09/09/2005
De:
Contributions: 297
tungsten Posté le: 04/11/2007 10:04  Mis à jour: 04/11/2007 10:05
 hack onglet actif pour le modules multiMenu 1.9
Bonjour King76,
moi aussi je cherche cela,
et il me faut une solution pour le 9 novembre,
as-tu trouvé depuis le mois d'avril ?
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

97 Personne(s) en ligne (1 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 97 | Plus ...