Menu en accordéon horizontal et glissant en 1kb !

26/05/2008
WebDev et Design Allez aux commentaires

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>

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

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

<ul id="sm" class="sm">
        <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 {list-style:none; width:459px; height:100px; display:block; overflow:hidden}
.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

slideMenu.build('sm',200,10,10,1);

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() {
    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

-----

Articles relatifs

  • damdec

    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 ! 😮

  • Mr Web 2.0

    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.

  • k-ny

    @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 !

  • annak

    « Même s’il ne réinvente pas la roue », joli travail.

  • karl

    super mais si on veut un menu vertical comment faire ? merci

  • ZeK

    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 🙂

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

  • k-ny

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

    😉

  • Thomas

    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.

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

  • 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

  • vero

    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

  • olivier

    Bonjour je voudrais savoir comment mettre ce menu en vertical ?

  • Tapoafom

    annak :
    « Même s’il ne réinvente pas la roue» , joli travail.

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

  • patrcoud

    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

  • Anne

    Merci bcp pour ce tuto, ça marche super !!!

  • Sylvain.l

    Bonjour,
    Merci beaucoup
    Juste un petit souci, lorsque je modifie le code css cela me bloque le fonctionnement ! Y’a t il une solution ?

  • Hélène

    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 !

  • Quentiin

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

  • haNjo

    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!

  • haNjo

    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

    @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);