Comment implémenter une navigation coulissante horizontale réactive avec jQuery et CSS ?-tutoriel CSS-php.cn

Comment implémenter une navigation coulissante horizontale réactive avec jQuery et CSS ?

DDD

Libérer： 2024-10-28 04:19:30

original

604 Les gens l'ont consulté

How to implement a responsive horizontal page sliding navigation with jQuery and CSS?

Déplacement de page horizontal réactif

Pour créer une navigation horizontale réactive similaire à celle de l'image que vous avez fournie, vous pouvez utiliser une combinaison de CSS et jQuery. L'extrait suivant redimensionnera les pages pour les adapter à la largeur de l'écran sur n'importe quel appareil :

Calculez le nombre de diapositives et ajustez la largeur de l'enveloppe. en conséquence.

Définissez la largeur de chaque diapositive en fonction du nombre de diapositives pour vous assurer qu'elles s'adaptent horizontalement.

Utilisez jQuery pour animer la gauche marge du wrapper pour révéler la diapositive correspondante lorsqu'un élément du menu est cliqué.

Cette solution offre plusieurs avantages :

Il utilise une seule instance du menu de navigation pour minimiser la duplication du balisage.

Il nécessite uniquement jQuery comme une dépendance.

Cela fonctionne pour n'importe quel nombre de diapositives, ce qui en fait une solution dynamique.

< p>Pour empêcher les barres de défilement d'apparaître sur les diapositives dont le contenu est plus court, définissez la hauteur minimale des pages dans le CSS :

<code class="css">.page { min-height: 100%; }</code>

Copier après la connexion

$(document).ready(function() {
// Calculate the number of slides and adjust wrapper width
var slideNum = $('.page').length;
var wrapperWidth = 100 * slideNum;
var slideWidth = 100 / slideNum;
$('.wrapper').width(wrapperWidth + '%');
$('.page').width(slideWidth + '%');

// Click listener for navigation items
$('a.scrollitem').click(function() {
// Remove selected class and add it to the clicked link
$('a.scrollitem').removeClass('selected');
$(this).addClass('selected');

//Determine which slide number was clicked and calculate the required margin
var slideNumber = $($this).attr('href').index('.page'),
margin = slideNumber * -100 + '%';

// Animatethe wrapper's left margin to show corresponding slide
$('.wrapper.animate({
marginLeft: margin},
1000);
return false;
});
});

Copier après la connexion

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<nav>
<a href="#page-1" class="scrollitem selected">Page 1</a>
<a href="#page-2" class="scrollitem">Page 2</a>
<a href="#page-3" class="scrollitem">Page 3</a>
</nav>
<div id="page-1" class="page">
<h3>Page 1</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-2" class="page">
<h3>Page 2</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
<div id="page-3" class="page">
<h3>Page 3</h3>
<div class="simulate">Simulated content higher than 100%</div>
</div>
</div></code>

Copier après la connexion

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!