Menu hover avec effet de mouvement horizontal

1 pièce(s) jointe(s)

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.

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

Voici des extraits de mon code;

Code:

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.

Merci pour le code. C'est top !

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

Post résolu !