jQuery.imageMenu - Edit 2007/11/12
Par Mathieu Delestre le vendredi 29 juin 2007, 12:32 - Scripts - Lien permanent
Pour répondre à la demande d'un collègue graphiste, j'ai developpé un equivalent au script mootools suivant (source PhatFusion) mais basé sur la librairie jQuery.
le résultat me semblant réussi (bien qu'il soit surement possible d'optimiser le code de nombreuse manière) je vous le propose.
Je tiens à signaler que ce script n'est pas obstrusif et que la désactivation du javascript et ou du css ne gène en rien la consultation et l'utilisation du menu
EDIT
- Archive mise à jour avec la release 1.1.3 de jQuery
- suppression de la librairie Interface (récupération de la seul fonction utilisé et inclusion direct dans le code source - amaigrissement de 70Ko ^^)
EDIT 2
- Archive mise à jour avec la release 1.2.1 de jQuery
- Retrait de la fonction StopAll() (jQuery incluant la fonction stop() au comportement similaire)
- Mise à jour du code pour éliminer l'utilisation de fonction dépréciés.
!!! pensez à bien rafraichir votre cache !!!
si vous avez encore la version précédente en mémoire erreurs garanties ^^
Commentaires
Très joli, la gestion des liens et des images de fonds floues ne fonctionnent plus sur IE... ^^
Bonne vacances.
jquery upgradé vers la version 1.1.3.1 et ça fonctionne à nouveau sur IE6+
Apparement un probème dans la gestion de l'opacité été apparu avec la 1.1.3
Merci Anthor pour la remarque
Is there any change for an update to this great script? jQuery is now 1.2.1. Thank you! Please let me know if you intend to update.
Sorry: I want to say "any chance" :) .
Oups I have forgot this addon ^^
An update will be released asap
Ok it's done !
jQuery.imageMenu is now fully functionnal with jQuery 1.2.1
it's not functionnal.
My js debug (Firefox debug) return an error:
console is not defined on line 36!
^^ I forgot to remove a debug line
just remove the "console.debug(...)" line and retry
I update the script immediatly
Salut,
serait t'il possible d'apporter quelque modifications à ton code?
Aucun problème.
Je distribue ça sans aucune restriction alors lachez vous et utilisez comme vous le souhaitez.
Je me suis mal exprimé ^^.
Je débute en Jquery et j'ai écris un code qui fait la même chose que le votre.
Malheureusement mes connaissances en javascript, ne me permet pas encore de l'optimiser.
Si je vous fait parvenir mon code par email, pourriez vous y jeter un coup d'œil (et pourquoi le mettre à disposition avec vos modifications après coup)?
Ah ça non désolé...
Pas que je n'en ai pas envi ou que ça m'embete mais plutot que je n'ai déjà pas beaucoup de temps de gérer ce blog (il suffit de voir le nombre de billet publiés ces derniers temps) alors si en plus je me met à faire de la retouche de code javascript comme ça j'ai plus qu'à me prendre un abonnement chez domino pizza et à me sangler à mon PC
Par contre rien ne t'empêche de publier ton code sur une page d'exemple en ligne et je me ferais un plaisir de voir ce que ça donne et pourquoi pas regarder ton travail d'un peu plus près mais je ne te garanti rien.
Au passage publier des petite bout de ton travail sur le net permet souvent d'avoir des retour d'utilisation ou de détecter des bug insoupçonnés.
++
Je comprend ton point de vue ^^.
J'avais déjà posté le code terminé sur le forum nabble de jquery, mais apparemment personne n'a semblé intéressé.
Vais bien réussir à me dépatouiller tout seul :p.
Bonne continuation.
salut,
tout d'abord, merci pour ton travail
j'utilise ton script pour faire un menu de 910px de long comportant 10 éléments. (910/10 = 91 --- décalage : 309 --- taille de l'image : 400)
Premièrement quand on met les mesures précises, il y a un décalage.
Deuxièmement, parfois quand on passe d'un volet a l'autre, la partie de droite fait un petit décalage vers la gauche puis va vers la droite. Ce qui est vraiment génant à la navigation lorsque les volets repliés font moins de 100px comme dans mon cas.
Peux-tu me dire d'ou viennent les problèmes ? si tu veux voir l'exemple en ligne, envoie moi un mail. Merci et bonne journée
Concernant le problème de taille, je ne vois pas trop d'ou peux venir le problème (par exemple : as tu appliqué des bordure sur via CSS - auquel cas il faut déduire ces bordures sur la taille des éléments)
Concernant l'effet de décalage lors du passage d'un élément à l'autre, c'est tout à fait normal si l'on passe rapidement d'un élément à l'autre sans que l'animation précédente se soit terminé. Dans ce cas les 2 animations élargissement (de l'élément survolé) et rétrécissement (des autres) sont lacé avec un léger décalage et compte tenu du positionnement flottant de tout les bloc il est probable qu'un décalage par la droite de quelque pixel soit visible.
Tu pourra constater que le script d'origine souffre du même problème.
la gestion d'animation multiple de manière synchronisé étant quelque peu délicate à gérer je ne compte pas tenter d'y remédier.
Non je n'ai pas de bordure, j'ai tout essayé, ca ne tombe pas juste.
Pour l'effet de décalage, que j'aille rapidement ou lentement, le décalage reste le meme. J'ai essayé la version de mootools avec les memes images, les memes conditions et ca fonctionne parfaitement sans le moindre décalage....
Mais quand j'utilise jQuery et mootools en meme temps, j'ai des conflits et je n'ai pas le temps de me pencher dessus.
Je crois que je vais donc continuer à utiliser la version jQuery mais le problème pénalise vraiment la navigation car si on ne fait pas attention quand on se déplace d'un volet à l'autre, on passe deux volets en meme temps.....
Merci pour ce joli script, je vais tenter de le mettre en place sur mon site personnel.
Juste une petite question. Je voudrais éviter d'avoir les images floutées (ou alors très peu) car je compte insérer un texte dans l'image.
Est ce que c'est bien "//param 3 = taille de la déformation en pixel" qu'il faut modifier?
non non tu verra que ce sont directement les images qui sont comme ça
pour mon exemple j'ai opté pour une version flouté ou non de chaque élément mais tu peux faire l'effet que tu veux.
OK, je vais déjà tester le code pour voir ce que ça donne alors.
Merci
Re moi ^^
Je n'ai pas encore pu tester ce jouli menu car je n'ai pas d'outil approprié au bureau.
Cela dit j'ai quand même une question qui me trotte dans la tête. Est il possible d'adapter le code pour en faire une menu vertical? On aurait donc "l'ouverture" des images du haut vers le bas au lieu de la gauche vers la droite.
Bah oui ça ne devrait pas poser de problème.
Ce menu fonctionne sur le principe des portes coulissantes (cad un élément dans lequel on fait glisser un autre élément et donc les partie superflu sont masqué )
Donc il suffit de travailler sur les hauteur pour avoir un résultat similaire mais vertical. Le mode de positionnement changera peut être mais il n'y à pas de raison de ne pas y arriver
It's me again
Désolé de faire le squatteur mais je n'arrive pas à faire ce que je veux.
J'ai virer le float:left pour avoir un affichage vertical des <li> mais le mode coulissant reste encore et toujours à l'horizontal. De plus je n'arrive pas à se faire "chevaucher" les images comme à l'horizontal.
Aurais tu une idée pour faire cela? (en espérant avoir été assez clair sur ce que j'essaye de faire)
Pour info, je viens de faire une modification au script pour supporter un index de base et donc "retenir" une sélection, comme dans la version originale de PhatFustion.
C'est posté sur mon blog; voici le permalink:
http://christophe.deliens.be/?p=12
Bonjour,
j'ai voulu tester ce menu mais j'ai mis les balises <ul>......</u> entre des balises <div> avec un alignement au centre et du coup, j'ai un grand rectangle noir à gauche et les images sont en partie cachées sur la droite. J'obtiens ça avec IE mais pas avec firefox.
Aurais-tu une petite solution à me proposer car ça m'aurait vraiment plu d'utiliser ton code :-(
Merci
Boh, désolée pour mon commentaire bidon.
J'aurais bien effacé mon message mais ce n'est pas possible. J'ai réfléchis un peu lol, et c'est résolu...
Merci pour ce super menu!!!
^^ content que tu ais trouvé toute seule
beau travail... bel effet.
y a t il un ,oyen de l'adapter en vertical?
Oui surement il faut revoir un peu la CSS de base et faire en sorte de travailler en height et top au lieu de width et right dans le code du script.
Mais pour le moment je vais laisser à d'autre le plaisir de le faire ^^
Bonjour,
Merci pour votre script !
Il fonctionne très bien a part un petit souci du au fait que mon menu permet de lancer un autre script (jQuery.scrollTo). En effet les balises liens (a) du menu ont une classe pour permettre la navigation (class=panel). Cette classe empêche l'ouverture permanente d'un menu suite à un click.
Auriez vous une idée pour résoudre ce problème svp ?
merci d'avance
voici le site en construction :
http://www.bagdadrodeo.org/v2/index...
lorsque tu bind ton action au click sur le lien
$('a.panel').bind('click',function(e){ ... })
utilise plutot "e.preventDefault()" au lieu de "return false" pour éviter que le comportement de base du lien soit executé
j'ai fait un essai avec
$('a.panel').bind('click',function(e){
e.preventDefault();
$('#wrapper').scrollTo($(this).attr('href'), 800);
});
ça me semble fonctionner
ca fonctionne nickel !
un grand merci a toi !
Bonjour,
j'ai repris ton super menu image pour le site d'un copain et je bloque sur l'url rewritting... apparement il faut le caractère #(dièse) en premier, suivi du numéro du menu
voici le lien : www.elips-batiment.fr
ou le menu fonctionne et reste actif sur la bonne image... ou je passe ma variable de page et l'image du menu correspondante ne reste pas active...
je n'arrive pas à trouver la règle de réécriture pour passer la variable de ma page et le numero du menu..
une idée peut-être ???
en tout cas le rendu est top... beau boulot
Bon en fait j'ai bien regardé du côté du htaccess et y a pas moyen de passer ce #
si je le mets, le serveur ne lit plus ce qu'il y a derrière...
comme je suis pas super calé en javascript, y a pas moyen de faire sans ce dièse ???
merci d'avance
Bonjour john,
Ce que je te conseil c'est de coder ton propre système pour déterminer l'élément à ouvrir en fonction de ta page
tes liens seront des lien tout ce qu'il y à de plus ordinaire et il entraineront ton internaute vers une nouvelle page
Du coup c'est toi qui va devoir gérer l'ouverture d'un élément plutot qu'un autre en utilisant le paramètre "init"
Dans l'exemple dispo sur la page du projet j'ai mis des liens du type #blahblah tout simplement parce que je voulais montrer le comportement du menu sans proposer une véritable navigation
=> $('#menu').ImageMenu({'init':2});
Merci pour la réponse
je vais regarder tout ça
Re-Bonjour !
Je reviens vers toi apres ma demande du 2 fevrier.
Merci bcp pour ton aide, le menu fonctionne mais il me reste juste un dernier petit soucis avec IE8 : j'ai pas mal fouillé et essayé differentes methodes mais je n'arrive pas a me debarrasser d'un contour noir au survol autour des png du menu ! Apparemment c'est un soucis courant avec le survol des png sous IE couplé a une fonction JS...
Merci d'avance si tu as une idée ;-)
Je seche :-(
http://www.bagdadrodeo.org/v2/index...
Pour le coup ce n'est plus lié au script. mais à l'utilisation d'une PNG avec transparence et d'une opacité css (le survol fait passé l'image avec le visuel jaune de transparent à opaque...
2 solutions :
a. ne plus faire d'animation pour le changement => fait un simple hide ou show au lieu de animate
b. remplace tes PNG transparent par une version avec le fond préincrusté (tu peux même passer à du jpeg pour gagner un peu en poids)
il existe peut être d'autre solution mais la ce sont les 2 qui me viennent à l'esprit
NB : la solution "a" peux tout à fait être mise en place uniquement si tu détecte IE 8 ou inférieur
merci pour ta réponse !
alors la solution des gif ou jpg n'est pas possible vu le fond qui a une texture.
j'avais essayé de faire un script uniquement pour IE avec show/hide au lieu de animate mais j'avoue je suis mauvais en JS... : en fait les images hover s'affichaient directement sans les survoler.
voila un de mes tests :
<script type="text/javascript">
$(document).ready(function()
{
$('#menu').ImageMenu({'saveOnClick':true,'keepOpen':false,'init':0,'mouseover':myMouseOver,'mouseout':myMouseOut});
function myMouseOver() {
$('.menuOptionHover').show;
}
function myMouseOut() {
$('.menuOptionHover').hide;
}
});
</script>
Ok j'ai reussi a me débarrasser de ces horribles contours!
Effectivement c'est le fait de jouer sur l'opacité des PNG, j'ai donc utilisé show/hide mais maintenant j'ai un clignotement bizarre au survol...uniquement sur IE
voila mon code :
<script type="text/javascript">
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
$(document).ready(function()
{
$('#menu').ImageMenu({'saveOnClick':true,'keepOpen':false,'init':0,'mouseover':myMouseOver,'mouseout':myMouseOut});
function myMouseOver(elems,options) {
$('.menuOptionHover',elems).stop();
$('.menuOptionHover',elems).show();
}
function myMouseOut(elems,options) {
$('.menuOptionHover',elems).stop();
$('.menuOptionHover',elems).hide();
}
});}
else
$(document).ready(function()
{
$('#menu').ImageMenu({'saveOnClick':true,'keepOpen':false,'init':0,'mouseover':myMouseOver,'mouseout':myMouseOut});
function myMouseOver(elems,options) {
$('.menuOptionHover',elems).stop();
$('.menuOptionHover',elems).animate({'opacity':1},'fast');
}
function myMouseOut(elems,options) {
$('.menuOptionHover',elems).stop();
$('.menuOptionHover',elems).animate({'opacity':0},'fast');
}
});
</script>
si tu as un peu de temps, merci ;-)