Discussion :

[castelcerf]

Bonjour,

Je suis en train de refaire mon site en html5 et css3 tout joli, avec notamment un menu horizontal.

Bon l'idée du menu était que lorsqu'on passe la souris sur un bloc de couleur, celui-ci descend et en même temps une flèche qui était au dessus s'éclaire.

Chose merveilleuse après un peu de galère j'ai réussis à faire ce que je voulais.

Mon seul souci c'est que je me retrouve avec mon bout de javascript qui doit se répéter autant de fois qu'il y a d'élements dans le menu.

ce qui donne par exemple pour l'élement numéros 7

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function(){
$('a#menu7').css('cursor','pointer').mouseover(function(){
  $('a#menu7').animate( { top: '0px' }, 150);
  $('#f7').attr('src','squelettes/IMG/fleche_on.png');});	
 
$('a#menu7').css('cursor','pointer').mouseout(function(){
  $('a#menu7').animate( { top: '-14px' }, 150);
  $('#f7').attr('src','squelettes/IMG/fleche_off.png');});
});

je génère mon html avec des boucles SPIP j'ai donc des menu avec des ids variables en fonction du numéros de la rubrique ..

Bref ma question est la suivante, serait il possible dans mon javascript de remplacer mon numéros (ici "7") par une sorte de variable booléen (je crois qu'on dis cela comme ça?) vu que ce sera toujours un chiffre, que j'appelerai par exemple "i".
Et ainsi ne pas avoir à générer X fois ce bout de javascript mais juste 1 seule fois, dans le but d'alléger ma page html ...

Merci d'avance,
cordialement, Castelcerf.

[Bovino]

Utilise une classe unique pour tes menus plutôt que des id.

[SpaceFrog]

première reflexion ...
pourquoi a# ... ???
un id étant unique sur la page #menu ... pas besoin de rajouter le a cela ne fait qu'allourdir et ralentir...

ensuite avec jquery il existe un selecteur "commence par"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('[id ^= 'menu' ])

[Code62]

une sorte de variable booléen (je crois qu'on dis cela comme ça?)

Un booléen c'est true/false, ce dont tu parles c'est un compteur


Et en partant sur l'idée de SpaceFrog, avec un compteur, ceci devrait fonctionner:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    $menus = $('[id^="menu"]');
    for (var i in $menus) {
        $menus[i].css('cursor','pointer').mouseover(function() {
            $(this).animate({ top: '0px' }, 150);
            $('#f'+i).attr('src', 'squelettes/IMG/fleche_on.png');
        });
    }
});