jquery faire pivoter le bouton de navigation

Avec la popularité des appareils mobiles et la conception Web réactive, de plus en plus de sites Web commencent à adopter des boutons de navigation rotatifs pour améliorer l'expérience utilisateur. Comparé aux menus de navigation traditionnels, ce type de bouton de navigation est plus simple, plus facile à utiliser et peut mieux s'adapter aux différentes tailles d'appareils.

Dans cet article, nous explorerons comment créer un bouton de navigation rotatif à l'aide de jQuery et présenterons certains effets d'animation de rotation couramment utilisés et d'autres techniques connexes.

Étape 1 : mise en page HTML et CSS

Tout d'abord, nous devons créer la structure de base d'un bouton de navigation rotatif dans le document HTML :

<div class="rotate-btn">
  <span class="line line1"></span>
  <span class="line line2"></span>
  <span class="line line3"></span>
</div>

Ici, nous créons un élément div contenant trois éléments span pour représenter le bouton de navigation de trois des lignes droites. Nous utilisons des styles CSS pour styliser ces éléments :

.rotate-btn {
  display: block;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
}

.line {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: transform .3s ease-in-out;
}

.line1 {
  top: 0;
}

.line2 {
  top: 50%;
  transform: translateY(-50%);
}

.line3 {
  bottom: 0;
}

Dans le style CSS ci-dessus, nous définissons la largeur et la hauteur du bouton de navigation rotatif à 40 px et spécifions sa position comme positionnement relatif. En même temps, nous définissons la position et le style des trois segments de ligne en utilisant un positionnement absolu. Ce qu'il faut noter ici, c'est que nous utilisons l'attribut transform et l'attribut transition pour obtenir l'effet d'animation de rotation.

Étape 2 : Ajouter du code jQuery

Ensuite, nous devons utiliser jQuery pour ajouter des effets interactifs. Nous ajoutons d'abord la bibliothèque jQuery au fichier HTML, puis écrivons le code suivant :

$(document).ready(function() {
  $('.rotate-btn').click(function() {
    $(this).toggleClass('active');
  });
});

Dans le code ci-dessus, nous utilisons la méthode ready de jQuery pour garantir que le code du script est exécuté après le chargement du document. Ensuite, dans la méthode click, nous ajoutons un événement click pour le bouton de navigation de rotation, et lorsque le bouton est cliqué, nous utilisons la méthode toggleClass pour basculer la classe active du bouton.

Étape 3 : Ajouter des effets d'animation

Pour rendre le bouton de navigation rotatif plus vivant, nous pouvons utiliser certaines techniques de style et d'animation pour améliorer son effet visuel. Voici plusieurs effets d'animation de rotation courants :

1. Effet de retournement simple

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(-45deg);
}

.rotate-btn.active .line2 {
  opacity: 0;
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(45deg);
}

Dans cet effet, nous utilisons l'attribut rotate et l'attribut translationY pour obtenir le retournement et la translation haut-bas de la ligne droite. Dans le même temps, définissez la ligne droite médiane sur transparente pour obtenir un effet caché.

2. Effet de vague

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(45deg);
}

.rotate-btn.active .line2 {
  transform: rotate(-45deg);
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(135deg);
}

Dans cet effet, nous définissons la première et la dernière ligne droite pour qu'elles pivotent de plus ou moins 45 degrés respectivement, tandis que la ligne droite du milieu tournera autour du centre.

3. Effet de rebond

.rotate-btn.active .line1 {
  transform: translateY(10px);
}

.rotate-btn.active .line2 {
  transform: scale(0.8);
}

.rotate-btn.active .line3 {
  transform: translateY(-10px);
}

Dans cet effet, nous faisons traduire la ligne droite de haut en bas dans la direction verticale tout en rétrécissant la ligne droite médiane.

Ici, nous ne présentons que trois effets. En fait, il existe de nombreux types d'effets d'animation pour la rotation des boutons de navigation, et les développeurs peuvent les ajuster et les modifier en fonction de leurs propres besoins.

Résumé

Dans cet article, nous avons présenté le processus de base de création d'un bouton de navigation rotatif et expliqué comment utiliser jQuery et CSS pour obtenir des effets et des animations interactifs. Je pense qu'en étudiant cet article, vous maîtrisez les compétences de base de la création d'un bouton de navigation rotatif et vous pouvez utiliser cette fonction sur votre propre site Web pour améliorer l'expérience utilisateur et l'esthétique du site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!