Discussion :

[Dsphinx]

Bonjour,

J'ai un menu horizontal. J'aimerais que lorsque je passe la souris sur un élément, le fond se déplace latéralement sous l'élément sélectionné.

Comment peut-on faire cela en javascript ?

J'ai fais un simple croquis pour mieux comprendre. Le fond vert clair devrait se déplacer latéralement.

Merci.

[SylvainPV]

J'ai fait le même effet sur mon site web

Voici des extraits de 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
16
17
18
19
20
21
22
23
24
25
 
function getPageByLink(a){ return $(a).attr('href').substring(1); }
    function getLinkByPage(page){ return $("#menu a").filter("a[href='#"+page+"']"); }
 
app.slider = {
        elm: $("#slider"),
        back: function(){
            this.goover(getLinkByPage(app.pages.current));
            this.elm.css("opacity","0.75");
        },
        goover : function(a){
            var li = $(a).parent();
            this.elm.css({
                "left": li.position().left,
                "width": li.width(),
                "opacity":"1.0",
                "background-color":"rgb("+app.pages[getPageByLink(a)].color+")"
            });
        }
    };
 
$("#menu").on('mouseout', function(){ app.slider.back(); })
        .find('li a')
        .on('click', function(e){e.preventDefault(); app.pages.load(getPageByLink(this)); })
        .on('mouseover', function(){ app.slider.goover(this); });

Je pense que ça doit être faisable en CSS uniquement, mais ce sera sans doute moins flexible.

[Dsphinx]

Merci pour le code. C'est top !

J'ai trouvé un script Jquery : http://css-tricks.com/jquery-magicline-navigation/

Post résolu !