-
Menu Accordéon-HTML/CSS
-
Commentaires
52CheryleLundi 3 Juin à 13:22At 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?RépondreHowdy 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.Hi, constantly i used to check webpage posts here early in the dawn, because i enjoy to find out more and more.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!Thankfulness to my father who stated to me on the topic of this website, this weblog is truly remarkable.Thanks to my father who shared with me about this blog, this weblog is really amazing.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!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!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.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.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.There is definately a great deal to learn about this issue. I really like all of the points you have made.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.Very energetic article, I enjoyed that bit. Will there be a part 2?Greetings! Very helpful advice within this article! It's the little changes that will make the biggest changes. Thanks for sharing!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.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
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 - Ilnabonjour, merci beaucoup pour ce menu accordéon, j'ai un peu galéré mais en vain j'ai réussi. Merci encore !!!
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
-
Mercredi 11 Mai 2016 à 11: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+
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.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
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.
@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; }
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.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
@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 %)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!!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>
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) ?july je te réponds:
avec le code html faut aussi mettre code css, chose ke tu peux pas faire avec wordpress
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
suivi la gentille rebelle et me voilà merci pour votre aide à embellir nos blogs. bonne journéeCoucou ,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 .
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...!!!
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.*/
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 lolJ'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