Menu en accordéon horizontal et glissant en 1kb !
Voici un excellent menu en accordéon horizontal animé qui tient en seulement 1 kb ! Le tout sans faire appel à une quelconque librairie javascript extérieure !
C'est Michael Leigeber qui en est à l'origine, de plus son script est compatible IE6, IE7, Firefox, Opera, et Safari ! Chapeau !
Allez, voici la demo !
Mise en place
1. On inclut slidemenu.js dans la page entre les balises HTML <head> et </head>
2. Et voici à quoi doit ressembler le code HTML du menu
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>
3. Et voici un exemple de CSS à mettre à la fin de votre votre feuille de style
.sm li {float:left; display:inline; overflow:hidden}
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() {
slideMenu.build('sm',200,10,10,1);
});
Les paramètres
- 1er: l'id de la liste
- 2ème: largeur de l'accordéon (en pixels)
- 3ème: délais de vitesse d'appel de la fonction de glissement
- 4ème: vitesse de l'animation (1 étant le plus rapide)
- 5ème: numéro de la liste à ouvrir par défaut
Conclusions
Voici un petit script rapide et léger qui va mettre un peu de vie dans vos menus, abusez-en ! 
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
Merci pour ce post, effectivement c’est assez impressionnant au niveau rapport rendu/poids du script. En plus pas de problème de compatibilité avec d’autres framework js… je prends !
J’suis impressionné : 0.47kb !
Joli script. Mais pourquoi réinventer encore une fois la roue ?
Les frameworks javascript actuels (MooTools, Prototype, jQuery et autres YUI) font exactement la même chose en auss court, voire en plus court.
@Mr Web 2.0
Ah bon ? Trouve moi un seul framework javascript qui fasse cette fonction en prenant seulement 1kb !
Impossible puisque tous ces framework pèsent en général plusieurs dizaine de kb à eux seuls !
L’intérêt de ce script c’est bel et bien de pouvoir se passer de framework pour l’utiliser !
« Même s’il ne réinvente pas la roue », joli travail.
super mais si on veut un menu vertical comment faire ? merci
Il suffit de lire le code, essayer de le comprendre et de le modifier un petit peu
En gros il faudra remplacer les height par des width ^^.
Je sens que je vais utiliser ce script pour faire un système un peu comme sur mootools sur mon accueil
bonjour…
Je ne comprends pas ou integrer dans ma pagele code suivant mentionné dans le tuto que tu fais pour le SlideMenu :
Soit :
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() {
slideMenu.build(’sm’,200,10,10,1);
});
Merci de ta réponse et encore bravo pour ta créativité et tes trouvailles sympa. Je dois dire que je reviens assez fréquemment sur ton site.
Bone chance. Thomas.
Sachant que je suis sur WordPress et que j’ai déjà essayé de l’intégrer d ans la page functions.php
A+. Thomas.
@Thomas Il faut mettre le code javascript dans un fichier .js comme indiqué. Ensuite tu met ce fichier sur ton serveur et tu modifie ton fichier header.php du theme pour l’inclure:
<script type= »text/javascript » src= »script.js »></script>
Bonjour,
j’ai essayé d’utiliser ce menu,le problème, c’est qu’il ne semble pas très pratique d’ajouter du contenu dans les différents onglets. Dès qu’on veut mettre l’image en background pour pouvoir afficher du texte par dessus, elle ne recouvre plus les données de l’onglet supérieur…
Par ailleurs, comment faire pour que la portion de l’onglet 1 couverte par l’onglet 2 soit plus importante?
Merci d’avance,
Sarah
bonjour et merci pour ce menu
Mon problème est que tout fontionne bien sur safari et chrome mais sur IE et Firefox le menu ne se replie pas et je ne vois que 4 rubriques alors que j’en ai environ 13
Merci d’avance pour votre aide
éronique
Bonjour je voudrais savoir comment mettre ce menu en vertical ?
@Mr Web 2.0
Cool
Bonjour à tous,
Je viens d’essayer d’utiliser ce script sur mon site iWeb en insérant dans un fragment html le code suivant:
Pour la création pas de problème.
Je me retrouve avec trois fichiers à la racine de mon site: slidemenu.css slidemenu.html et slidemenu.js
J’ai rajouté des liens sur chaque image.
Bon le problème est le suivant:
Quand je lance le fichier slidemenu.html le rendu est superbe.
Quand je publie le site sur mon disque dur via iWeb le rendu est superbe.
Par contre quand je lance le site, impossible d’afficher le widget avec le menu.
Ce qui m’étonne c’est quand je lance le slidemenu.html depuis le site par l’adresse suivante: http://florentworld.kinssha.org/slidemenu.html
le rendu est bon.
Quelqu’un pourrait-il m’expliquer où je commets une erreur? Est-ce que ce script ne peut être insérer dans un fragment html?
Merci pour vos réponses.
Désolé tout est rentré dans l’ordre.
Super boulot en tout cas!
Merci et bon weekend.
Superbe et encore merci. Mais comment fait on pour rajouter du texte.
Je veux dire que je voudrais faire apparaitre un menu cliquable en texte dur une fois que l’image se déploie.
Merci pour les futures réponses
Merci bcp pour ce tuto, ça marche super !!!