Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Menu Slides avec CSS3

Créer des blocs dépliables animés en CSS3

Création: septembre 2010Modifié:

Contenu
Full CSS Pas de JavaScript Pas d’images
Navigateurs
Firefox Safari Chrome Opera
Partagez
Facebook Twitter

Votez

86 votes4.53

Utilisation des transformations et des transitions CSS3 afin de créer un menu avec blocs dépliables de type menu accordéon.

Attention : 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

Envie d'une nouvelle démo?

Un p'tit mot...

#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 head du 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 , 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 ?


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)