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 !
iTypo: thème Wordpress gratuit
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 !
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 !!!
Bonjour,
Merci beaucoup
Juste un petit souci, lorsque je modifie le code css cela me bloque le fonctionnement ! Y’a t il une solution ?
Bonjour !
Est ce qu’il y a un moyen d’imposer la hauteur du menu ?
Quand je copie le script, je n’ai que les 210px du haut de mes images…
J’ai essayé en copiant intégralement le script de Florent sans rien en changer du tout, et je n’ai encore que les 210px du haut, est ce qu’il faut changer quelque chose dans le fichier .js ?
Merci d’avance !
@Hélène: Tu modifie cette partie du .css
.sm {list-style:none; width:459px; height:200px; display:block; overflow:hidden}
Width c’est la largeur,
Height la hauteur,
Comme tu le vois je l’ai déjà modifié et sa fonctionne, il faut juste penser à modifiez les images.
Bonjour,
J’aimerai savoir par quel moyen je peux fixer la taille « visible » des bouton? (càd la partie visible lorsque le corps est caché)
J’ai essayé différents changements sur le width, sans obtenir ce que je voulais.
Et seconde question, quelque soit le nombre d’élément dans ma liste, le dernier se met toujours à la ligne, est-ce normal?
En vous remerciant pour ce script!
Et tant que j’y suis, pour remplacer les onmouseover par des liens cliquable et que le reste de l’image s’affiche seulement lorsque l’on click sur « l’entête », que faut-il modifier? J’ai essayé de remplacer le mouseover par un mouseclick sans résultat!
Bonne soirée
@haNjo
Je pense avoir trouvé pour la taille « affichée » à la ligne ce-dessous: (dans le slidemenu.js)
var cw=parseInt(s.style.width,’10′);
Où je remplace 10 par la valeur souhaitée, maintenant après avoir mis par exemple « 20″, j’ai des effets bizarre lorsque je passe plusieurs fois sur les étiquettes. La largeur des étiquettes refermée diminue à chaque passage…
J’ai également modifié cette ligne-ci
slideMenu.build(‘sm’,860,10,10,7);