• Menu Accordéon-HTML/CSS

    Un joli menu en accordéon, à base de HTML et CSS uniquement (non supporté par IE sauf IE11)

     

     

     

    « Slider Nivo - jQueryTableau à onglets-CSS »

    Tags Tags : , , ,
  • Commentaires

    40
    Samedi 16 Mars à 01:54
    Hi everyone, it's my first go to see at this website, and paragraph is actually fruitful designed for me, keep up posting these types of articles.
    39
    Vendredi 15 Mars à 21:46
    Very energetic article, I enjoyed that bit. Will there be a part 2?
    38
    Vendredi 15 Mars à 20:29
    Greetings! Very helpful advice within this article! It's the little changes that will make the biggest changes. Thanks for sharing!
    37
    Samedi 4 Novembre 2023 à 15:27
    Hi there, i read your blog from time to time and i own a similar one and i was just curious if you get a lot of spam comments? If so how do you protect against it, any plugin or anything you can recommend? I get so much lately it's driving me crazy so any help is very much appreciated.
    36
    Lundi 3 Décembre 2018 à 17:19

    Bonsoir et merci pour toutes ces explications ;

    Bonne soirée - Amitiés -Violette70

    35
    Mercredi 21 Février 2018 à 11:44

    Merci d'avoir remis les codes ^^

    hier mon accordéon ne fonctionnais plus, j'étais venue sur votre blog et ça me mettais ERROR 404 pour vos lignes de code.

    Il doit y avoir une date de péremption lol

    34
    Mercredi 24 Mai 2017 à 23:13
    Hello !
    http://ilnadesign.ek.la/koszonto-c18473780
    I missed something ? I have my web site with 5 jpg picture´s and it does´t work. Help me please ! - Thanks ! Greeting´s - Ilna
    33
    Vendredi 5 Mai 2017 à 13:43

    bonjour, merci beaucoup pour ce menu accordéon, j'ai un peu galéré mais en vain j'ai réussi. Merci encore !!!

    32
    Mardi 26 Avril 2016 à 14:32

    Bien le bonjour,
    merci Mike ! je sais pas si t'as entendu mais je viens de pousser un cri : j'ai réussi l'install et le fonctionnement, dans une plus petite fenêtre avec que 4 images ! Bon j'ai cherché un peu, dont un souci qui m'a bloquée pendant une heure ! (c'était la accordian ul li:hover qui n'était justement pas à la bonne dimension, du coup les images disparaissaient à droite, grrrr) Contente d'avoir trouvé toute seule, et contente d'utiliser tes supers libres partages !
    Pour l'instant pages en construction, mais promis je te montre dès ça sera en ligne !
    C'était la bonne nouvelle du jour, encore merci !

    Edit 9 mai : c'est en ligne

      • Mercredi 11 Mai 2016 à 16:49

        4 ans ? toujours aussi chouette  yes 

          cool à toi aussi Mike, et sûrement même à toi d'abord ! 

      • Mercredi 11 Mai 2016 à 11:46

        Bah oui, du coup un "Edit" n'envoie pas de notification.......donc bien vu le MP 
        Ce menu est sympa effectivement....malgré son age avancé (4 ans) .....

        ......cool ....!!!!

    31
    Samedi 12 Mars 2016 à 18:46

    bonsoir , c'est vraiment super tout ce que vous faites !!!  il y a de super bonnes idées  ! je repasserais en semaine  bon weekend A+

    30
    Mercredi 5 Août 2015 à 13:23

    Merci du partage ^^

    29
    Gen
    Mercredi 3 Juin 2015 à 09:08
    Ce code est très bien en revanche, il faut l'adapter. J'y ai passé beaucoup du temps mais à présent le résultat est satisfaisant.
    Il manque des précisions de code pour arriver au résultat que tu affiches ici.
    28
    Mardi 2 Juin 2015 à 22:27

    @claire59300

    Indique-moi un lien, pour que je puisse voir le résultat .........money !!!!

    27
    Mardi 2 Juin 2015 à 16:43

    bonjour je découvre ce blog, car je n’intéresse pour de nouveau code et ce menue accordéon avec image me met au défis je vais tenté,lol merci

    26
    Mercredi 21 Janvier 2015 à 19:17

    Salut Mike,

    Tu es un as... Thanks, merciiiiii

    jê †ê §ðµhåï†ê µñê ßðññê soirée !

    ♥♥♥

    $…... ^v^..________________JE REVIENDRAI VERS TOI POUR VENIR TE DÉPOSER
    ____... ^v^_____$$
    _____________$_$$____________________MON PETIT BONJOUR
    _____________$$$ …..... ^v^
    _... ^v^_______$$_§§§.__________________ ET TE DEMANDER SI TU VAS BIEN ?
    ___________$$$_§§§§§
    ___________$_$_§§§§§§ ………..... ^v^_____  ET TE REMERCIER POUR TON SUPER BLOG
    __________$$_$__§§§§§§
    _________$$$_$__§§§§§§§______________ OU IL Y A TANT DE CODES GENIAUX
    ________$$$$_$__§§§§§§§§
    _______$$$$$_$__§§§§§§§§____________ MILLE MERCIS POUR TES PARTAGES 
    _____$$$$$$$_$__§§§§§§§§§
    ____$$$$$$$$_$_§§§§§§§§§§§_ __________ REçOIS TOUTE MON AMITIE
    _$_$$$$$$$$$_$_§§§§§§§§§§§
    _$$_$________$$$_____$$$$$___$$______ DE LA PART DE GEN DE L.M.A.E.
    __$$$$$$$$$$$$$$$$$$$$$$$_$$$$.
    ___$$$$$$$$$$$$$$$$$$$$$$$$$$
    _..-+*°*+- .._ ~~~*°*~~~ _..-+*°*+-.._
    ~~~ _..-+*°*+-..~~~~ _..-+*°*+-.._
    _..-+*~~°*+-..__..-+*~~~~°*+-.._*+-...-+*°
    _.~*°*~~~~ _..-+*~~~~°*+-.._*.-+*°*+-.._

     A TRES BIENTÔT MIKE.

    Bises.

    Gen.

    25
    Mercredi 21 Janvier 2015 à 17:37

    @Gen

    Il y a du code CSS qui interfère sur le code CSS du menu-accordéon.
    Entre autre:

    .post img { max-width:100%; height: auto; }

    Modifie ce code (les images vont prendre leur taille véritable):

    .post img { max-width:initial; height: auto; }

    24
    Gen
    Mercredi 21 Janvier 2015 à 14:04
    Bonjour !
    Pourtant j'ai uploadé mes images sur archiv Host et j'ai bien redimensionné chacune de mes images à 640 X 320 px.
    Bonne journée à vous.
    23
    Mercredi 21 Janvier 2015 à 10:45

    @Gen.

    Il faut mettre des images de 640px par 320px.....!

    22
    Mardi 20 Janvier 2015 à 21:03

    Bonjour,


    Vous avez un super blog, bravo ! Moi, je suis sur Blogger. J'ai copié vos codes HTML et CSS de votre menu coulissant HTML/CSS. Seulement, les images ne se superposent pas. Voilà comme il se présente : Mon blog est HORS http://joueurslesjeuxsontfaits.blogspot.com et le menu est dans cet article :


    http://joueurslesjeuxsontfaits.blogspot.fr/2015/01/linterdiction-de-jeux.html


    Si vous pouviez m'aider, me dire pourquoi il ne marche pas comme il faut dans mon blog. Car ce menu est vraiment sympa. Mais comme vous voyez il ne s'affiche pas du tout comme sur votre blog.


    Merci par avance pour l'aide,


    Bien cordialement, j'étais avant sur Eklablog.


    Gen. du Miroirauxessences

    21
    Dimanche 30 Novembre 2014 à 10:14
    Merci pour le code !
    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    20
    Mercredi 9 Juillet 2014 à 14:51

    Merciiiiiiiii encoore

    19
    Mercredi 9 Juillet 2014 à 14:43

    Merci!!! C'est trop gentil et ça marche super!!!

     

    18
    Lundi 23 Juin 2014 à 20:55
    merci beaucoup pour l'astuce
    17
    Dimanche 8 Juin 2014 à 11:53

    @CB,

    Sur ton blog test, le menu est tronqué...la 5ème image n'apparaît pas!
    Why ??? la largeur article de ton blog est de 574px...en gros ta page n'est pas assez large! 
    Ce menu-accordéon est codé en CSS par défaut, pour 5 images cliquables...
    La largeur est de 800px (805px avec la bordure), les images entières de 640px, et images non survoléées 160px.
    Une image survolée = 640px, les autres 40px.
    Alors 160px x par 5 = 800px, ou 640px + 4 x 40px = 800px

    .....donc si on ajoute 1 ou plusieurs images , il faut ajuster le code CSS en conséquence !!!
    Exemple, j'ajoute 2 images :
    Pour le code HTML, ajouter cette ligne  <li> ....</li> (2 fois...) avant la balise </ul>:

    <!------Ajout de 2 images ---------->

    <li>

    <div class="image_title"><a href="#">Ajout-01</a></div>

    <a href="#"> <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt=""> </a></li>

    <li>

    <div class="image_title"><a href="#">Ajout-02</a></div>

    <a href="#"> <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt=""> </a></li>

    <!----------Fin de l'ajout---------->

     

    Pour modifier l'adresse du lien (url), remplacer href="#" par hrf="url-désirée"

    Pour le code CSS:

    Modifier la valeur de width (115px au lieu de 160px) dans ".accordian li" :

    .accordian li {width: 115px;}

    Voili, voilou....mais pour voir le résultat sur ton blog test, tu dois agrandir la largeur de ta page:

    Apparence > Modifier thème > Format blog > Page > Largeur page > 90% (choisir %)

    16
    Dimanche 8 Juin 2014 à 10:16
    Salut O grand maître Mike ^^
    alors j'ai bien réussi à mettre le menu accordéon sur mon blog test, par contre :
    - est il possible de rajouter plus de 5 image-lien?
    - comment mettre les liens aux images?
    encore merci par avance, t trop génial!!
    15
    Vendredi 18 Avril 2014 à 16:12

    Pour placer ce menu dans le header, il faut ajouter en début de code html:

    <div style="position:absolute;top:10px;left:50%;margin-left:-402px;">

    et en fin de code:

    </div>

    14
    Vendredi 18 Avril 2014 à 15:27
    Bonjour,
    J'ai une petite question, est ce que c'est possible de mettre ce menu accordéon en en tête (header je crois) ?
    13
    Samedi 15 Février 2014 à 15:46

    july je te réponds:

    avec le code html faut aussi mettre code css, chose ke tu peux pas faire avec wordpress

    12
    Samedi 15 Février 2014 à 14:35
    julie

    Je suis une amie de Dalila, jaime son blog, me voici ici en clikant interessée par le  diaporama, helas j'ai voulut tester chez moi, mais les images apparaissent les unes sous les autres et non pas en accordeon, mais mon blog est un  blog wordpress,


    Connaissez vous la solution ?
     Je ne sais pas comment  faire,


    Merci,


    bonne journée

    11
    Lundi 3 Février 2014 à 19:23

    super je retient  ce menu il est sasas

    biss

    10
    Lundi 3 Février 2014 à 11:00
    suivi la gentille rebelle et me voilà merci pour votre aide à embellir nos blogs. bonne journée
    9
    Lundi 3 Février 2014 à 04:41

    Coucou ,ma curiositée m'amène ici car  j'ai suivi le lien qui apparait chez gentille rebelle .....Il y a des expert ici . hi hi hi  Je tiens à vous remerçiez  pour votre implication à faire des codes qui embellissent les blogs. Merci d'être là . Bonne Semaine .

    8
    Dimanche 2 Février 2014 à 19:37

    ok merci !

    7
    Dimanche 2 Février 2014 à 19:28

    la réponse est dans la traduction:

     Une petite astuce pour éviter le scintillement sur ​​certains navigateurs * / 

    . accordéon ul {

         Largeur: 2000px; 

         / * Cela donnera amplement d'espace pour le dernier élément à déplacer 

         au lieu de tomber / clignotement plane. * /

    quand l'accordéon est trop large, trop d'éléments ,il se peut que le dernier déborde sur certains navigateurs...!!!  

    6
    Dimanche 2 Février 2014 à 18:50

    Merci javais pas vu ke t'étais passé !!!

    une petite question : pourquoi 2000px,

    /*A small hack to prevent flickering on some browsers*/
    .accordian ul {
        width: 2000px;
        /*This will give ample space to the last item to move
        instead of falling down/flickering during hovers.*/


    5
    Dimanche 2 Février 2014 à 18:42

    Defi relevé; encore merci pour ton partage !!

    4
    Dimanche 2 Février 2014 à 14:36

    Merci pour ta visite , en faite le but maintenant , je veux faire un menu mais avec images plus petite( merci pour site ki redimensionne) donc faudra ke je configure

    cette partie du code dans le css, n'est ce pas ??

    /*Time to apply widths for accordian to work
    Width of image = 640px
    total images = 5
    so width of hovered image = 640px
    width of un-hovered image = 40px - you can set this to anything
    so total container width = 640 + 40*4 = 800px;
    default width = 800/5 = 160px;
    */
    
    .accordian {
        width: 805px; height: 320px;
        overflow: hidden;

    surtout me dis rien je veux faire moi même lol
    3
    Dimanche 2 Février 2014 à 09:39

    J'ai fait billet avec ce menu déroulant, ce sera à suivre !!!

     

    http://la-gentille-rebelle.eklablog.com/menu-accordeon-a106261532

    bon c'est pas le tout jai du ménage ki m'attends lol

    bonne journée



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


Version standard

Poursuivre l'affichage en version standard (ordinateur),

cliquer ci-dessous

Clic ici

(Puis fermer cette fenêtre, en haut à droite)