Blog iamvdo.meAttention : Un bug étrange a été détecté sous Chrome/Safari sur Mac. Observez-vous cela ?
Dans cet exemple, on utilise les transformations CSS afin de faire subir une rotation aux liens contenus dans les éléments de liste (li).
<div class="menu">
<ul>
<li>
<a href="">Home</a>
<div>
<h3>Home</h3>
<p>Bienvenue sur le site CSS3Create</p>
</div>
</li>
<li>
<a href="">News</a>
<div>
<h3>News</h3>
<p>Pleins de news sur CSS3 et sur HTML5</p>
</div>
</li>
...
</ul>
</div>Réglage de la taille d’un li et application de la transition sur la taille. 0.15s correspond au retardement de la transition, afin d’éviter un déclenchement trop rapide de chaque slide. overflow:hidden permet d’éviter le débordement des éléments masqués.
ul li{
width:30px;
overflow:hidden;
transition:width 1s ease 0.15s;
}
ul li a{
transform:rotate(-90deg);
}Ensuite au :hover, la taille des li est modifiée en utilisant les transitions CSS. Le fait d’agrandir la taille laisse donc apparaitre une div dans laquelle il est possible de rajouter n’importe quel élément HTML.
ul li:hover{
width:360px;
}L’effet de transition fonctionne avec le moteur Webkit (Safari-Chrome) , le moteur Gecko 2.0 (Firefox 4) et Opéra11+. IE9 ne permet ni les transitions ni les transformations CSS.
Voir aussi : Menu avec slider effet transition
#1par cedricici, le 15 mars 2011
Ca tourne sur plateforme mobile cette transition ? c’est vraiment adapté si c’est le cas !!
#2par Bunnybugs, le 26 août 2011
Salut ! Le code STP merci !
#3par WebMaster, le 27 août 2011
Pourrais-vous mettre le code source, cela faciliterait les choses ou l’envoyer par e-mail si c’est possible. Car l’effet ne se fait pas. Les liens se mettent en ligne et non en vertical. Cordialement
#4par WebMaster, le 28 août 2011
Re, c’est bon j’ai réussi, y fallait juste récupérer ton code source de la ligne 64 jusque 214 pour le css et 628 jusque 651 pour le html. J’espère en aider certain, car en essayant ton code donner ça ne donne pas le résultat là. Merci encore, un site qui vaut le coup de voir :D
#5par #7, le 19 octobre 2011
salut à tous.
j’ai un souci avec la div qui contient le h3 et le p. ca affiche le texte en dessous du lien mais a gauche. comment vous faites plz ?
#6par Onil, le 14 janvier 2012
Bonsoir
Je trouve l’effet vraiment sympa. Seulement je voudrais faire ces vignettes sur toute la hauteur d’une page. ET ca fait maintenant plusieurs jours que j’essaie mais à part dégrader le code, je n’arrive à rien. Quelle est la procédure à faire ? Que dois-je modifier ?
#7par vive firefox10, le 14 janvier 2012
Encore au top ! Exploit css3. Je trouve ce site a la hauteur de ce que le web attend.
Bravo !
#8par pbox93, le 24 janvier 2012
Bonjour tous le monde je voulais savoir si le CSS3 est valide par la norme W3C
#9par Krag, le 15 février 2012
Très bel effet.
Néanmoins, aller au bout du tutoriel aurait été mieux vis à vis de tous ceux qui vous lisent, au lieu de poster 3 lignes de codes qui génèrent plus de frustration qu’autre chose.
Merci
#10par antonin, le 21 avril 2012
Salut, et merci beaucoup pour ce tuto ! :)
Pourrais tu faire parvenir le code source stp ?
Merci beaucoup, je galère depuis ce matin... :/
#11par lechat33, le 28 mai 2012
Bonjour,
Félicitations pour ton menu... serait-il possible d’avoir le code en entier car avec les morceaux je n’arrive à rien... il faut dire que je suis débutant.
Merci d’avance et encore toutes mes félicitations
#12par css3create, le 31 mai 2012
@lechat33 : le code complet est disponible dans la source de la page, dans la partie
headdu document. Si tu ne sais pas comment y accéder, je te conseille vraiment de suivre un tutoriel HTML-CSS avant de réaliser cette démo.#13par Laurent, le 6 juin 2012
Salut !
Super site, j’utilise qques effets que j’adapte au mien, ça donne super ! Merci !
Pour celui-ci, j’observe également un bug sous Chrome... Aurais-tu trouvé la solution ?
Si oui, pourrais-tu me l’expliquer ?
Encore merci ! Continue !! ;-)
#14par css3create, le 7 juin 2012
@Laurent : en fait le bug ne se produit qu’au sein du site. Si tu extrais la démo, le bug n’existe plus. C’est vraiment bizarre. (Essaie en ajoutant un
display: none;sur#bandeau, la démo fonctionne !#15par germain martin, le 14 juin 2012
Il y a effectivement un bug sous Chrome version 19.0.1084.46 m.
Curieusement, ce bug n’apparaissait pas il ya quelques jours.
Les boutons à droite de celui qui est pointé ne se déplacent pas vers la droite au pointage, mais, au contraire, lorsque le hover cesse.
Il y a aussi un chevauchement des contenus successifs après pointage et rien pendant.
#16par germain martin, le 14 juin 2012
Je confirme que, la démo extraite, tout fonctionne parfaitement avec le même navigateur sur mon ordi.
#17par Tarik, le 22 août 2012
Oh,merci pour ce travail ,j’aimerai savoir comment faire pour avoir les sources svp ?
#18par hayata, le 27 août 2012
je ne sais ou obtenir le code source complet !! je vous en serais reconnaissant ! merci..
#19par gloriole, le 29 août 2012
Merci beaucoup pour tous ces démos et tutos. Je confirme que le code fonctionne chez moi parfaitement et je veux l’intégrer sur une de mes pages si vous le permettez bien sûr...
#20par roys_60, le 6 octobre 2012
Bah ! on dirait que ca bosse...cé pa mal le truc des transitions j’aprécie vraiment professeur.
Chapeau
#21par Mç, le 7 novembre 2012
Pas de souci majeur sur Chrome (23.0.1271.64) juste un petit décalage au moment de « coulisser », le panneau remonte de quelques pixels avant de se remettre à la hauteur des autres.
Est-ce qu’il existe un moyen (toujours tout CSS) de « déplier » un panneau par défaut (au hasard, le premier) ? …et de laisser « déplié » celui qu’on vient de survoler (même si on écarte le pointeur) tant qu’on en survole pas un autre ?
À part ces deux pinailleries, c’est un très beau boulot. Bien vu.
#22par The Reggaetubewatcher, le 21 novembre 2012
Merci pour tous ces tutos !
J’ai repris ce code pour me créer un player Youtube ..
Fonctionne très bien sous Firefox !
http://www.reggaetubewatcher.com/p/...
#23par cben, le 26 décembre 2012
Bonjour, je débute en css3 et je dois dire que ce tuto m’apporte énormément. Je découvre de nouvelles propriétés que je ne soupçonnais pas !
Je viens d’avoir l’occasion de tester ce menu slide sur un ipad en utilisant safari puis chrome mais malheureusement, l’effet ’slide’ ne se produit pas : les blocs ne se déplient pas. idem pour le menu slide avec effet transition. Je vous le signale pour info.
Merci et bravo pour le tuto : apprendre devient un vrai plaisir !
#24par fallphenix, le 18 janvier 2013
salut !
c’est très cool ce menu et j’aimerai l’améliorer puis l’integrer mais si je voudrais avant cela disposer du code source
#25par sabah, le 26 janvier 2013
wawww, j’ai trop adoré ce style de menu, bravoooooo,je veux le code source pour creer une telle magnifique menu si possible .bravoo
#26par Vene, le 24 mars 2013
Saloute ! J’ai adapté ça dans l’autre sens (le sens du texte) et en fait j’ai un petit soucis avec la vitesse. Pour moi ça ne coulisse pas du tout, ça apparait d’un coup, et du coup c’est pas vraiment top.
J’ai bien sur remplacé Width par Height vu que je travaille sur la longueur et non pas sur la largeur, mais rien à faire, il ne veut pas se dérouler lentemenet, ou du moins pas d’un coup quoi.
Si quelqu’un sait comment faire, merci.
#27par sami, le 2 août 2013
Bonjour comment faire pour que le slide se fasse de droite à gauche plutot que de gauche a droite ?