• 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

    52
    Lundi 3 Juin à 13:22
    At this time it appears like Drupal is the best blogging platform available right now. (from what I've read) Is that what you are using on your blog?
    51
    Dimanche 2 Juin à 16:59
    Howdy I am so happy I found your website, I really found you by error, while I was searching on Google for something else, Anyways I am here now and would just like to say thanks a lot for a remarkable post and a all round interesting blog (I also love the theme/design), I don't have time to browse it all at the minute but I have book-marked it and also added in your RSS feeds, so when I have time I will be back to read a great deal more, Please do keep up the fantastic job.
    50
    Dimanche 2 Juin à 09:19
    Hi, constantly i used to check webpage posts here early in the dawn, because i enjoy to find out more and more.
    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    49
    Samedi 1er Juin à 13:41
    Greetings! This is my first visit to your blog! We are a collection of volunteers and starting a new project in a community in the same niche. Your blog provided us beneficial information to work on. You have done a extraordinary job!
    48
    Vendredi 31 Mai à 07:49
    Thankfulness to my father who stated to me on the topic of this website, this weblog is truly remarkable.
    47
    Vendredi 31 Mai à 02:35
    Thanks to my father who shared with me about this blog, this weblog is really amazing.
    46
    Mardi 28 Mai à 18:03
    It's a pity you don't have a donate button! I'd without a doubt donate to this superb blog! I suppose for now i'll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this website with my Facebook group. Chat soon!
    45
    Dimanche 26 Mai à 01:50
    Spot on with this write-up, I really feel this website needs much more attention. I'll probably be returning to read through more, thanks for the information!
    44
    Mercredi 15 Mai à 03:43
    Hello there! Do you use Twitter? I'd like to follow you if that would be okay. I'm undoubtedly enjoying your blog and look forward to new updates.
    43
    Mercredi 17 Avril à 04:44
    Howdy just wanted to give you a quick heads up and let you know a few of the pictures aren't loading properly. I'm not sure why but I think its a linking issue. I've tried it in two different browsers and both show the same results.
    42
    Lee
    Samedi 13 Avril à 06:27
    Admiring the time and energy you put into your blog and in depth information you provide. It's great to come across a blog every once in a while that isn't the same out of date rehashed information. Excellent read! I've bookmarked your site and I'm including your RSS feeds to my Google account.
    41
    Samedi 6 Avril à 02:08
    There is definately a great deal to learn about this issue. I really like all of the points you have made.
    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 !
    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)