Partage
  • Partager sur Facebook
  • Partager sur Twitter

pointeur de menu

je ne sais pas comment expliquer sa

    13 novembre 2010 à 16:20:31

    Je ne sais pas vraiment comment expliquer sa mais je vais faire du mieux que je peut

    Bonjour,

    Je souhaiterai faire un menu (je suis capable de le faire) qui affiche un signet qui se deplace selon la position de la souris (dans le menu)

    voici une image pour mieux comprendre:
    Image utilisateur
    explication:
    Je suis sur le lien (lien1) et la fleche pointe desus. lorsque je pointe le lien(lien6) je voudrai que la fleche glisse jusqu'a lien(lien6)

    Merci

    Si vous ne comprenez pas mon probleme, passez-moi un url pour que je puisse verifier si c'est bien cela(je me rapelle de l'avoir vu sur un site mais je m'en rappelle vraiment pu du site)
    • Partager sur Facebook
    • Partager sur Twitter
      13 novembre 2010 à 16:39:39

      Tu veux que le curseur soit au centre du lien, ou tu veux qu'il suive exactement la souris ?
      • Partager sur Facebook
      • Partager sur Twitter
        13 novembre 2010 à 16:52:47

        que le curseur soit au centre du lien lorque la souris est sur le menu comportant les liens
        • Partager sur Facebook
        • Partager sur Twitter
          13 novembre 2010 à 17:06:31

          Si je comprends bien : quand la souris pointe explicitement un lien, le pointeur doit se caler horizontalement au centre de celui-ci, et de façon animée. Dans le détail qui sit je traite cette fonctionnalité. Si tu n'as pas besoin d'animation, effectivement, un simple background et une pseudo-class :hover suffitsent.

          - Il faut que tu calcules la position absolue du centre de chaque lien par rapport au menu et que tu l'enregistres, par exemple dans un tableau.

          - Il faut aussi que tu crées une fonction qui déplace le curseur depuis sa position initiale jusqu'à une position donnée, par incrémentation de x pixels à une fréquence définie.

          - Enfin, il faut que tu crées un gestionnaire d'événements mouseover qui actionne cette fonction en passant en paramètre la position attendue, que tu auras récupéré du tableau, en fonction de l'élément survolé.

          Si tu as des problèmes, reviens nous voir.
          • Partager sur Facebook
          • Partager sur Twitter
            14 novembre 2010 à 17:21:37

            Merci Golmote c'était ce principe que je recherchai :)
            Maintenant, il fonctionnne mais je ne suis pas capable de le transformer en vertical :(
            Pouvez-vous m'aider?
            Merci
            Oups! j’allais oublier le code :p
            var menuSlider=function(){
            	var m, e, g, s, q, i;
            	e = [];
            	q = 8;
            	i = 8;
            	return{
            		init:function(j,k){
            			m = document.getElementById(j); e = m.getElementsByTagName('li');
            			var i, l, w, p;
            			i = 0; l = e.length;
            			for(i ; i<l ;i++){
            				var c,v;
            				c = e[i];
            				v = c.value;
            				if(v==1){
            					s = c; w = c.offsetWidth; p = c.offsetLeft
            				}
            				c.onmouseover=function(){
            					menuSlider.mo(this)
            				}; 
            				c.onmouseout=function(){
            					menuSlider.mo(s)
            				};
            			}
            			g = document.getElementById(k);
            			g.style.width = w+'px';
            			g.style.left=p+'px';
            		},
            		mo:function(d){
            			clearInterval(m.tm);
            			var el, ew;
            			el = parseInt(d.offsetLeft);
            			ew = parseInt(d.offsetWidth);
            			m.tm = setInterval(function(){
            				menuSlider.mv(el,ew)
            			},i);
            		},
            		mv:function(el,ew){
            			var l, w;
            			l = parseInt(g.offsetLeft);
            			w = parseInt(g.offsetWidth);
            			if(l != el || w != ew){
            				if(l != el){
            					var ld, lr, li;
            					ld = (l>el)?-1:1;
            					lr = Math.abs(el-l);
            					li = (lr<q)?ld*lr:ld*q;
            					g.style.left = (l+li)+'px'
            				}
            				if(w !=ew){
            					var wd,wr,wi;
            					wd = (w>ew)?-1:1;
            					wr=Math.abs(ew-w);
            					wi=(wr<q)?wd*wr:wd*q;
            					g.style.width=(w+wi)+'px'
            				}
            			}else{clearInterval(m.tm)}
            }};}()
            
            • Partager sur Facebook
            • Partager sur Twitter

            pointeur de menu

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown