navigation jquery au-delà du glissement latéral

Dans la conception Web moderne, le menu de navigation est un élément très important. Avec la popularité des appareils mobiles, la diversité des tailles d’écran a posé plusieurs défis. Lorsqu'il y a trop d'éléments dans un menu de navigation, celui-ci peut dépasser la largeur de l'écran, il faut donc trouver un moyen pour permettre aux utilisateurs d'accéder à toutes les options. Dans cet article, nous présenterons comment utiliser jQuery pour implémenter un menu de navigation coulissant horizontal.

Tout d’abord, nous devons préparer la structure et le style HTML. Voici une structure de menu de navigation de base :

<div class="nav-container">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Join Us</a></li>
  </ul>
</div>

Nous utilisons CSS pour organiser ce menu de navigation horizontalement et définir sa largeur et d'autres styles.

.nav-container {
  overflow-x: scroll;
  white-space: nowrap;
}

.nav {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.nav li {
  display: inline-block;
  text-align: center;
  width: 120px;
}

.nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

Maintenant, nous avons le HTML et le CSS de base prêts. Ensuite, nous utiliserons jQuery pour faire glisser le menu de navigation horizontalement. Nous allons créer un effet où le menu de navigation glisse horizontalement lorsque vous cliquez sur le bouton fléché.

Tout d'abord, nous devons ajouter un gestionnaire d'événements de clic pour le bouton fléché. Voici un extrait de code jQuery qui détectera les clics sur les boutons fléchés gauche et droit et déplacera le menu de navigation en fonction de la direction des boutons fléchés :

$('.nav-arrow').on('click', function() {
  var direction = $(this).data('direction');
  var distance = $('.nav li:first-child').outerWidth();

  if (direction === 'prev') {
    $('.nav-container').animate({scrollLeft: '-=' + distance});
  } else {
    $('.nav-container').animate({scrollLeft: '+=' + distance});
  }
});

Nous avons ajouté un attribut data-direction aux boutons fléchés pour différencier la gauche et la droite. boutons fléchés. Lorsque l'utilisateur clique sur le bouton fléché, nous détecterons sa propriété data-direction et utiliserons la méthode animate() de jQuery pour déplacer en douceur la position du menu de navigation.

Nous pouvons également ajouter des effets interactifs pour améliorer l'expérience utilisateur. Par exemple, lorsque l'utilisateur atteint l'extrémité gauche ou droite du menu de navigation, nous pouvons désactiver les boutons fléchés correspondants.

$('.nav-container').on('scroll', function() {
  var distance = $('.nav li:first-child').outerWidth();
  var scrollLeft = $(this).scrollLeft();

  if (scrollLeft === 0) {
    $('.nav-arrow.prev').addClass('disabled');
  } else {
    $('.nav-arrow.prev').removeClass('disabled');
  }

  if (scrollLeft + distance >= $('.nav').outerWidth()) {
    $('.nav-arrow.next').addClass('disabled');
  } else {
    $('.nav-arrow.next').removeClass('disabled');
  }
});

Nous avons ajouté un gestionnaire d'événements de défilement pour détecter la position de défilement du menu de navigation. Lors du défilement vers l'extrême gauche, nous ajoutons une classe désactivée au bouton fléché gauche afin qu'il ne soit pas possible de cliquer dessus. De même, nous ajoutons la classe désactivée pour le bouton fléché droit lors du défilement vers l’extrême droite.

Enfin, nous pouvons ajouter une fonction d'initialisation pour définir l'état initial des boutons fléchés et du menu de navigation.

function initNav() {
  var distance = $('.nav li:first-child').outerWidth();
  var navWidth = $('.nav').outerWidth();
  var containerWidth = $('.nav-container').outerWidth();

  if (navWidth > containerWidth) {
    $('.nav-arrow.next').removeClass('disabled');
  }

  $('.nav-arrow').css('top', ($('.nav').outerHeight() / 2 - $('.nav-arrow').outerHeight() / 2));

  $('.nav li').each(function() {
    var itemWidth = $(this).outerWidth();
    if (itemWidth > distance) {
      distance = itemWidth;
    }
  });

  $('.nav li').each(function() {
    $(this).css('width', distance + 'px');
  });
}

initNav();

Dans la fonction initNav(), on détecte d'abord la largeur du menu de navigation et la largeur du conteneur. Si la largeur du menu de navigation dépasse la largeur du conteneur, nous activerons le bouton fléché droit.

Ensuite, nous centrons les boutons fléchés verticalement et définissons les éléments du menu de navigation sur une largeur égale. Étant donné que la largeur de chaque élément de menu peut être différente, nous devons détecter et définir la largeur maximale de l'élément de menu.

Jusqu'à présent, nous avons terminé d'utiliser jQuery pour obtenir l'effet de glissement horizontal du menu de navigation. Vous pouvez voir l'implémentation complète du code sur le JSFiddle suivant :

https://jsfiddle.net/36qa5x1t/

Résumé :

Cet article présente comment utiliser jQuery pour obtenir l'effet de glissement horizontal du menu de navigation. Nous avons introduit la structure de base HTML et CSS et peaufiné ce menu de navigation en ajoutant des gestionnaires d'événements de clic et de défilement et quelques effets interactifs. J'espère qu'à travers cet article, vous pourrez mieux comprendre comment utiliser jQuery pour obtenir des effets interactifs sur les pages 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!