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>

"text/javascript""script.js"

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

"menu"
"menu"
"#"JavaScript
"#"Graphic Design
"#"HTML
"1""#"User Interface
"#"CSS

"slide"
 

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 ....

 

Pour le 2ème exemple ....

 

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

span class="st0">'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:

span class="st0">'function''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