menu animé en JS et CSS |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
Envoyé : 01 Sep 2017 à 14:02 |
|
Bonjour, je suis en train d'essayer de finaliser un menu avec les éléments principaux d'OE mais en essayant de lui donner une animation en plus. C'est à dire, que l'arrière plan du bouton menu change de couleur et s'adapte à la forme tout en ayant une animation lors du changement de bouton au passage de la souris. L'exemple en ligne sera plus parlant je pense. Voici comment est construit la base de ce menu. Des boutons liens (issu de l'élément développé par Larsène) dans un panneau d'éléments en absolute. Les boutons ont la classe "lien-dans-le-menu" (plus une transitions pour accélérer le changement de couleur de la font au survol). Les boutons ont une couleur différente au survol. À l'intérieur, un cadre avec une couleur de base (pour mon exemple, j'ai rajouté une classe supplémentaire mais cela ne change en rien le menu ou son utilisation. Il s'agit de la classe "barre-qui-bouge". Le cadre a une hauteur fixe en px mais la largeur est en auto (volontairement pour qu'il s'adapte au boutons du menu). Le code CSS utilisé pour le menu :
Tout fonctionne a peu prêt sauf certaines choses. - le menu est en absolute. J'ai essayé de le passer en relative mais le code et l'animation ne fonctionne plus correctement. - impossible de trouver comment garder la couleur "blanche" en hover sur le bouton une fois que le cadre bleu est dessus et que je retire ma souris de celui-ci. - que le premier lien garde le cadre en hover dessus et non qu'il apparaisse que lorsque je passe la souris dessus. Si mon approche n'est pas la bonne ou si quelqu'un aurait une idée du code supplémentaire pour modifier le menu, je suis tout oui. Peut être mettre en hover la couleur sur le bouton menu et voir en JS pour avoir le même effet mais j'en doute fort... Merci PS : de plus, mais cela peut être que certains ayant l'élément pourront répondre, il aurait été bien que le cadre en arrière plan puisse fonctionner avec l'élément Highlight on Scroll.
Edité par brolysan - 01 Sep 2017 à 14:06 |
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
Edit de dernière menu :
Je viens de trouver ce "menu", peut être voir pour l'adapter à mon projet. Peut être même voir pour un élément... |
||
mraskin
Senior Member Depuis le: 30 Jan 2011 Pays: France Status: Inactif Points: 207 |
Options des messages
Thanks(0)
|
|
oui, c'est plutôt élégant !
|
||
Windows10 - 64b
|
||
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |