 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-left: 7px;
background:transparent;
border-style: solid; /* Ajout pour simuler un espace entre le menu et le sous-menu */
border-color: transparent;
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-style: solid;
border-width : 10px;
border-color: transparent;
/*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!
|
6573
Re: 2 hacks pour le modules multiMenu 1.9
