Effet glissant pour menu en javascript (1kb)
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>
2. Et voici à quoi doit ressembler le code HTML du 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 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 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
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:
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
-----
Guide pour mieux gérer vos emails via gmail (multicompte, redirection, ...)
Comment réussir vos concours sur vos blogs ?
Brève Wordpress: 40 liens, thèmes, plugins et astuces en tout genre !
Ajouter un lien pour envoyer la page par e-mail
manque le bg.jpg on a pas l’image
Sorry, je n’avais pas uploadé le bon zip
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.
@+
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.
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
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 ?
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…