Bonjour à tous,

Voilà je souhaite réaliser un menu horizontal avec une petite icône juste en dessous du menu qui, lorsque je clique sur un des liens du menu, se déplace pour venir se placer en dessous du lien cliqué. Je vous joins une copie d'écran pour que vous compreniez mieux: sur l'image l'icône est en dessous de l'onglet "welcome", et si je clique sur "our work" par exemple je veux que l'icône se déplace sous cet onglet.

menu

Je sais comment faire une translation en javascript en partant d'une position définie en pixel jusqu'à une autre position définie en pixel. Pour l'instant voici mon code:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function move() {
 
  var left = 300
 
  function frame() {
 
    left++  
    document.getElementById('small-icon').style.left = left + 'px' 
    if (left == 400) 
      clearInterval(id)
  }
 
  var id = setInterval(frame, 10) 
}
Le problème c'est que mon menu n'a pas une position fixe vu que je veux qu'il soit en permanence centrée quelque soit la taille de la fenêtre, la position des onglets en pixels n'est donc pas fixe.

Je voudrais donc savoir s'il est possible de dire en javascript: position (abscisse) de départ de mon icône = abscisse de l'onglet "welcome"; position d'arrivée = position de l'onglet "our work".

J'espère avoir été clair, n'hésitez à me demander des précisions si ce n'est pas le cas.

Merci d'avance pour votre aide