Blog iamvdo.meCet exemple utilise le sélecteur CSS3 :nth-child afin d’appliquer une couleur de background différente pour chaque item du menu. L’utilisation de classe est donc inutile, le code HTML en est allégé.
ul li:nth-child(1) ul{ background:#0c9; }
ul li:nth-child(2) ul{ background:#09c; }
ul li:nth-child(3) ul{ background:#c09; }
ul li:nth-child(4) ul{ background:#9c0; }
ul li:nth-child(5) ul{ background:#c90; }Les coins arrondis de chaque bloc de sous-menu sont créés avec la propriété CSS border-radius et avec les dégradés linear-gradient. Voir l’article suivant : Menu sans images
Pour les petites flèches, c’est une extension à l’article Boutons Suivant Précédent, on utilise ici le pseudo-élément css3 ::before afin de rajouter un élément HTML avant chaque bloc dépliable, et on lui applique une bordure bottom, left et right afin de créer la flèche.
Cela nous permet donc de créer un menu avec "effet bulle" ou "popup". Cette technique peut être utilisée pour créer des popups sur les mots au sein d’un texte par exemple, sans utiliser de Javascript ni d’images.
#1par RealToff, le 5 mai 2011
Vraiment génial ce site !
Les démos permettent de se rendre compte de la puissance des nouveautés en CSS3, et de comprendre comment ça fonctionne. Cela donne pas mal d’idées assez sympa pour créer des design de sites.
Je ne comprend pas pourquoi il y a si peu de commentaires.
En tout cas merci à toi et bonne continuation ;-)
#2par css3create, le 17 mai 2011
Merci pour les encouragements. C’est cool si des personnes comme toi y trouve quelques idées...
#3par MehdiByNight, le 20 juillet 2011
Tout à fait d’accord, ce site est vraiment utilise & bien réalisé.
CSS3 est vraiment une très bonne chose, plus besoin de s’embêter à charger des scripts JS =)
Merci à vous & bonne continuation.
#4par fabiola, le 4 août 2011
Merçi pour l’exemple mais vous pourriez me donner le code ou bien les element avec quoi vous avez fait le sous menu ?merçi d’avance
#5par css3create, le 4 août 2011
@fabiola : je vous laisse regarder dans le code CSS de la page. Il existe plusieurs tutoriels très bien fait sur le net pour réaliser ce genre de menu. Ici, je m’attache à expliquer plutôt le coté CSS3. ( Regardez du coté d’Alsacréations.com )
#6par theshwal, le 11 août 2011
Bonjour et bravo pour ce site,vraiment superbe. Ca deja été demandé mais ca serrait vraiment sympa de partager les CSS présenté. De plus je n’arrive pas a faire apparaitre le ^ dans le menu. Quelle est l’astuce ? Merci d’avance et longue vie a ce site.
#7par theshwal, le 11 août 2011
bon, en fait, j’ai reussi a trouver comment faire un triangle sur : http://css-tricks.com/snippets/css/...
#8par css3create, le 11 août 2011
@theshwal : Merci pour les encouragements. Tu aurais pu trouver comment faire ici aussi : Boutons Suivant Précédent. Si je ne donne pas le code CSS en entier, c’est que je n’en vois pas l’utilité...D’autant plus que le CSS est présent dans la source. Je m’attache plutôt à expliquer ce qui touche aux propriétés CSS3.
#9par theshwal, le 11 août 2011
merci de ta réponse et j’ai effectivement pris ton code. Mais dans le tutoriel que tu site tu n’explique malheureusement pas comment réaliser le triangle. Tu donnes effectivement le CSS mais celui ci n’étant pas commenté, cela reste un peut trop complexe pour moi malheureusement. Mais encore merci pour ces magnifiques réalisations.
#10par Daniel, le 22 novembre 2011
dommage que l’on ai pas le code complet pour le "menu avec coin arrondi et dégradé". Autrement merci pour ce site très intéressant.
#11par lady, le 12 février 2012
bonjour, et merci beaucoup pour ces tutos. C’est vraiment encourageant.
Est ce possible d’avoir le code complet s’il vous plaît. Et merci encore pour vos connaissances partagées
#12par Damien, le 6 avril 2012
Je trouve ce site vraiment top félicitation.
Cela dit j’adore ce menu aurais tu le code html et CSS complet ?
Merci
#13par MaxHTML, le 26 septembre 2012
Merci pour vos super tutos , continuez :)
#14par Grey, le 9 décembre 2012
Je le dis ici mais je pourrais le dire sur tellement de pages du site : Vraiment un superbe travail et comme dit RealToff un peu plus haut, le site "permet de comprendre comment ça fonctionne, il donne pas mal d’idées pour créer des design de sites" . J’ajouterai qu’il donne aussi l’envie d’apprendre. BRAVO, effet réussi ^^ et un Grand MERCI de partager !
#15par AGoodGuy, le 24 janvier 2013
Franchement, bravo c’est magnifique ce que tu / vous faites !
#16par Tyty, le 28 février 2013
Super vos demos, merci ! Par contre je participe aussi a la petition pour que soit affiche le ptit bout de code CSS 3 :)
#17par modepa, le 23 avril 2013
Merci beaucoup ! Ces petites astuces nous permettent d’ajouter un peu plus de vivacité sur un site, sans le surcharger de script Javascript !
Encore merci pour votre aide !!!!!
#18par bibou, le 3 juillet 2013
Bonjour, je veux modifier le couleur de ce menu et je n’ai pas trouvé. Est ce que vous pouvez m’aider et merci ?
#19par Flash, le 16 octobre 2013
Bonjour à tous, tout d’abord merci pour t’es tutos ils m’ont bien inspiré, mais je bloque maintenant car je souhaite afficher un deuxième sous menu..
Le problème n’étant pas de l’afficher (le deuxième sous menu) quand on survole le premier, mais le problème est de cacher le deuxième sous menu .. En effet quand je survole le menu, le sous-menu apparait ainsi que le deuxième sous-menu.
J’ai essayer de faire un sous menu lambda (très moche d’ailleurs) et tout marche à merveille mais pas avec le tiens.
Dans l’attente de réponse .
Cordialement.
#20par Flash, le 18 octobre 2013
C’est bon j’ai finalement trouver comment faire, et j’ai même ajoutés quelques fonctionnalités en plus !
Cordialement,
#21par post-six, le 10 février 2014
Bonjour , ton superbe génial .... merci et bonne continuation :)
#22par victhiolita, le 25 février 2014
vraiment super !!! merci !!