Blog iamvdo.meCet article fait suite à Menu Slides avec CSS3 concernant les sliders. Dans cet exemple, on utilise un effet de transition sur un menu, en animant l’opacité, la taille et la position.
Lors du hover "on" sur un lien, on déplace la div sur la gauche (left), on augmente sa visualisation (opacity) et sa taille (width), grace aux transitions :
ul li:hover div{
left:182px;opacity:1;width:276px;
transition:1s left,1s width,1s opacity;
}Lors du hover "out", on ré-utilise la transition mais pour repositionner la div dans son état d’origine :
ul li div{
left:0px;opacity:0;width:152px;
transition:1s left,1s width,1s opacity;
}À l’heure actuelle, l’effet fonctionne parfaitement sous Chrome et Safari. Sur les autres navigateurs, l’effet produit est celui du hover "normal".
#1par iNes, le 23 novembre 2011
Super menu, par contre une petite question : il est écrit qu’il n’y a pas besoin de js, ce qui est juste car si j’enlève tous les js du code, cela fonctionne toujours. Par contre à quoi servent tous ces fichiers dans ce cas ? on a jquery, on a aussi un css3-1.js ?
Merci de ta réponse,
Bonne continuation !
#2par css3create, le 23 novembre 2011
@iNes : Les fichiers js servent essentiellement à la gestion du site lui-même. Le menu des démos (dans le bandeau bleu) est géré en javascript. Il est possible de cliquer sur les flèches pour effectuer un décalage de ce menu...
#3par iNes, le 23 novembre 2011
Bien évidemment, c’est logique ! :) merci de ta réponse rapide. Le site en lui-même est très bien également !
#4par iNes, le 29 novembre 2011
Bonjour,
Je reviens vers toi car j’aurai besoin d’une petite aide. J’aimerai afficher ce menu quand je passe sur une icone qui serait placée en bas à gauche. Est-ce possible d’adapter ton code et le faire en css3 ou je dois le faire en javascript ? Merci de ta réponse !
#5par Azledev, le 30 novembre 2011
Une très très bonne réalisation. je poste sur ce sujet mais sache que je me suis inspiré de beaucoup de tes créations ! Continue comme sa, tu es dans mes favoris !
Un enorme merci !
#6par Link, le 22 décembre 2011
NO IMG ? Et ça c’est quoi : http://css3create.com/squelettes/im... ^^
Sinon très belle démo surtout le petit effet "fondu" lorsque le menu se repli.
#7par Rucoy, le 29 décembre 2011
Bonjour "iNes" parle de fichiers. Comment télécharger les fichiers sources ?
#8par moioli888, le 29 janvier 2012
@Link : la réalissation en elle-même n’est pas faîte avec des iamages ;) Faut pas chercher non plus.. :P
#9par Whyner, le 1er mars 2012
Salut !
Tout d’abord, félicitation pour ce site, il est génial et très instructif.
J’ai une question, comment faire pour que les slides restent visibles tant qu’on ne survole pas un autre élément ? Merci :p
#10par css3create, le 1er mars 2012
@Whyner : Si tu veux qu’ils restent visibles, il faut par exemple que tu ajoutes une class sur les éléments via javascript, ou tu peux utiliser :target en CSS, mais tu génères un historique de navigation. A toi de voir...
#11par Skyscraper, le 31 mai 2012
Salut !
Déjà : super boulot, ton site est parfait et tes tuto très détaillés !
Je n’arrive pas à passer ton menu en menu horizontal...c’est surement quelque chose de simple mais là je coince. Les transitions, j’ai réussi à adapter à un futur menu en ligne mais pas moyen de transformer le menu...
Merci de ton aide
#12par Zoé, le 7 juin 2012
Bonjour, tout d’abord merci pour ce site merveilleux.
Je me demandais si en passant par le JS c’était possible rendre cela possible sur IE pour que mon site soit le plus agréable possible pour tous =)
En regardant le fichier source j’ai remarqué ceci :
Mais je ne sais pas à quoi correspond CE fichier :
<script src='extensions/msie_compat/javascript/jquery.ifixpng.js'></script>#13par css3create, le 7 juin 2012
@Zoé : Non, ce JavaScript ne permet pas de faire fonctionner cet exemple sous IE. Il sert au site en général...Par contre, tu peux effectivement réaliser cet effet via JS. Tu devrais trouver de très bons tutos sur le net.
#14par Zoé, le 7 juin 2012
Merci beaucoup =)
Satané IE, il aura ma peau un jour x)
#15par Zoé, le 7 juin 2012
Par contre ce que je ne comprends pas c’est qu’en venant sous IE sur votre site, les transition certes ne marchent pas... Mais je peux au moins avoir la forme x_X
#16par David, le 9 juin 2012
Salut, Génial tes tutos, j’ai cependant un petit souci avec celui ci...
J’ai repris le principe du menu, mais ca ne fonctionnait pas comme je le souhaitais, alors j’ai simplement recopié le menu et les CSS pour voir s’il y aurait un changement, mais toujours le même souci, dans l’encart qui se décale, seuls les titres apparaissent, et les textes et liens non, le titre est meme presque centré dans l’encart... une suggestion ?
#17par David, le 9 juin 2012
Et bien Fausse Alerte c’était le
qui était mal configuré ... encore une fois très bon Style !!
#18par Tsitsi, le 5 septembre 2013
Tout d’abord merci pour tous ces tutos
Concernant celui-ci, j’ai bel et bien copier coller le style fournit sur le code source (ligne 95-168)
puis le code html à partir de la -ligne 1076 - 1110,
le soucis c’est que les text ne s’affiche pas en haut et pire ils sont cachés
Ou est ce ce que je me suis perdu ?
#19par cedcyr, le 22 septembre 2013
merci pour ce site qui est source d’une mine d’informations ! et quand je li dans les post que sous IE sa coince et même pour les autre navigateurs, juste un truc les mis à jours ça existe rien de plus ! je test systématiquement sous IE10 (bien entendu les autres version ne savent pas ce que c’est que CSS3) Firefox à jours et chrome à jours et tous va bien. encore merci et continué car on apprend grâce a vous.