BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - menu animé en JS et CSS
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

menu animé en JS et CSS

 Répondre Répondre
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: menu animé en JS et CSS
    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 :


.barre-qui-bouge {
 -webkit-transition: left 0.35s ease, width 0.35s ease;
             transition: left 0.35s ease, width 0.35s ease;
}


Le code JS utilisé :


$(function(){

$('.lien-dans-le-menu').mouseenter(function(){
    var lienLeft = parseInt($(this).css('left'));
    var lienWidth = parseInt($(this).css('width'));
    $('.barre-qui-bouge').css({
        left: lienLeft+'px',
        width: lienWidth+'px'
    });
});
    
});


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 Wink

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
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Sep 2017 à 14:12
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...Wink

Haut de la page
mraskin allez vers le bas
Senior Member
Senior Member


Depuis le: 30 Jan 2011
Pays: France
Status: Inactif
Points: 207
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer mraskin Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Sep 2017 à 17:36
oui, c'est plutôt élégant !
Windows10 - 64b
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.098 secondes.