Tournicoti Tournicoton:
Ici, il nous faut - non point chanter la chanson du "Manège enchanté" - mais lors du survol du menu par la souris, que notre sous-menu apparaisse en tournant. En réalité, pour que l'effet soit efficace, nous agirons sur le sous-menu en le faisant tourner - bien sûr - mais également en passant sa taille de 0 à auto et son opacité de 0 à 1. Sans oublier de le faire disparaître lorsque la souris quitte le menu.
Dans un 1er temps, nous allons cacher le sous-menu soit le bloc > #menu ul li ol en lui donnant une height:0 puis une opacity:0 et pourquoi pas un background:white.
Dans un 2ème temps, nous demandons au menu, lorsqu'il est survolé, de modifier le sous-menu soit le bloc > #menu ul li:hover ol en mettant la height:auto puis la opacity:1 et le background:rgba(11,123,234,.7).
Pour animer tout cela, dans chaque bloc, mettons un transform:rotate(différent) un transform-origin:center top et un transition:1s all sans oublier d'adapter le code à chaque navigateur. Les autres propriétés concernent l'aspect et sont affaire de goût.
Voici le code complet de ces 2 blocs:
Voir le sous-menu virvoltant
Comme d'hab' avec Explorer, cela ne fonctionne pas! Le sous-menu apparaît simplement... c'est fonctionnel mais ça gâche le plaisir sur programmeur!
Soyons complet et complaisant:
Pour ceux qui ont du mal ou ceux qui n'ont pas fait le boulot depuis le début, voici le code CSS complet de tout le menu:
Merci qui?