Effet glissant pour menu en javascript (1kb)

11/06/2008
WebDev et Design Allez aux commentaires

Après le menu en accordéon horizontal, Michael Leigeber récidive et nous sort un effet glissant pour menu en moins d'un kb !

Compatible avec IE6, IE7, Firefox, Opera, et Safari !

Allez, voici la 1ère demo et la 2ème demo !

Mise en place

1. On inclut script.js dans la page entre les balises HTML <head> et </head>

<script type="text/javascript" src="script.js"></script>

2. Et voici à quoi doit ressembler le code HTML du menu

<div class="menu">
<ul id="menu">
<li><a href="#">JavaScript</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">HTML</a></li>
<li value="1"><a href="#">User Interface</a></li>
<li><a href="#">CSS</a></li>
</ul>
<div id="slide"></div>
</div>

Il faut donner l'attribut value="1" au lien qui recevra le slide par défaut.

3. Et voici un exemple de CSS à mettre à la fin de votre votre feuille de style

Pour le 1er exemple ....

.menu {position:relative; background:url(images/bg.gif) no-repeat; height:35px; width:459px}
.menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.menu li {float:left}
.menu a, .menu a:active, .menu a:visited {text-decoration:none; color:#FFF; padding:10px}
.menu a:hover {color:#ebf0e6}
#slide {position:absolute; bottom:0; height:4px; background:#89957a; z-index:10}

Pour le 2ème exemple ....

.menu {position:relative; background:url(images/bg.gif) no-repeat; height:35px; width:459px}
.menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.menu li {float:left}
.menu a, .menu a:active, .menu a:visited, .menu a:hover {text-decoration:none; color:#FFF; padding:10px}
#slide {position:absolute; top:6px; height:24px; background:#89957a; z-index:10}

4. On initialise le menu

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js

menuSlider.init('menu','slide');

Le morceau de code ci-dessus est à appeler au chargement de la page (onload), si vous ne savez pas comment faire, voici une des méthodes possible:

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(function() {
    menuSlider.init('menu','slide');
});

Les paramètres

  • 1er: l'id de la liste
  • 2ème: l'id de la div vide qui slide

Conclusions

Voici de quoi mettre un peu de vie dans vos menus horizontaux, et encore une fois pour un poids vraiment très léger !

Liens

-----

Articles relatifs

  • k-ny

    Sorry, je n’avais pas uploadé le bon zip 😉

  • Olivier

    manque le bg.jpg on a pas l’image

  • Pingback: Mon bloc de blogs n°19 | Be Geek()

  • Pingback: Quelques bonnes ressources pour vos développements Web ! | Le grand BETA !()

  • stephane

    salut
    ca marche super bien – j’ai toutefois un problème sous IE6 (grrrrr !). Le survol du menu entraine un effet « ombré » qui dépasse largement de la div.
    @+

  • rj45

    Problème sous IE, qui décalemon menu vers la la gauche (j’utilise une img de fond plus large mais le tout s’affiche correctement sous Firefox juste les noms de rubrique.

  • gnagna

    Heu je capt pas pourquoi que ça reste tjrs sur e menu graphic designer.

    Je trouve ça un peu naze limite merdique

  • Pour ma part il marche très bien, sauf un décalage sous IE sur la gauche (pareil que @rj45 comme le fil ^^).
    Sinon pour ceux qui souhaite voir un exemple un peu plus design copier coller le lien dans votre bare (je dis pas qu’il ne va pas disparaître: ns10.freeheberg.com/~fluxrss//website2/corps.php

  • Vegeka

    Bonjour,
    j’essaie d’intégrer de menu sur mon site (en php, sous wordpress) mais sans succès …
    Peut-on le coder en Js ou seulement en html ?
    Est-ce problème d’appel du javascript ?
    Avez vous une idée ?

  • Vegeka

    merci à Robin pour son exemple.
    Une fois décortiqué, j’ai réussi à l’intégrer dans mon site.
    Seul hic, ça marche pas sous Firefox alors sous IE et (surtout sur ) GoogleChrome, c’est impécable…

  • Kent1

    Salut,

    Alors chez moi ça fonctionne très bien, j’ai mis de multiples backgrounds pour rendre ça plus joli. Tout fonctionnait bien, mais quand je rajoute du contenu en dessus le glisseur devient très lent…

    Quelqu’un peut-il m’éclairer ?

  • Kent1

    @Kent1
    J’ai changé les valeurs de q et i dans le fichier js (j ai augmenté leur valeur) mais ça laisse un effet moins fluide qu’avant ;(

  • Bonjour,
    vraiment super article cela faisait longtemps que je pensais à ajouter un menu de ce style sur mon site et que je recherchais une ressource en francais . Alors encore une fois bravo et merci beaucoup !
    D’autre part, il s’avère que j’ai vu sur Internet des menus similaires, sauf que la couleur du div vide qui slide change en fonction de la rubrique sur laquelle il se positionne. Quelqun aurait-il une idée pour reproduire cet effet ? Merci d’avance à tous !

    Evan