Souscrire
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 Giordano, le 8 juillet 2011
cinonen
#2par 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 !
#3par 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...
#4par 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 !
#5par 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 !
#6par 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 !
#7par 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.
#8par Rucoy, le 29 décembre 2011
Bonjour "iNes" parle de fichiers. Comment télécharger les fichiers sources ?
#9par moioli888, le 29 janvier
@Link : la réalissation en elle-même n’est pas faîte avec des iamages ;) Faut pas chercher non plus.. :P
#10par Whyner, le 1er mars
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
#11par css3create, le 1er mars
@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...