Wie implementiert man eine reaktionsfähige horizontale Seitennavigation mit jQuery und CSS?

Responsive horizontale Seitenverschiebung

Um eine responsive horizontale Navigation ähnlich der in dem von Ihnen bereitgestellten Bild zu erstellen, Sie können eine Kombination aus CSS und jQuery verwenden. Das folgende Snippet passt die Seitengröße an die Bildschirmbreite auf jedem Gerät an:

1. Berechnen Sie die Anzahl der Folien und passen Sie die Breite des Wrappers an entsprechend.


2. Legen Sie die Breite jeder Folie basierend auf der Anzahl der Folien fest, um sicherzustellen, dass sie horizontal passen.


3. Verwenden Sie jQuery, um die linke Seite zu animieren Rand des Wrappers, um die entsprechende Folie anzuzeigen, wenn auf ein Element im Menü geklickt wird.

Diese Lösung bietet mehrere Vorteile:

1. Es verwendet nur eine Instanz des Navigationsmenüs, um die Duplizierung von Markups zu minimieren.


2. Es erfordert nur jQuery als eine Abhängigkeit.


3. Es funktioniert für eine beliebige Anzahl von Folien und ist somit eine dynamische Lösung.

< p>Um zu verhindern, dass Bildlaufleisten auf Folien mit kürzerem Inhalt angezeigt werden, legen Sie die Mindesthöhe der Seiten im CSS fest:

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

$(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;
});
});

<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>

Das obige ist der detaillierte Inhalt vonWie implementiert man eine reaktionsfähige horizontale Seitennavigation mit jQuery und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!